我正在嘗試使用線條為螺旋設定影片，但似乎只能使用橢圓使其作業。
有誰知道如何用 line() 替換 ellipse()？
這是代碼：
var angle = 0.0;
var offset = 60;
var scalar = 10;
var speed = 0.05;
function setup() {
createCanvas(600, 120);
fill(0);
}
function draw() {
var x = offset cos(angle) * scalar;
var y = offset sin(angle) * scalar;
ellipse( x, y, 2, 2);
angle = speed;
scalar = speed;
}
uj5u.com熱心網友回復：
假設您想使用線段立即繪制整個螺旋，您只需要一個 for 回圈來計算螺旋中當前和下一個點的 x 和 y 坐標以進行一些變化，然后在每對之間畫線的點。當然有很多方法可以撰寫這樣一個 for 回圈，具體取決于約束是什么（你想要螺旋中的特定數量的環嗎？特定數量的旋轉度數？），但重要的是你的變化增量越大你的螺旋看起來不太光滑。這是一個使用滑鼠位置來確定環數和變化增量大小的示例：
function setup() {
createCanvas(windowWidth, windowHeight);
stroke(0);
strokeWeight(4);
textAlign(LEFT, TOP);
}
function draw() {
background(255);
// let the horizontal mouse position indicate the
// size of the steps
let speed = map(mouseX, 0, width, 0.01, 1, true);
// let the vertical mouse position indicate the
// total amount of rotation
let maxRotation = map(mouseY, 0, height, TWO_PI, TWO_PI * 50, true);
push();
noStroke();
fill('red');
text(`Rings: ${(maxRotation / TWO_PI).toFixed(1)}, Speed: ${speed.toFixed(2)}`, 10, 10);
pop();
translate(width / 2, height / 2);
let scalar = 10;
if (speed <= 0) {
console.error('cannot have <= 0 speed');
return;
}
for (let angle = 0; angle < maxRotation; angle = speed, scalar = speed) {
const x = cos(angle) * scalar;
const y = sin(angle) * scalar;
const x2 = cos(angle speed) * (scalar speed);
const y2 = sin(angle speed) * (scalar speed);
line(x, y, x2, y2);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420533.html
標籤：