Question

我如何绘制填充的半透明vesica pisces？

半透明要求会使两个arc（）对象重叠失败。

编辑：

FTR，回答＃1，删除了无关的圈子：

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

输出：

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

演示：

＆＃13;

function setup() {
  createCanvas(100,100);
  
  background(0);
  noStroke();
  
  //transparent fill
  fill(255,128);
  ellipse(35,50,50,50);
  ellipse(65,50,50,50);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>

＆＃13;

如果你根据膀胱双鱼座的比例计算出你的价值（我将把它留给你作为练习），如果你愿意，也可以使用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);

}

演示：

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>

＆＃13;

事实证明，你可以与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);
}

和演示：

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>

＆＃13;

如果这不是你见过的最棒的鱼膀胱，我不会认真地知道它是什么。

绘制半透明的膀胱双鱼座

1 个答案: