//que  

// push and pop are terms that relate to a data structure, a stack, 

//pushing things onto the stack, poping things off of the stack

​

// apply and reset matrix at around 6 min in; 

let angle = 0; 

let x = 10; 

 let y =10;

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

   rectMode(CENTER);// how to make the rect rotate in teh center; 

}

​

function draw() {

  background(0);

  fill(255,0,50);

 //stroke(255);

 push(); // this save tranformations

  translate(x,y); // moves the origin 

  // use push and pop to self contain some code with in its own transformation world 

  rotate(angle);

  rect(0,0,100,50); 

  pop(); //this restores transformations 

 // line(0,0,50,50); 

  //rect(0,0,50,10); // rotating around its origin after translte sets its new origin 

  //x= x+2;

 // y= y+2;

  push();

   translate(300,300);

  rotate (-angle*3); 

  fill(50,100,255);

  rect(0,0,100,50); 

  pop(); //push and pop save and restore fill and stroke and stroke wight info too 

  fill(100,200,50);

   ellipse(200,200,60,60);

  angle= angle+1;

  if(x> width || y> height){

   x= 10;

    y =10;

  }

}