Drawing semi-transparent vesica pisces - processing

Question

How may I draw a filled semi-transparent vesica pisces?
The semi-transparent requirement makes overlaying two arc() objects fail.
EDIT:
FTR, answer #1 with extraneous circles removed:
void draw(){
background(255);
fill(0,128);
noStroke();
//fudged values vesica pisces using two arcs
arc(35,50,50,50,-HALF_PI * .5,HALF_PI * .5,OPEN);
arc(70.5,50,50,50,PI-HALF_PI * .5,PI+HALF_PI * .5,OPEN);
}
outputs this:

Answer 1

You can use a transparent fill() for semi-transparency: either a (gray,alpha) or an (r,g,b,alpha) sequence. Here's a very very basic example:
background(0);
noStroke();
//transparent fill
fill(255,128);
ellipse(35,50,50,50);
ellipse(65,50,50,50);
demo:
function setup() {
createCanvas(100,100);
background(0);
noStroke();
//transparent fill
fill(255,128);
ellipse(35,50,50,50);
ellipse(65,50,50,50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
If you work out your values based on the vesica pisces proportions (which I'll leave as an excercise to you), you can use arc() as well if you want:
void draw(){
background(255);
//circles
noFill();
stroke(0);
ellipse(35,50,50,50);
ellipse(70.5,50,50,50);
fill(0,128);
noStroke();
//fudged values vesica pisces using two arcs
arc(35,50,50,50,-HALF_PI * .5,HALF_PI * .5,OPEN);
arc(70.5,50,50,50,PI-HALF_PI * .5,PI+HALF_PI * .5,OPEN);
}
demo:
function setup(){
createCanvas(100,100);
}
function draw(){
background(255);
//circles
noFill();
stroke(0);
ellipse(35,50,50,50);
ellipse(70.5,50,50,50);
fill(0,128);
noStroke();
//fudged values vesica pisces using two arcs
arc(35,50,50,50,-HALF_PI * .5,HALF_PI * .5,OPEN);
arc(70.5,50,50,50,PI-HALF_PI * .5,PI+HALF_PI * .5,OPEN);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
Turns out you can get pretty close with TweakMode (press mouse for full shape preview):
void setup(){
size(400,400,FX2D);
}
void draw(){
background(255);
fill(0,64);
noStroke();
float diameter = width / 2;
float radius = diameter / 2;
float x = width / 3.0;
arc(x ,diameter,diameter,diameter,5.231,7.333,OPEN);
arc(x + radius,diameter,diameter,diameter,2.097,4.184,OPEN);
if(mousePressed){
stroke(0);
line(x,diameter,x+radius,diameter);
ellipse(x ,diameter,diameter,diameter);
ellipse(x + radius,diameter,diameter,diameter);
}
}
Update same principles as throughout the answer, just using the 60 degrees increments:
void drawFishBladder(float x,float y,float r){
arc(x - r * 0.5,y,r * 2, r * 2,radians(-60),radians(60),OPEN);
arc(x + r * 0.5,y,r * 2, r * 2,radians(120),radians(240),OPEN);
}
and demo:
function setup() {
createCanvas(400,400);
colorMode(HSB,360,100,100);
background(0,0,100);
noStroke();
}
function draw() {
fill(frameCount % 360,100,100);
drawFishBladder(mouseX,mouseY,map(sin(frameCount * 0.1),-1.0,1.0,20,200));
}
function drawFishBladder(x,y,r){
arc(x - r * 0.5,y,r * 2, r * 2,radians(-60),radians(60),OPEN);
arc(x + r * 0.5,y,r * 2, r * 2,radians(120),radians(240),OPEN);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
If this isn't the awesomest fish bladder you've ever seen, I don't know what is, seriously.