# Project-03-Dynamic-Drawing

As I was creating this, I didn’t really know what my end goal was going to be. I mostly let creative freedom have its way while I tried out different shapes and movements to see what I liked best. Altogether, this project was pretty tough for me, as a couple of things I wanted to do were a little too complicated (and it was all getting too jumbled and confusing), so I tried to keep it simpler, but with interesting-enough shapes. I tried to experiment more with triangles and mouseX/mouseY, which is why I focused so much on it.

``````//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-03

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

function draw() {
background(248, 207, 233);
//background lines
var x = 0
fill(0, 255, 0);
strokeWeight(.3);
//these lines will shake back and forth - it
//   will change the position of each line with a value
//   between 1 and 5 as well as move with the mouse
//half of them will move up with the mouse,
//half will move down with the mouse
x = x + random(1, 3);
line(x + 5, 0, x + 5, mouseY);
line(x + 25, 600, x + 25, mouseY);
line(x + 45, 0, x + 45, mouseY);
line(x + 65, 600, x + 65, mouseY);
line(x + 85, 0, x + 85, mouseY);
line(x + 105, 600, x + 105, mouseY);
line(x + 125, 0, x + 125, mouseY);
line(x + 145, 600, x + 145, mouseY);
line(x + 165, 0, x + 165, mouseY);
line(x + 185, 600, x + 185, mouseY);
line(x + 205, 0, x + 205, mouseY);
line(x + 225, 600, x + 225, mouseY);
line(x + 245, 0, x + 245, mouseY);
line(x + 265, 600, x + 265, mouseY);
line(x + 285, 0, x + 285, mouseY);
line(x + 305, 600, x + 305, mouseY);
line(x + 325, 0, x + 325, mouseY);
line(x + 345, 600, x + 345, mouseY);
line(x + 365, 0, x + 365, mouseY);
line(x + 385, 600, x + 385, mouseY);
line(x + 405, 0, x + 405, mouseY);
line(x + 425, 600, x + 425, mouseY);
line(x + 445, 0, x + 445, mouseY);
line(x + 465, 600, x + 465, mouseY);
//triangles
//the top points of each triangle will follow mouse
fill(155, 44, 75);
push();
noStroke();
//top triangles
//constrain mouseX within the canvas
var mouse1 = max(min(mouseX, 480), 0);
var mouse2 = max(min(mouseY, 640), 0);
triangle(mouse1, 50, 50, 150, 125, 150);
triangle(mouse1, 50, 200, 150, 275, 150);
triangle(mouse1, 50, 350, 150, 425, 150);
//center triangles - these will go in opposite direction
triangle(-mouse1 + 480, 225, 50, 325, 125, 325);
triangle(-mouse1 + 480, 225, 200, 325, 275, 325);
triangle(-mouse1 + 480, 225, 350, 325, 425, 325);
//bottom triangles
triangle(mouse1, 400, 50, 500, 125, 500);
triangle(mouse1, 400, 200, 500, 275, 500);
triangle(mouse1, 400, 350, 500, 425, 500);
pop();
//these circles wil move vertically with the mouse
//larger circles
push();
noStroke();
fill(201, 50, 93);
ellipse(75, 10 + mouse2 * 225 / 600,
40, 40);
ellipse(75, 200 + mouse2 * 225 / 600,
40, 40);
ellipse(240, 10 + mouse2 * 225 / 600,
40, 40);
ellipse(240, 200 + mouse2 * 225 / 600,
40, 40);
ellipse(400, 10 + mouse2 * 225 / 600,
40, 40)
ellipse(400, 200 + mouse2 * 225 / 600,
40, 40);
//smaller circles
ellipse(165, 10 + (-mouse2+1000) * 225 / 600,
20, 20);
ellipse(165, 200 + (-mouse2+1000) * 225 / 600,
20, 20);
ellipse(320, 10 + (-mouse2+1000) * 225 / 600,
20, 20);
ellipse(320, 200 + (-mouse2+1000) * 225 / 600,
20, 20);
pop();
}
``````