绘制半透明的水囊双鱼座

Question

如何画一个填充的半透明vesica双鱼座？

半透明的要求使得覆盖两个 arc() 对象失败。

Answer 1

您可以使用透明的 fill() 实现半透明：

(gray,alpha)

或

(r,g,b,alpha)

序列。这是一个非常非常基本的例子：

background(0);
noStroke();

//transparent fill
fill(255,128);
ellipse(35,50,50,50);
ellipse(65,50,50,50);

演示：

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>

如果您根据双鱼座的水泡比例计算出您的值（我将其作为练习留给您），如果您愿意，您也可以使用

arc()

：

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);

}

演示：

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>

事实证明，您可以通过 TweakMode 获得非常接近的结果（按下鼠标进行完整形状预览）：

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);
  }
}

更新与整个答案相同的原则，只是使用 60 度增量：

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);
}

和演示：

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>

如果这不是你见过的最棒的鱼鳔，说真的，我不知道什么才是。