时间戳

首页 > 解决方案 > 在 P5.js 中用形状制作圆环

javascript - 在 P5.js 中用形状制作圆环

问题描述

我想在 P5.js 中制作一个圆圈。我希望圆圈彼此之间具有相同的大小并完成戒指，但圆圈的数量可以更改为任何值。

for(var i = 0; i < 13; i++){
    xCircle = middle + cos(i/3) * 200;
    yCircle = middle - sin(i/3) * 200;
}

这只会启动环，但不会完成它。而且我知道某个地方必须是圆圈的总数，但我不知道在哪里。

标签： javascriptprocessingp5.js

解决方案

以弧度表示的完整圆的角度是 2*PI = 6,2836...。你已经将一个完整的圆的角度除以部分（圆）的数量，并将它乘以i圆的索引（ ）。

例如

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>

推荐阅读