Rotating objects inside the canvas

Processing Beginners
1

I’m missuderstanding the combination of translate(), rotate(), pushmatrix() and popmatrix();
In the example, I’m trying to rotate the sinus functions after translating the matrix to its origin,
but obviosuly there’s many sine functions that end up being drawn outside the canvas, and i don’t understand why! any clue?

Thank you very much!!!

void setup() {
 size(800, 800);
 frameRate(1);
 //noLoop();
 }

void draw() {
 background(0);
 noFill();
 stroke(255);
 for (int i=0; i<20; i++){
   float x=random(800);
   float y=random(800);
   float w=100+random(200);
   float h=random(20);
   float len=random(0.0,PI/10);
   float ph=random(800);
   pushMatrix();
   translate(x,y);
   rotate(radians(random(180)));
   sindraw(x,y,w,h,len,ph);
   popMatrix();
 }
}

void sindraw(float startx, float starty, float w, float h, float len, float ph){
   beginShape();
 for (float i = startx; i <=startx+w; i+=1) {
   float j = starty + (sin(ph) * h);
   vertex(i, j);
   ph += len;
 }
 endShape();
}
1 Like
2

Hello,

I fiddled with your code a bit.
Take a look at what I did to help understand what I did and code is doing.
Good tools for understanding and debugging code are:

  • println()
  • simple visuals like point() to see what is going on.
  • comment/ uncomment
  • noLoop You have this!
  • Slow frameRate You did this!
//https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387

void setup() 
  {
 size(800, 800);
 frameRate(1);
 //noLoop();
   }

void draw() 
  {
 background(0);
 noFill();
 stroke(255);
 
 translate(width/2, height/2);  // Origin is center of screen
 
 for (int i=0; i<20; i++)
   {
   float x=random(width/8);        // Limit to width/8
   float y=random(height/8);       // Limit to height/8
   //x = 0;
   //y = 0;
   println(x, y);
   //float w=100+random(200);
   //float h=random(20);
   //float len=random(0.0,PI/10);
   //float ph=random(800);
   
  pushMatrix();
   translate(x,y);
   rotate(radians(random(180)));
   //sindraw(x,y,w,h,len,ph);
   
   //Test points
   stroke(255, 255, 0);
   strokeWeight(3);
   point(x, y);
   
  popMatrix();
   }
  }

There are also lots of resources here:

And here:

:)

2 Likes
3

Thanks glv!
your example helped me realize that after doing translate i had to start drawing my sine function at 0,0, as the translate is already placing the coordinates origin where you tell it…

I ended up, by the moment, with this:

void setup() 
  {
 size(1920, 1080);
 frameRate(1);
 //noLoop();
   }

void draw() 
  {
 background(0);
 noFill();
 stroke(255);

 
 for (int i=0; i<20; i++)
   {
   float x=random(width);  
   float y=random(height);
   float w=50+random(width/2);
   float h=random(10);
   float len=random(0,1);
   float ph=0;
   
   pushMatrix();
   translate(x,y);
   rotate(-45+radians(random(90)));
   sindraw(0,0,w,h,len,ph);
   popMatrix();
   }
  }
  
void sindraw(float startx, float starty, float w, float h, float len, float ph){
   
  beginShape();
  for (float i = startx; i <=startx+w; i+=1) {
  float j = starty + (sin(ph) * h);
  vertex(i, j);
  ph += len*(i/w);
 }
 endShape();
}

My intention with this is to go on improving this weird thing i have running 24h a day until the lockdown lasts (situation is kinda hard here in spain):

thanks, and hope you enjoy the stream!

2 Likes
4

I thoroughly enjoyed it!

:)