// circunfrance of a circle = 2 pi r (radian)

// unit circle = 1 or also 2 pi

​

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; 

  ellipseMode(CENTER);

}

​

function draw() {

  background(0);

  fill(255,0,50);

 //stroke(255);

 push(); // this save tranformations

  translate(200,200); // moves the origin 

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

  rotate(angle);

  scale(1,4);

  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

  push();

  x= x+1;

  y= y+1;

   translate(x,y);

  rotate (-angle*3); 

  fill(50,100,255,127);

  rect(0,0,100,50); 

  pop();

   push();

  x= x+1;

  y= y+0.5;

   translate(x,y);

  rotate (angle*3); 

  fill(50,100,155,127);

  rect(0,0,100,50); 

  pop();

  push();

   rotate(angle);

  translate(300,300);

  fill(100,200,50);

  ellipse(0,0,50,50);

  pop();

   push();

   rotate(-angle);

  scale(-1);

  translate(100,100);

  fill(189, 138, 219);

  ellipse(0,0,50,50);

  pop();

  angle= angle+2;

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

   x= 10;

    y =10;

  }

}