Category: Uncategorized

For this assignment, I used a fish for my main theme. As the fish food gets closer to the bowl, the view zooms in. Also, the fish rotates  when the fish food gets closer to the bowl. The box tilts towards the fish bowl as soon as it hits the top of the fish bowl. In addition, as the mouse moves down, the background changes from dark to light. It took me a long time to understand how to use the if statements properly. I enjoyed this project. In the future, I want to be able have the fish bowl get bigger as the mouse moves. 

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-03

// variables
var fishX = 50;
var fishY = 20;
var fbX = 60;
var fbY = 90;
// background color
var rColor = 70;
var gColor = 70;
var bColor = 130;

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

function draw() {
    // background changes color as mouse moves up and down
    var rColor1 = min(mouseY + rColor, 244);
    var gColor1 = min(mouseY + gColor, 244);
    var bColor1 = min(mouseY + bColor, 150);
    // by manipulating rColor, gColor, and bColor based on mouseY position
    // background is random
    background(rColor1, gColor1, bColor1);

    // fishbowl
    noStroke();
    fill(131, 172, 219);
    // once the mouse is past 150 on y axis - the fish bowl gets bigger
    if (mouseY >= 200){
        ellipse(fbX * 4, fbY * 5, 450, 450);
        rect(fbX / 2, fbY * 2, fbX * 7, fbY + 50, 20);
    }
    // fishbowl when it is not past 150 on y axis
    ellipse(fbX * 4, fbY * 5, 350, 350);
    rect(fbX + 5, fbY * 3, fbX * 5.8, fbY + 10, 20);

    // goldfish body
    noStroke();
    fill(214, 135, 53);
    // what happens when mouse goes past 200 on y axis
    if (mouseY >= 200) {
        // movement of goldfish when mouse is past 200 on y axis
        push();
        // the fish gets bigger to seem like zooming in
        scale(1.2);
        // the fish starts moving away from the mouse
        rotate(radians(mouseY / 70));
        // goldfish body
        ellipse(fishX * 2.2, fishY * 15, 30, 15);
        ellipse(fishX * 3, fishY * 15, fishX * 1.5, fishX * 1.5);
        triangle(fishX * 3, fishY * 15, fishX * 3.5, fishY * 18, fishX * 2,
                 fishY * 18);
        // goldfish face
        noStroke();
        fill(94, 94, 94);
        ellipse(fishX * 3, fishY * 14, 10, 10);
        // goldfish scales
        noFill();
        stroke(94, 94, 94);
        strokeWeight(2);
        arc(fishX * 2.84, 315, 15, 15, PI, PI / 3);
        arc(fishX * 3.15, 320, 15, 15, PI, PI / 3);
        arc(fishX * 3.06, 306.2, 15, 15, PI, PI / 2);
        pop();
    }

    // what happens when mouse stays between 199 on y axis
    if (mouseY <= 199) {
        // goldfish stays still when mouse go stays between 199 on y axis
        noStroke();
        //goldfish body
        ellipse(fishX * 2.2, fishY * 20, 30, 15);
        ellipse(fishX * 3, fishY * 20, fishX * 1.5, fishX * 1.5);
        triangle(fishX * 3, fishY * 20, fishX * 3.5, fishY * 23, fishX * 2, fishY * 23);
        // goldfish face
        noStroke();
        fill(94, 94, 94);
        ellipse(fishX * 3, fishY * 19, 10, 10);
        // goldfish scales
        noFill();
        stroke(94, 94, 94);
        strokeWeight(2);
        arc(fishX * 2.82, 414, 15, 15, PI, PI / 3);
        arc(fishX * 3.1, 410, 15, 15, PI, PI / 3);
        arc(fishX * 3.07, 421, 15, 15, PI, PI / 2);
        pop();
    }

    // fishfood box
    //the fishfood box position is slightly slanted
    translate(mouseX - 70, mouseY - 150);
    rotate(-50, -50, 55, 55);
    // when the mouse goes past 200 on y axis - fishfood tilts the opposite way
    if (mouseY >= 200) {
        rotate(-26, -26, 0, 0);
        translate(5, 0);
        // fishfood pebbles show after mouse goes past 200 on y axis
        fill(94, 77, 54);
        ellipse(fbX / 2, fbY / 1.5, 20, 20);
        ellipse(fbX / 1.8, fbY, 20, 20);
        ellipse(fbX / 9, fbY, 20, 20);
    }

    // box
    noStroke();
    fill(176, 56, 55);
    rect(50, 40, 125, 200, 10, 10, 10, 10);
    // logo
    fill(94, 94, 94);
    rect(fbX, fbY + 10, 100, 30);
    rect(fbX, 140, fbX + 40, 90);
    fill(214, 135, 53);
    ellipse(fbX + 50, 180, 40, 40);
    triangle(fbX * 2, 190, 110, 210, 140, 200);
}

sketch

/*
    Bo Yang
    Section A
    byang2@andrew.cmu.edu
    Project-03-Dynamic-Drawing
*/

var angle1 = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var position = 0;


function setup() {
    createCanvas(600, 600);
}

function draw() {
    //background changes color from black to white
    background(mouseX, mouseY);
    noStroke(0);

    //rotating rectangle
    push();
    translate(200, 200);
    rotate(radians(angle2));
    fill(200, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, 0, mouseX, mouseY - 20);
    pop();
    angle2 = angle2 + 5;

    //rotating rectangle
    push();
    translate(180, 180);
    rotate(radians(angle3));
    fill(mouseX, mouseY, 255);
    rect(0, 0, mouseX + 20,  mouseY);
    pop();
    angle3 = angle3 + 15;

    //rotating black ellipse
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle4));
    fill(0);
    ellipse(0, 0, mouseX, mouseY);
    pop();
    angle4 = angle4 + 30;
    

    //rotating ellipse
    push();
    translate(width - 50, height - 50);
    rotate(radians(angle1));
    fill(random(0, 255), random(0, 255), random(0, 255));
    ellipseMode(CORNER);
    ellipse(position, 0, mouseX, mouseY);
    pop();
    position = position + 1; 
    angle1 = angle1 + 10;

}

This is my Dynamic Drawing. To be fancy, I make them all can change colors. The background can change colors from black to white when you moving your mouse. And the two rectangles also can change color, one is blue, the other is red. And also, when you moving your mouse, it can also change size. The two ellipses, one is black and cannot change color. The other one can change all the colors by itself.