Sarah Choi – Project 03 – Dynamic Drawing

project-03

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-03-Dynamic-Drawing

//spiral
var angle = 0;
var bright = 255;
var n = 0;
var m = 0;
var x = 8 * n;
var y = 8 * m;

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

function draw() {
    noStroke();
    if (mouseIsPressed) {
        bright = 255;
    }
    background(bright);
    bright = bright - 5;

    fill(255, 0, 0);
    var m = max(min(mouseX, 200), 20);
    var size = m * 200.0 / 250.0;
    rect(10 + m * 150.0 / 350.0, 400.0,
         size, size);
    fill(0, 0, 255);
    size = 200 + size;
    circle(150, 50 + m * 150 / 250.0,
         size / 2, size / 2);

    push();
    fill(0, 255, 0);
    ellipseMode(CORNER);
    var n = max(min(mouseX, 300), 200);
    var size2 = n * 200.0 / 400.0;
    ellipse(400 , size2, size2 * 2, size2 * 4);
    pop();
    
    if (mouseIsPressed) {
        fill(255, 255, 0);
        noStroke();
        strokeWeight(5);
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(100, 0, 150, 150, 175, 150);
        quad(175, 150, 150, 150, 200, 200, 250, 200);
        triangle(200, 200, 250, 200, 150, 450);
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(300, 0, 275, 150, 250, 150);
        quad(275, 150, 250, 150, 300, 200, 350, 200);
        triangle(300, 200, 350, 200, 250, 450);
        pop();
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(25, 0, 0, 50, -25, 50);
        quad(0, 50, -25, 50, 45, 100, 75, 100);
        triangle(45, 100, 75, 100, 25, 250);
        pop();
        angle = angle + 5;
    }

    if (x <= width) {
        n += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
    else { 
        m += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
}

I was inspired by the weather. After playing around, I was able to come up with the code where when the mouse is pressed, the background inversed and slowly went back to normal. This reminded me of a flash of lightning, which is what I wanted to convey in my project.

Leave a Reply