Caroline Song – Project 03 – Dynamic Drawing

sketch

//Caroline Song
//Section E
//chsong@andrew.cmu.edu
//Project 03 - Dynamic Drawing

var speed = 3;
var distX = 0;
var distY = 1;
var rectX = 300;
var rectY = 300;
var rectWidth = 50;
var rectHeight = 300;

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

function draw(){
//change background color when mouse cursor is on lower half of canvas
    if(mouseY > height/3){
        background(255, 96, 71);
       } else{
       background ("black");
       }

//constantly moving yellow rectangle
    rect(rectX, rectY, rectWidth, rectHeight);
    fill(245, 236, 66);
    noStroke();
    rectX = rectX + distX * speed;
    rectY = rectY + distY * speed;

    if (rectY >= height){
        rectY = -rectHeight;
    }

//when mouse pressed, shapes change from circle to rectangle. 
//shapes will also change colors
    push();
    if(mouseIsPressed){

        //yellow rectangle following mouse cursor when mouse pressed
        rectMode(CENTER);
        rect(mouseX, mouseY, 100, 100);
        fill(245, 149, 66);
        noStroke();

        //blue rectangle when mouse pressed
        rectMode(CENTER)
        rect(400 - mouseX, 300 + mouseY, 75, 75);
        fill(66, 135, 245);
        noStroke();

        //purple rectangle when mouse pressed
        rectMode(CENTER);
        rect(width/2 + mouseX, height/2 - mouseY, 300, 300);
        fill(188, 66, 245);
        noStroke();

        //orange rectangle when mouse pressed
        rectMode(CENTER);
        rect(480, 400, 60, 60);
        fill(245, 236, 66);
        noStroke();

        //yellow rectangle in corner when mouse pressed
        rectMode(CENTER);
        rect(0, 0, 300, 300);
        fill(71, 255, 169);
        noStroke();

    } else {

        //yellow circle
        ellipse(mouseX, mouseY, 200, 200);
        fill(66, 245, 135);
        noStroke();

        //pink circle
        ellipse(400 - mouseX, 300 + mouseY, 300, 300);
        fill(232, 152, 245);
        noStroke();

        //blue circle
        ellipse(width/2 + mouseX, height/2 - mouseY, 100, 100);
        fill(152, 245, 228);
        noStroke();

        //orange circle
        rectMode(CENTER);
        rect(480, 400, mouseX, mouseY);
        fill(245, 236, 66);
        noStroke();

        //yellow rectangle
        rectMode(CENTER);
        rect(0, 0, mouseX, 300);
        fill(71, 255, 169);
        noStroke();

    }
    pop();

}

Coming up with an idea for my dynamic drawing was one of the most challenging parts for me, because there seemed to be so many things to choose from that I didn’t know where to start. However, once I began, I decided to focus on how shapes can interact and flow together in a single piece, creating my final dynamic drawing.