0
194
ViewsImagen giratoria entre 2 ángulos en Javascript usando p5.js
Quiero rotar mi imagen entre cos(20) y -cos(20) con una animación fluida.
El árbol se realiza recursivamente con la función branch() . No puedo entender cómo hacerlo con bucles. ¿Hay una función integrada o un algoritmo específico para hacerlo?
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> 
·
Juan Pablo Isaza
1 answers
Answer question0
Intenté esto, aunque no estoy seguro de que sea lo que pediste, así que siéntete libre de comentar.
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>
·
Juan Pablo Isaza
Report
Answer question