Rotating Image between 2 angles in Javascript using p5.js

Question

I want to rotate my image between cos(20) and -cos(20) with a smooth animation.

The tree is done recursively with branch() function. I can't figure out how to do it with loops. Is there a built in function or a specific algorithm to do so?

 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

I tried this, though I'm not sure it's what you asked for so feel free to comment.

 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>