haewanp – Project 03 – Dynamic Drawing

Dynamic Drawing

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