0
196
ViewsRotating Image between 2 angles in Javascript using p5.js
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>
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question