Project 3-Dynamic Art

Dave Dynamic

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Assignment-03-B
//variable for Bezier curvature 
var Curv;
//variable for Red, Green, Blue color. 
  var R = 0;
  var B = 0;
  var G = 0;
  function setup() {
  createCanvas(640, 480); //setting Canvas size to 600x480
  //No fill for any geometry
  noFill();
  //initializing Curv 
  Curv = 0;
}
function draw() {
  //adding random number to Red for change of color when it is < 255 
  
  //adding random number to Blue for change of color when it is < 255 
 
   //adding random number to Green for change of color when it is < 255  

  //When any of R,G,B elements are over 255, it resets to 0.
  if (R >= 255){
    R = 0;
  }
  if (G >= 255){
    G = 0;
  }
  if (B >= 255){
    B = 0;
  }
  //variable for color c
  var c = color(R,B,G);
  //continuously assign color variable to stroke
  stroke(c, 10);
  //setting up standard place for x and y coordinate. 
  var x = width/2;
  var y = height/2;
  //Dividing the canvas into four difference quadrant. 
  if (mouseX > x & mouseY < y ) { //when mouse is on right top quadrant
    Curv += mouseX/60; //Curv value goes up randomly from 1 to 5
    R += mouseX/120 + mouseY/50;// Red is sum of differenct X and Y value
   }
   if (mouseX < x & mouseY < y){//when mouse is on left top quadrant
    Curv -= mouseY/30; //Curv value goes down randomly from 4 to 12
    B += mouseX/40 + mouseY/80;// Blue is sum of differenct X and Y value
   }
   if (mouseY > y & mouseX > x){//when mouse is on right bottom quadrant
    Curv += mouseY/60;//Curv value goes up randomly from 4 to 12
   }
   if (mouseY > y & mouseX < x){//when mouse is on left bottom quadrant
    Curv -= mouseX/30;//Curv valvue goes down randomly from 1 to 5
    G += mouseX/70 + mouseY/100;// Green is sum of differenct X and Y value
   }
   //when Curv is larger than height or width, or less than 0 , it will reset to 0.
  if ( Curv > height || Curv < 0 || Curv > width){ 
    Curv = 0;
   }
   //setting background to black 
  background(0);
  //bezier curves.
  //each for statement is used to generate multiple bezier curve based on increment of i value
  //bezier curve assigns, anchor points and control points to create paramatric curve. 
  //bezier(anchor pts, anchor pts, control pts, control pts, control pts2,control pts2, anchor pts2,anchor pts2)
  for (var i = 0; i < mouseX; i += 30){
    bezier(mouseX-(Curv+i/2.0), mouseY-Curv+i, Curv*2, Curv, Curv*2, Curv*2, mouseX, 0);
  }
  //based on the i and z constraint, number of lines are decided. 
  // i or z's constraints are defined by mouse X adn Y position
  // all the position of the anchor points are based on the mouse X and Y 
  for (var z = 200; z < mouseY; z += 30){
    bezier(mouseX-(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width-mouseX, 0);
  }
 for (var i = 0; i < height-mouseY; i += 30){
    bezier(mouseX+(Curv+i/2.0), mouseY+Curv+i, Curv*2, Curv, Curv*2, Curv*2, 0, mouseY);
  }
  for (var z = 200; z < width-mouseX; z += 30){
    bezier(mouseX+(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width, height-mouseY);
  }
  

}

For this Dynamic art project, I focused on the movement of line in a curve form. At first, I wanted to express very light wing like motion based on the mouse position. I abstracted the initial concept and created the following digital illustration of movement. Fortunately, I found a example at p5js website that resembles part of what I imagined. I took that example and modified to create my own dynamic art.