Fireworks

This program was inspired when I was playing around with altering the degree of the function, and noticing that it behaved like a flashing light. I applied this to the mouse, using the mouse to control how the function behaves, and also it’s size, to create “flashes”. I colored them, and they became fireworks. To add another interactive element, I wanted to make something that the user could “explode” themselves, so I added the TNT.

sketch

var nPoints = 100;      //used for loops and mapping
var q = 10;     //used for changing degree
var p = 0;      //used for changing size

function setup() {
    createCanvas(400, 400);
    background(0,0,0)
    frameRate(10);
}


function draw() {
    background(0);  //black
    noStroke(); 

rectMode(CENTER);
fill(255,0,0)   //red
    rect(width/2,height/2,30,50)    //TNT block
fill(255)
    rect(width/2,height/2,30,20)
fill(0)
    text('TNT',width/2-12,height/2+5)

if(mouseIsPressed){
   if(mouseX<(width/2)+15 & mouseX>(width/2)-15 && mouseY<(height/2)+25 && mouseY>(height/2)-25)   //if mouse is inside TNT
        p=p+5       //increse size of explosion curve
    }else{
        p=0     //hide explosion curve
}

push();
translate(mouseX,mouseY-20)
    drawQuad7Curve();       //dynamite fuse
        q=q+1       //change degree of curve
            if(q>60){
                  q=10    //reset degree of curve after 60 changes
}
pop();

push();
    fill(255,0,0);  //red
        rect(mouseX,mouseY,10,20);  //TNT block
pop();

push()
if(mouseX>25 & mouseX<75){
     translate(20,50);  
       drawQuadCurve();     //green firework  
   }
if(mouseX<25){
    fill(0,255,0);      //green
       rect(20,height-mouseX*12,2,20)   //green firework starter
}
pop();

push();
 if(mouseX>50 & mouseX<100){
     translate(100,100);
         drawQuad2Curve();      //red firework
}
pop();

push();
if(mouseX>10 & mouseX<60){
    fill(255,0,0)       //red 
        rect(100,height-mouseX*4.5,2,20);    //red firework starter
}
pop();

push();   
if(mouseX>100 & mouseX<150){ 
    translate(200,300);
        drawQuad3Curve();       //blue firework 
}
pop();

push();
if(mouseX>60 & mouseX<110){
    fill(0,0,255);  //blue
        rect(200,height-mouseX/2,2,20);     //blue firework starter
}
pop();

push(); 
if(mouseX>150 & mouseX<200){
push();
    translate(300,200);
        drawQuad4Curve();   //yellow firework
} 
pop();

push();
 if(mouseX>100 & mouseX<150){
    fill(255,255,0);    //yellow
        rect(300,height-mouseX,2,20);       //yellow firework starter
}
pop();

push();
 if(mouseY>200 & mouseY<250){
    translate(350,100)
        drawQuad8Curve()        //purple firework
 }
pop();

push();
 if(mouseY>100 & mouseY<200){
    translate(150,50)
        drawQuad9Curve()        //light blue firework
 }
pop();

push();
    translate(200,200)
        drawQuad5Curve();       //orange explosion curve
        drawQuad6Curve();       //white explosion curve

 pop();


//--------------------------------------------------
function drawQuadCurve() {
    
var x;
var y;
var r;

    
    var a = map(mouseX,0,50,0,width/5);     //size determined by mouseX within a mapped range
    var n = constrain(mouseX, 0, height/2);     //degree of curve determined by a constrained mouseX

    
    fill(0,255,0);      //green
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);      //determine angle by mapping
        
        r =  a * sin(n*t)   //radius
           
        x = r * cos(t);     //x of function
        y = r * sin(t);     //y of function
        vertex(x, y);       //plot function
    
    }
    endShape(CLOSE);        //close object to fill


}

function drawQuad2Curve(){
    
var x;
var y;
var r;

    
    var a = map(mouseX,50,100,0,width/9)
    var n = constrain(mouseY/2, 0, height); 

    
    fill(255,0,0)
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, PI*5);
        
        r =  a * sin(n*t) 
           
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);


}

function drawQuad3Curve(){
    
var x;
var y;
var r;

    
    var a = map(mouseX,100,150,0,width/7)
    var n = constrain(mouseX, 0, height-mouseY); 

    
    fill(0,0,255);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, PI*3);
        
        r =  a * sin(n*t)    
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);

}

function drawQuad4Curve(){
    
var x;
var y;
var r;

    
    var a = map(mouseX,150,200,0,width/5)
    var n = constrain(mouseX, 0, mouseY); 

    
    fill(255,255,0);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        r =  a * sin(n*t)    
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);


}

function drawQuad5Curve(){
    
var x;
var y;
var r;

    
    var a = p*20
    var n = 60; 

    
    fill(247,181,67);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        r =  a * sin(n*t) 
           
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);

}

function drawQuad6Curve(){
    
var x;
var y;
var r;

    
    var a = p*5;
    var n = 30; 

    
    fill(255);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        r =  a * sin(n*t) 
           
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);

}

function drawQuad7Curve(){
    
var x;
var y;
var r;

    
    var a = 10
    var n = constrain(q, 0, height);        //degree based on the changingvariable q

    
    fill(255,255,0);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        r =  a * sin(n*t) 
           
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);

}

}
function drawQuad8Curve(){
    
var x;
var y;
var r;

    
    var a = mouseX/10
    var n = constrain(q, 0, height);  
    
    fill(182,68,249);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        r =  a * sin(n*t) 
           
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);

}

function drawQuad9Curve(){
    
var x;
var y;
var r;

    
    var a = map(mouseY,100,200,0,height/20)
    var n = constrain(q*2, 0, height); 

    
    fill(68,237,249);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, PI);
        
        r =  a * sin(n*t) 
           
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);

}

Leave a Reply