//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.