//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-03-DynamicDrawing
function setup() {
createCanvas(480, 640);
}
function draw() {
var Top = 480;
var bottom = Top + 180;
var x = 110;
var y = 50;
var c1 = color(0);
var c2 = color(0);
var mX = max(min(mouseX, 480), 0);
var mY = max(min(mouseY, 640), 0);
var mX_L = max(min(mouseX, 240), 0); // when mouse is on left side
var mX_R = max(min(mouseX, 480), 240); // when mouse is on right side
if (mY > height/2) {
c1 = color(255); //change color from black to white
strokeWeight(20);
}
background(c1);
//Blue Stripe Pattern when mouse hovers below than half of height
for (var r = 0; r < 40; r += 1) {
if (r % 2 == 0) {
if (mY > height/2) {
c2 = color(0, 41, 149); //change color from black to blue
}
stroke(c2);
}
line(-50, height/10 * r - 560 + mY, width + 50, height/10 * r - 260 - mY);
}
//outline of cube
strokeJoin(ROUND);
strokeWeight(5);
stroke(255);
//outline of cube disappears when mouse hovers below than half of height
if (mY > height/2) {
strokeWeight(0);
}
for (i = -4; i < 4; i+=1) {
fill(237, 10, 124); // Magenta, Top Side of Cube
quad(mX, Top + 2*y + (mX_R - mX_L)/10,
mX_L - x, Top + y,
width/2, Top - (mX_R - mX_L)/10,
mX_R + x, Top + y);
fill(14, 198, 184); // Green, Left Side of Cube
quad(mX, Top + 2*y + (mX_R - mX_L)/10,
mX_L - x, Top + y,
mX_L - x, bottom,
mX, bottom + y + (mX_R - mX_L)/10);
fill(255, 241, 0); // yellow, Right Side of Cube
quad(mX, Top + 2*y + (mX_R - mX_L)/10,
mX_R + x, Top + y,
mX_R + x, bottom,
mX, bottom + y + (mX_R - mX_L)/10);
Top = Top - 210 + mY/5.5;
bottom = bottom - 210 + mY/5.5;
}
}
It was a process to consider the relationship among graphic elements and explore the way execute in coding. The more I learn about p5.js the more challenging project comes. But, actually, that means also I can create more complex and dynamic graphics in p5.js.