I am unable to properly rotate

p5.js Coding Questions
1

Hello my friends, I am trying to apply the rotation technique of my drawing, but I am not able to make the drawing rotate without leaving the place.

I remember that to effect this technique I have to pass the width / 2 and height / 2 to translate, but I am not getting the desired effect of rotation of the drawing without leaving the place.

Here is the code below:

fill(random(255), random(255), random(255));
strokeWeight(5);
var estrela = function(posX, posY,giro,tamanho){
    pushMatrix();
    translate(posX, posY);
    rotate(giro);
    scale(tamanho);
   
    fill(0, 255, 0);
    ellipse(195,109,80,80);
    ellipse(122,230,80,80);
    ellipse(277,230,80,80);
    noFill();
    strokeWeight(50);
    stroke(0,255,0);
    arc(128,134,124,160,346,443);
    arc(196,277,169,146,222,322);
    arc(263,134,124,160,450,551);
    noStroke();
    fill(0, 255, 255);
    ellipse(195,109,50,50);
    ellipse(122,230,50,50);
    ellipse(277,230,50,50);
    
    fill(255, 0, 196);
    ellipse(195,109,20,20);
    ellipse(122,230,20,20);
    ellipse(277,230,20,20);
    
    stroke(0,255,255);
    strokeWeight(13);
    ellipse(195,188,70,70);
    
    //filter(BLUR,12);
  
    noStroke();
    
    fill(0, 255, 0);
    ellipse(195,109,80,80);
    ellipse(122,230,80,80);
    ellipse(277,230,80,80);
    noFill();
    strokeWeight(50);
    stroke(0,255,0);
    arc(128,134,124,160,346,443);
    arc(196,277,169,146,222,322);
    arc(263,134,124,160,450,551);
    noStroke();
    fill(0, 255, 255);
    ellipse(195,109,50,50);
    ellipse(122,230,50,50);
    ellipse(277,230,50,50);
    
    fill(255, 0, 196);
    ellipse(195,109,20,20);
    ellipse(122,230,20,20);
    ellipse(277,230,20,20);
    
    stroke(0,255,255);
    strokeWeight(13);
    ellipse(195,188,70,70);
    
    popMatrix();
   
};

var rotation = 0;
draw = function() {
    background(255);
    estrela(width/2,height/2,rotation,1.0);
    rotation++;
};
2

When combining rotations and translations, order matters. Have you tried putting rotate() before the translate()?

3

Hello, I was using the rotate after the translate, what I had to do to function was to place the drawing correctly near the center of the screen, it was still half capenga, more worked.

If you want to have a look, you are online:
https://pt.khanacademy.org/computer-science/spinner-rotation/5690716002746368

And here is the code of how it was, where you can also see the link above.

var colorSort1 = random(0, 255);
var colorSort2 = random(0, 255);

var colorSort3 = random(0, 255);
var colorSort4 = random(0, 255);
var colorSort5 = random(0, 255);

var Spinner = function(posX, posY,giro,tamanho){
    pushMatrix();
    translate(width/2, height/2);
    rotate(giro);
    scale(tamanho);
    background(0, 0, 0);
    
    fill(colorSort3, colorSort4, colorSort5);
    ellipse(195-200,109-207,80,80);
    ellipse(122-200,230-207,80,80);
    ellipse(277-200,230-207,80,80);
    noFill();
    strokeWeight(50);
    stroke(colorSort3, colorSort4, colorSort5);
    arc(128-200,134-207,124,160,346,443);
    arc(196-200,277-207,169,146,222,322);
    arc(263-200,134-207,124,160,450,551);
    noStroke();
    fill(0, 255, 255);
    ellipse(195-200,109-207,50,50);
    ellipse(122-200,230-207,50,50);
    ellipse(277-200,230-207,50,50);
    
    fill(255, 0, 196);
    ellipse(195-200,109-207,20,20);
    ellipse(122-200,230-207,20,20);
    ellipse(277-200,230-207,20,20);
    
    stroke(0,255,255);
    strokeWeight(13);
    ellipse(195-200,188-207,70,70);
    
    
    //filter(BLUR,12);
    noStroke();
    
    fill(colorSort3, colorSort4, colorSort5);
    ellipse(195-200,109-207,80,80);
    ellipse(122-200,230-207,80,80);
    ellipse(277-200,230-207,80,80);
    noFill();
    strokeWeight(50);
    stroke(colorSort3, colorSort4, colorSort5);
    arc(128-200,134-207,124,160,346,443);
    arc(196-200,277-207,169,146,222,322);
    arc(263-200,134-207,124,160,450,551);
    noStroke();
    fill(0, 255, 255);
    ellipse(195-200,109-207,50,50);
    ellipse(122-200,230-207,50,50);
    ellipse(277-200,230-207,50,50);
    
    fill(255, 0, 196);
    ellipse(195-200,109-207,20,20);
    ellipse(122-200,230-207,20,20);
    ellipse(277-200,230-207,20,20);
    
    stroke(colorSort1,random(0, 255),colorSort2);
    strokeWeight(13);
    ellipse(195-200,188-207,70,70);
    popMatrix();
};


var rotation = 0;
var velocidade = 0;
var tempo = 0;
draw = function() {
    background(0);
    Spinner(width/2,height/2,rotation,1.0);
    rotation+=velocidade;
    
  
      
     if(velocidade > 0){
         tempo += 0.000001;
         velocidade -= tempo;
     }
     
     if(velocidade < 0){
         velocidade = 0;
         tempo = 0;
     }
     
    //println('Velocidade: '+velocidade+' Tempo: '+tempo);
};

var mousePressed = function(){
    velocidade++;
};
1 Like
4

another solution (which is arguably worse, but useful if you’ve already made a drawing with a certain offset like you have and you just want to rotate it around some point), is to draw the entire drawing to another canvas, then draw that canvas to the main canvas with the desired translation + rotation. (this saves on having to re-adjust the values of the drawn components to center them on the origin)

the fidget spinner looks a bit broken in my version though, so I probably ruined it during my copy-paste :stuck_out_tongue:

https://editor.p5js.org/julian2/sketches/rJcklxNtQ

1 Like
5

It’s a good technique, my friend, I did not know her.

CreateGraphics does not exist in the version I use in the Khan Academy editor.

More will be very useful to me in the processing editor, which has the latest p5.js mode. ^^

Thank you!

I also managed to get the spinner spinning on the code I had made at Khan Academy:
https://www.khanacademy.org/computer-science/spinner-rotation/5690716002746368

^^

1 Like