# hyt-Project-03: 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 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();

// 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){
}

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;
}
}

b = mouseX; // color gradient for background
stroke(0);
strokeWeight(3);
v = random(120, 125);
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);
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);
}
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);
}
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.