# Rotating objects inside the canvas

**URL:** <https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387>\
**Category:** Beginners\
**Created:** [April 4, 2020, 8:29am UTC](https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387 "2020-04-04T08:29:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eltrem](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eltrem/32/3023_2.png) [@eltrem](https://discourse.processing.org/u/eltrem)\
**Post date:** [April 4, 2020, 8:29am UTC](https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387/1 "2020-04-04T08:29:07Z")

</div>

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!!!

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 4, 2020, 10:25am UTC](https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387/2 "2020-04-04T10:25:13Z")

</div>

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!

```auto
//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:

> **[Tutorials](https://processing.org/tutorials/)**
>
> Links to videos that cover the Processing basics.

And here:

> **[The Coding Train](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)**
>
> All aboard! The Coding Train is on its way with creative coding video tutorials on subjects ranging from the basics of programming languages like JavaScript to algorithmic art, machine learning, simulation, generative poetry, and more. Choo choo!

`:)`

---

<div class="post-metadata">

**Author:** ![eltrem](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eltrem/32/3023_2.png) [@eltrem](https://discourse.processing.org/u/eltrem)\
**Post date:** [April 4, 2020, 3:24pm UTC](https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387/3 "2020-04-04T15:24:31Z")

</div>

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:

```auto
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):

https://player.twitch.tv/?channel=playmodes&autoplay=false

thanks, and hope you enjoy the stream!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 4, 2020, 3:44pm UTC](https://discourse.processing.org/t/rotating-objects-inside-the-canvas/19387/4 "2020-04-04T15:44:04Z")

</div>

I thoroughly enjoyed it!

`:)`