adev_Project 03_Dynamic Drawing

project_03

var angle = 0;

var rectX = 0;

var r = 255;
var g = 0;
var b = 0;

var col = 0;

function setup() {
    createCanvas(640, 480);  
    background(255,225,53);
    fill(255);
    noStroke();
    rect(0,0,320,4800);
    angleMode(DEGREES);
    rectMode(CENTER);
    
}

function draw() {
    
    //rotating rectangle1
     push();
    translate (130,100);
        rotate (angle);
    fill (r,g,b);
    stroke(255);
    strokeWeight(2)
;        rect(rectX, 0,100,30);
     rect(rectX+50, 20,100,30);
    rect(rectX+100, 40,100,30);
    rect(rectX+150, 60,100,30);
    angle = mouseY + 2;
        pop();
    
    //rotating rectangle 2
     push();
    translate (300,300);
        rotate (angle);
    fill (r,g,b);
    stroke(255);
    strokeWeight(2);
        rect(rectX, 0,100,30);
     rect(rectX+50, 20,100,30);
    rect(rectX+100, 40,100,30);
    rect(rectX+150, 60,100,30);
    angle = mouseY + 2;
        pop();
    
       //rotating rectangle 3
      push();
    translate (50,400);
        rotate (angle);
    fill (r,g,b);
    stroke(255);
    strokeWeight(2);
        rect(rectX, 0,100,30);
     rect(rectX+50, 20,100,30);
    rect(rectX+100, 40,100,30);
    rect(rectX+150, 60,100,30);
    angle = mouseY + 2;
        pop();
    
    //yellow half of the composition
    fill(255,225,53);
    noStroke();
    rect(160+320,240,320,480);  
    
    //white rectangle
      if (mouseX > 480){
        fill(col);
        noStroke();
        rect(480,240,200,380);
          
          col = col +2;
    }
      
    var height1 = map(mouseY,0, 480, 0, 240);
    
    //semicricles
    fill(244, 148, 4);
    noStroke();
    arc(480, 0, 320, height1, 0,0, OPEN);
    arc(480, 480, 320, -height1 , 0,0, OPEN);
    
    //pink lines
    stroke(255, 63, 232);
    strokeWeight(20);
    line(20,0,20,mouseY);
   line(106,0,106,mouseY);
    line(212,0,212,mouseY);
    line(310,0,310,mouseY);
    
  
  
    
}