我想在P5.js中制作一个圆圈。我希望圆圈彼此之间具有相同的尺寸并完成圆环,但是圆圈的数量可以更改为任何值。
for(var i = 0; i < 13; i++){
xCircle = middle + cos(i/3) * 200;
yCircle = middle - sin(i/3) * 200;
}
这只是启动戒指但不完成它。我知道某个地方必须是圈子的总数,但我不知道在哪里。
以弧度表示的整圆的角度为2 * PI = 6,2836 ....您可以将整圆的角度除以零件数(圆圈)并将其乘以圆的索引(i
)。
e.g
middle = // ...
circleRadius = // ...
circles = 13;
angle = Math.PI*2 / circles;
for(var i = 0; i < circles; i++){
xCircle = middle + cos(angle*i) * 200;
yCircle = middle - sin(angle*i) * 200;
ellipse(xCircle, yCircle, circleRadius*2, circleRadius*2);
}
如果你想使用度而不是弧度,那么角度模式可以通过angleMode()
切换到度。
整圆的角度为360度:
angleMode(DEGREES);
circles = 13;
angle = 360 / circles;
for(var i = 0; i < circles; i++){
xCircle = middle + cos(angle*i) * 200;
yCircle = middle - sin(angle*i) * 200;
ellipse(xCircle, yCircle, circleRadius*2, circleRadius*2);
}
如果你想绘制形成圆形的“触摸”圆圈,那么一个圆的半径(circleRadius
)可以通过sin(angle/2) * radius
计算,其中radius
是圆形的半径:
circles = 13;
angle = Math.PI*2 / circles;
radius = 200;
circleRadius = sin(angle/2) * radius;
看例子:
function setup() {
createCanvas(250, 250);
}
function draw() {
background(0);
fill(0);
stroke(255, 0, 0)
strokeWeight(2);
middle = width/2;
circles = 13;
angle = Math.PI*2 / circles;
radius = 100;
circleRadius = sin(angle/2) * radius;
for(var i = 0; i < circles; i++){
xCircle = middle + cos(angle*i) * radius;
yCircle = middle - sin(angle*i) * radius;
ellipse(xCircle, yCircle, circleRadius*2, circleRadius*2);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>