hyt-Project-03: Dynamic Drawing

Dynamic Drawing

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing

var x1 = 100; // top left coordinate of the quad
var x2 = 150; 
var x3 = 200;
var x4 = 250;
var y = 230; // top left coordinate of the quad
var v = 150; // random variable, refer to attached pic in post 
var TH = 120; // triangle height, refer to attached pic in post
var TW = 170;
var radius = 20; // radius
var lightOn = false;
var curveOn = false; 
var arrived1 = false;
var arrived2 = false;
var arrived3 = false;
var arrived4 = false;


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


function draw() {
    background(0); // black

// lights turn on the screen
    fill(255, 255, mouseX / 3); // yellow
    text("~press me~", 80, 100);
    noStroke();
    ellipse(200, 200, radius, radius); // light source

// mouse approach the light source and light fills the screen
    var distance = dist(mouseX, mouseY, 200, 200);
    if (distance < 10) {
        lightOn = true;
    }
    if (lightOn == true){
        radius += 5;
    }

// a sequential order from quad1+3 to quad2+4
    if (radius > 500) {
        if (x1 < 150) {
            x1 += 1
        } else {
            arrived1 = true; 
        }
        if (x2 < 200 & arrived1 == true) {
            x2 += 1;
        } else {
            arrived2 = true;
        }
        if (x3 < 250 & arrived2 == true) {
            x3 += 1;
        } else {
            arrived3 = true;
        }
        if (x4 < 300 & arrived3 == true) {
            x4 += 1;
        } else {
            arrived4 == true;
        }
    }

// original quad lines
    b = mouseX; // color gradient for background
    stroke(0);
    strokeWeight(3);
    v = random(120, 125);
    // quad 1
        line(x1, y, x1 + TW, y - TH); 
        line(x1 + TW, y - TH, x1 + TW, y - TH + v); 
        line(x1 + TW, y - TH + v, x1, y + v);
        line(x1, y + v, x1, y);
    // quad 2
    if (arrived1 == true) {
        line(x2, y, x2 + TW, y - TH); 
        line(x2 + TW, y - TH, x2 + TW, y - TH + v); 
        line(x2 + TW, y - TH + v, x2, y + v);
        line(x2, y + v, x2, y);
    }
    // quad 3
    if (arrived2 == true) {
        line(x3, y, x3 + TW, y - TH); 
        line(x3 + TW, y - TH, x3 + TW, y - TH + v); 
        line(x3 + TW, y - TH + v, x3, y + v);
        line(x3, y + v, x3, y);
    }    
    // quad 4
    if (arrived3 == true) {
        line(x4, y, x4 + TW, y - TH); 
        line(x4 + TW, y - TH, x4 + TW, y - TH + v); 
        line(x4 + TW, y - TH + v, x4, y + v);
        line(x4, y + v, x4, y);
    }

}

This project has been extremely challenging to me. I was struggling a lot with which idea to focus on, and eventually chose an abstract geometric, animation-like shape. I wanted to create a scenery of light litting up the screen in darkness, and surprisingly you would find moving, animated geometry sequence. The end product was not really what I expected, but in general I was glad that I learned ways to use better logic with if statements.