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.

sketch

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


}