Elena-Deng-Project-03-Dynamic-Drawing

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-03
}
*/

var x=68; //position (X)
var y=240; // position (Y)





function setup() {
    createCanvas(640, 480);

}

function draw() {
  background(30); //background color
  noStroke();
  rectMode(CENTER);

  if (mouseIsPressed) {
    background(255); //changes background color when mouse is pressed
  }



  fill(121,114,map(mouseY,0,height,170,190)); //changing the B value of the rectangle
  rect(x,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,50,80)); //(map(n,a,b,x,y))can set the range at which something changes


  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,50,map(mouseY,0,height,90,150)));
  rect(x+28,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,200,100));


  fill(93,map(mouseX,0,width,80,110),166);
  rect(x+56,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,180,250));


  fill(map(mouseY,0,height,180,220),90,69);
  rect(x+84,y,23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,220,265),218,map(mouseX,0,width,115,130));
  rect(x+112,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,280,120));

  fill(196,map(mouseX,0,width,20,50),56); //changing the G value of the rectangle color
  rect(208,y,23,map(mouseY,0,height,10,300));

  fill(121,114,map(mouseY,0,height,150,240));
  rect(236,y,23,map(mouseY,0,height,170,300));

  fill(map(mouseY,0,height,180,220),95,map(mouseX,0,width,10,60));
  rect(264,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,80,150));

  fill(map(mouseX,0,width,120,150),148,186);
  rect(292,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,300,150));

  fill(map(mouseY,0,height,150,240),75,62);
  rect(320,y,23,map(mouseY,0,height,100,350));

  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,40,90));
  rect(348,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,50,250));

  fill(93,map(mouseX,0,width,60,100),166);
  rect(376,y,23,map(mouseY,0,height,200,100));

  fill(map(mouseY,0,height,240,265),218,123);
  rect(404,map(mouseX,0,width,y-40,y+40),23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,180,200),map(mouseX,0,width,30,60),56);
  rect(432,y,23,map(mouseY,0,height,250,100));

  fill(209,90,map(mouseX,0,width,50,80));
  rect(460,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,100,200));

  fill(map(mouseX,0,width,120,140),147,186);
  rect(488,y,23,map(mouseY,0,height,250,100));

  fill(map(mouseY,0,height,195,215),95,(map(mouseX,0,width,30,50)));
  rect(516,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,150,50));

  fill(map(mouseY,0,height,235,255),147,69);
  rect(544,map(mouseX,0,width,y-15,y+15),23,map(mouseY,0,height,40,80));
//used the map tool to change y position
//used map tool to change Y size of rectangle
//used map tool to change various R,G,B values to make a sort of variation between colors
}

This project was really fun! At first I got a slow start because I didn’t know what my four variations would be, but I had the general idea of what I wanted the end result to be. I really like the color palette I chose and my idea to change the mouse pressed came from what I learned about color theory lately.