//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.