CODEWITHSUNDEEP
p5.js
Camille Ameline
Camille Ameline

Reputation: 1

Rotate for p5.js

I'm working on a experimental clock on p5.js web editor. I did a simple ellipse that repeat itself every second. But, as i a begginner, i don't understand why it start on the left corner. I trying to rotate it, because i want it to start on the bottom center on my canvas.

If someone can help me, thank you so much !

Here is my code :

function setup(){
  createCanvas(600,600);
  smooth();
  
}

function draw(){
  
  background(230,340,344);
  
  let hr = hour();
  let mn = minute();
  let sc = second();
  
 
  for (let i=1; i < sc ; i++) {
  fill(23,34,456)
  stroke (1);
  ellipse(i*6,250,60,100);
  }
}

Upvotes: 0

Views: 338

Answers (1)

Jacob Stuligross
Jacob Stuligross

Reputation: 1479

You could try to use rotate(), but I think that's much more complicated than you need. I would just swap the coordinates of the center of the ellipses:

ellipse(250,i*6,60,100);

But wait, now it's going down! So in order to have it move upward, we can simply change the sign of the y coordinate:

ellipse(250,-i*6,60,100);

But now it's just going off the top, so we translate it down to start at the bottom:

ellipse(250, height-i*6,60,100);

You could also change it so that the ellipse makes it all the way to the top when a minute passes (use i*10 instead of i*6). Another way is to use map():

ellipse(250, map(i, 0, 60, height, 0), 60, 100);

map() does linear interpolation; if i==0, then it outputs height, if i==60, it outputs 0, and for the values in between, puts it on a straight line between them.

Upvotes: 1

Related Questions