sntong-Project-03-Dynamic-Drawing

sketch

//Scarlet Tong
//Sectiom A
//sntong@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var column = 64;
var loc = 30;
var dim = 30;
var R = 254;
var G = 254;
var B = 254;
var angle = 0;
var angleVar = 40;
var dir = 8;
var colorGo = false;

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

}

function draw(){
  background (0);
  var w = 0;
  var h = 0;

  // basic grid of square
  push();
  translate(width/2,height/2);
  angleMode(DEGREES);
  noStroke();
  rectMode(CENTER);
  fill(254);
  rect(w, h, dim,dim);//center rect
  rotate(angle);
  fill(R,G,B);//color pair 1
  rect(w-loc,h-loc,dim,dim);//rect a1
  rect(w+loc,h+loc,dim,dim);//rect a8
  //color pair 2
  fill(R+loc,G,B);
  rect(w,h-loc,dim,dim);//rect a2
  rect(w-loc,h,dim,dim);//rect A4
  //color pair 3
  fill(R,G+loc,B);
  rect(w+loc,h-loc,dim,dim);//rect a3
  rect(w-loc,h+loc,dim,dim);//rect a6
  //color pair 4
  fill(R,G,B+loc);
  rect(w+loc,h,dim,dim);//rect A5
  rect(w,h+loc,dim,dim);//rect a7
  pop();

  stepOne();
  stepTwo();
  // this resets the value for angle to make sure the squares rotate when
  //the mouse is going back and forth the canvas
  if (mouseX < column*2 || mouseX > column*9) {
    angle = 0;
  }

  stepThree();
  //this to make sur the random color generation does not continue
  if (mouseX < column) {
    colorGo = false;
  }

}

function stepOne(){
  if (mouseX >= column & mouseX <= column+column/2 && mouseX <= column*3) {
    //Translation of the sqaures away from the center
    loc = max(50);
    loc += mouseX-70;
    //scale each square larger
    dim += mouseX-140;
    dim = max(50);
  }
}

//rotation of outter squares
function stepTwo (){
  //rotating the outside squares if mouseX is between a certain range
  if (mouseX > column*4 & mouseX < column*9 && angle < 90) {
    angle += angleVar*dir;
    R = random(0,254);
    G = random(0,254);
    B = random(0,254);
  } if (angle >= 90  & colorGo == false) {//to stop rotation exceeding 90 degrees
    angle = 90;
    colorGo = true;
  } else {
    angleVar = 0.2*dir;
  }
}
//Collsping and combining the squares to make large square
function stepThree(){
  if(mouseX > column*7 & mouseX < width){
    loc += mouseX-400;
    loc = min(50);
  }
}

I had fun trying to create a simple sequence of motion starting from the idea of generating a part to whole. A large square splits into smaller modules, and there is a variety of color and rotation that makes them all different from the “original” module that is located in the middle. I had to plan out the steps by using hand sketch diagrams.