Jiyoung Ahn – 03 – Dynamic drawing

I tried to review things that I have learned. I created a pattern, and tried to show different effects like color,scale change by using one interaction (by just moving x-axis cursor).

sketch

//Jiyoung Ahn
//section A
//jiyounga@andrew.cmu.edu
//project 03

  var intervX = 60; 
  var intervY = 60; 
  var Xspace = 35; 
  var Yspace= 35; 


  var crvd1 = 0;
  var crvd2 = 10;
  var crvd3 = 20;
  var crvd4 = 30;  

  var rectS1 = 10;
  var rectS2 = 20;
  var rectS3 = 30;
  var rectS4 = 40;

  var dir = 1;
  var speed = 5;
  var diam = 50;

  var rectt= 2;

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

}


function draw() {


  var colorOne = map(mouseX, 246, height, 246,235,159); 
  var colorTwo = map(mouseX, 114, height, 159,208,246); 
  var colorThree = map(mouseX, 76, height, 196,246,159); 

  background(colorOne,colorTwo,colorThree);// color background change 

  var x = 300;
  var dir = 1;
  var speed = 5;

 


  
  for (var y = 0; y < 6; y++) {
    if ( y % 2== 0){
      for (var x =0; x <11; x++){
        var my = Yspace + y * intervY;
        var mx = Xspace + x * intervX;
        noStroke ();
        rectMode (CENTER);
        deg = radians (30);

        fill (135,192,250);
        rect (mx, my, rectS4, rectS4, crvd1);
        
        fill (170,204,239);
        rect (mx, my, rectS3, rectS3, crvd2);
        
        fill (249,253,143);
        rect (mx, my, rectS2, rectS2, crvd3);
        
        fill (255);
        rect (mx, my, rectS1, rectS1, crvd4);

         rotate(radians(map(mouseX, 0, height, 0, rectt)));// rotates when move mouse to X axis.
      }
    }

    else {

      for (var x = -10; x< 10; x++){
        var my = Yspace+ y * intervY;
        var mx = intervX/2 + Xspace + x * intervX

        fill (255, 171, 230);
        rect (mx, my, rectS4, rectS4);
        
        fill (251,209,239);
        rect (mx, my, rectS3, rectS3);
        
        fill (177,221,160);
        rect (mx, my, rectS2, rectS2);
        
        fill (255);
        rect (mx, my, rectS1, rectS1);
        
      }
  
    }
    if ((mouseX>80) & (mouseX<340)){  
    crvd4= map(mouseX,280,580,150,300);
    rectS4= map(mouseX,280,580,45,100);
    }  //pink, blue squares expand when you move mouse left to right
    

  }
}

It was quite a challenge for me to create a pattern with six lines. I had to figure out how to place them continuously.