2017-03-17 126 views
-1

我如何绘制一个填充半透明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); 
    } 

输出该:

enter image description here

+0

为什么不回复乔治的优秀答案,你为什么不回答一个评论,解释在你的背景下答案不起作用? –

+0

我认为这是中间的线。如果问题的焦点在于透明度,我已经回答了这个问题。中间的线是因为我使用硬编码值而不是使用从正确的双鱼座公式计算中获得的值,所以可能性是x位置或弧角稍微偏离。如果问题是关于正确计算这些价值的问题,首先需要在问题中明确说明问题,理想情况下甚至表现出试图解决问题的尝试,以便其他人可以相应地提供建议/支持。 –

回答

0

可以使用透明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>

如果你的工作基础上,vesica双鱼座比例(我将离开作为一个锻炼; Tibial你的价值观你也可以使用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); 
} 

vesica pisces - fish bladder, tomato,tomata

和演示:

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>

如果这是不是你见过的awesomest鱼膀胱,我不知道是什么,认真。