Rachel Shin – Project 03

For this project, I decided to start with the rotating squares that I learned in recitation. From there, I layered shapes with differing positions, sizes, angles, and a change in background color to create a cohesive art piece. I thought it was fun to experiment with stroke, stroke colors, shapes, layering, rotating, and mouseX/mouseY positions to create a moving art piece.

reshin-03-project-dynamic

//Rachel Shin
//reshin@andrew.cmu.edu
//15-104
//Section B
//Project 03- Dynamic Drawing

    var angle = 0;
    var angle2 = 0;

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

function draw() {
    
    //background: color change based on mousex
    background(109, 140, 148);

    if (mouseX > width/2) {
        background(202, 220, 224);
    }

    //circle1: size change, position same
    noFill();
    strokeWeight(10);
    stroke(230, 197, 211);
    ellipse(50, 50, mouseX, mouseX);

    //circle2: size change, position same
    noFill();
    strokeWeight(20);
    stroke(194, 79, 83);
    ellipse(430, 430, -mouseX, -mouseX);

    //circle3: size change, position same
    noFill();
    strokeWeight(30);
    stroke(79, 121, 194);
    ellipse(430, 50, mouseX, mouseX);

    //circle4: size change, position same
    noFill();
    strokeWeight(40);
    stroke(139, 194, 79);
    ellipse(50, 430, -mouseX, -mouseX);

    //rect 1: size change, position same
    noStroke();
    fill(139, 173, 137);
    rect(20, 50, (-mouseX/3), (mouseY/2));

    //rect2: size change, position same
    noStroke();
    fill(246, 250, 190);
    rect(20, 460, mouseX/5, mouseY/8);

    //circle3: size same, position change
    fill(173, 146, 108);
    ellipse(mouseX/2, mouseY/3, 100, 200);



    //spinning squares
    noStroke();
    fill('white');
    push();
    rotate(degrees(angle));
    rect(mouseX, 5, 50, 50);
    pop();
    angle = angle + 2;

    
    push();
    translate(195,195);
    rotate(degrees(angle2));
    rect(mouseX-100, 5, 50, 50);
    pop();
    angle2 = angle2 - 2;

    //baymax
    if (mouseY > height/2) {
        //if vertical position is at 240 or more, draw baymax
        noStroke();
        fill('white');
        ellipse (200, 300, 100, 70);

        noStroke();
        fill('black');
        ellipse (175, 300, 15, 15);

        noStroke();
        fill('black');
        ellipse (225, 300, 15, 15);

        noStroke();
        fill('black');
        rect (175, 300, 50, 5);

        text("HI, I'M BAYMAX, YOUR PERSONAL HEALTH CARE COMPANION", 50, 400, 400, 50);
    }


}