ssontag-fireworks-Project-03-DynamicDrawing

For this project I let my knowledge of certain functions built into p5.js. I researched Perlin Noise and became pretty comfortable with the way it worked in conjunction with the rotate function to create a firework effect.

``````
function setup() {
createCanvas(640, 480);
}

function draw() {
background(220);
//these rectangles following are lined up one after the other
//they follow the x value of the mouse, but are offset by the rectangles next to them
fill(219, 112, 147);
rect(mouseX + 525, 0, 300, 480);

fill(176, 224, 230);
rect(mouseX + 500, 0, 25, 480);

fill(255, 218, 185);
rect(mouseX + 350, 0, 150, 480);

fill(135, 206, 250);
rect(mouseX + 300, 0, 50, 480);

fill(30, 144, 255);
rect(mouseX, 0, 300, 480);

fill(143, 188, 143);
rect(mouseX - 100, 0, 100, 480);

fill(255, 140, 0);
rect(mouseX - 300, 0, 200, 480);

fill(173, 216, 230);
rect(mouseX - 350, 0, 50, 480);

fill(224, 255, 255);
rect(mouseX - 450, 0, 100, 480);

fill(240, 128, 128);
rect(mouseX - 750, 0, 300, 480);

//my goal was to modulate the position of the cirlces rotated around the translated orgin
//in order to create a firework effect
//by using push, pop, and rotate i can make a circular array of ellipses
//by using the perlin noise i can make the circles ungulate based on the perlin noise number sequence
translate(width/2, height/2);
for (var i = 0; i < 16; i++) {
push();
rotate(TWO_PI * i / 16);
var tx = 200 * noise(0.01*frameCount);
translate(tx, 0);
fill(255, 239, 213);
ellipse(mouseX - 400, 0, 20, 20);
translate();
pop();
}

for (var i = 0; i < 8; i++) {
push();
rotate(TWO_PI * i / 8);
var tx = 200 * noise(0.01*frameCount);
translate(tx, 0);
fill(102, 51, 153)
ellipse(mouseX - 200, 0, 50, 50);
translate();
pop();
}

//this translation puts a firework in the bottom right corner
translate(width/2, height/2);
for (var i = 0; i < 32; i++) {
push();
rotate(TWO_PI * i / 32);
var tx = 200 * noise(0.01*frameCount);
translate(tx, 0);
fill(0, 128, 128);
ellipse(mouseX - 200, 0, 10, 10);
translate();
pop();
}
//this translation places a firework in the top left corner
translate(-640, -480);
for (var i = 0; i < 32; i++) {
push();
rotate(TWO_PI * i / 32);
var tx = 200 * noise(0.01*frameCount);
translate(tx, 0);
fill(0, 128, 128);
ellipse(mouseX - 200, 0, 10, 10);
translate();
pop();
}

}

``````