使用 p5.js 在 Javascript 中的 2 個角度之間旋轉圖像

Question

我想用平滑的動畫在cos(20)和-cos(20)之間旋轉我的圖像。

樹是用branch()函數遞歸完成的。 我不知道如何用循環來做到這一點。 是否有內置函數或特定算法可以這樣做？

 let angles = 0; var strokeValue = 1; function setup() { const canvas = createCanvas(540, 400); frameRate(8); } function draw() { background(220); angle = PI/8; translate(250, height); // I think the rotate function should be here branch(90); } function branch(length) { strokeWeight(strokeValue); line(1, 1, 1, -length); translate(0, -length); if (length > 4) { //Right branches push(); rotate(angle); branch(length * 0.72); pop(); // left branches push(); rotate(-angle); branch(length * 0.72); pop(); push(); // middle rotate(-angle * 0.2); branch(length * 0.3); pop(); } }

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

Answer 1

我試過這個，雖然我不確定這是你要求的，所以請隨時發表評論。

 let angles = 0; var strokeValue = 1; function setup() { const canvas = createCanvas(540, 400); frameRate(30); } function draw() { background(220); angle = PI/8; translate(250, height); // I think the rotate function should be here rotate(cos(map(frameCount / 10,0,100,-20,20))); branch(90); } function branch(length) { strokeWeight(strokeValue); line(1, 1, 1, -length); translate(0, -length); if (length > 4) { //Right branches push(); rotate(angle); branch(length * 0.72); pop(); // left branches push(); rotate(-angle); branch(length * 0.72); pop(); push(); // middle rotate(-angle * 0.2); branch(length * 0.3); pop(); } }

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