#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# How to modify fireworks code so that it reacts to sound (mic input)

edited December 2017

I would like to modify the code from Daniel Shiffman's coding challenge so that it looks like the following: http://www.secondstep.dk/p5doodles/fireworks/

Could anyone tell me which parts of the code I should change?

Tagged:

• It's worth mentioning that the code for the fireworks you've linked to is here:

http://www.secondstep.dk/p5doodles/fireworks/sketch.js

So if you want it to look the same, well, the code is right there.

If you really do want to edit your own code, start by formatting it properly in your post:

• edited December 2017

Thank you for the comment! So when I copy paste the code from the link to Processing I get an error message that says "badly formed character (expecting quote,got g)." Could you tell me how to fix this or run the code properly in Processing? I am new to coding and am very lost...thank you so much in advance!

var rockets = [];
var sparkles = [];
var moving = true;
var gravity = 0.4;

function setup() {
// put setup code here

createCanvas(windowWidth, windowHeight);
background(0);
strokeWeight(1);

colorMode(HSB);

var thisRocket = new rocket();
rockets.push(thisRocket);
}

function draw() {
// put drawing code here
translate(width / 2, height);
background('rgba(0,0,0, 0.1)');
for (var i = rockets.length - 1; i >= 0; i--)
{
if(rockets[i].type == "Exploded")
rockets.splice(i,1);
else
rockets[i].draw();
}

for (var i = sparkles.length - 1; i >= 0; i--)
{
if(sparkles[i].position.y > 0 || sparkles[i].brt <= 0)
sparkles.splice(i,1);
else
sparkles[i].draw();
}

if (int(random(0, 12)) == 0)
{
var thisRocket = new rocket();
rockets.push(thisRocket);
}
}

function rocket(position, speed, type, sparkler, afterblow)
{
//  stroke(255);

if (position == undefined)
this.position = createVector(int(random(-width / 2, width / 2)), 0);
else
this.position = position.copy();

if (speed == undefined)
this.speed = createVector(random(-1,1), -random(10,22));
else
this.speed = speed.copy();

if (afterblow == undefined)
this.afterblow = -1;
else
this.afterblow = afterblow;

if (sparkler == undefined)
this.sparkler = round(random(0,1)) == 0;
else
this.sparkler = sparkler;

this.fuse = random(-1,1);
this.hue = round(random(0,360));

this.type = type;
if(type == undefined)
{
typeIndex = int(random (0,9));
switch (typeIndex)
{
case 0:
this.type = "simple";
break;
case 1:
break;
case 2:
this.type = "directed";
break;
case 3:
this.type = "burster";
break;
case 4:
this.type = "double";
break;
case 5:
this.type = "mega";
break;
case 6:
break;
case 7:
this.type = "writer";
break;
case 8:
this.type = "swirler";
break;
}
}

this.draw = function()
{
stroke(255);
if(this.fuse < this.speed.y || this.afterblow >= 0)
this.explode();

if (this.sparkler)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,1);
sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
sparkles.push(thisSparkle);
}
stroke(this.hue+round(random(-10,+10)), random(0,20), 90);

point(this.position.x,this.position.y);

this.speed.y = this.speed.y + gravity;
}

this.explode = function()
{
switch (this.type)
{
{
if (this.afterblow == -1)
this.afterblow = round(random(3,8));

if(this.afterblow-- > 0)
{
noStroke()
thisSize = random (40,60)
fill(this.hue+round(random(-10,+10)), random(0,20), 90);
ellipse(this.position.x + random(-30,30) ,this.position.y + random(-30,30) ,thisSize,thisSize);
}
else
this.type = "Exploded";
}
break;
case "directed":
{
var dir = random(0, TWO_PI);
for (var i = 0; i < 50; i++)
{
sparkleDir = dir+random(0, PI/1.5);
sparkleVel = random(3,5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)));
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "burster":
{
for (var i = 0; i < 60; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,3) + random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)), "sparkler");
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "double":
{
for (var i = 0; i < 90; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(3,5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(2,4), this.hue+round(random(-10,+10)), round(random(0,40)));
sparkles.push(thisSparkle);
}
for (var i = 0; i < 10; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,.5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(2,4), this.hue+round(random(-10,+10)), round(random(0,40)));
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "mega":
{
for (var i = 0; i < 1000; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,4)+random(0,4);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)));
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
{
for (var i = 0; i < 100; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,2)+random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), round(random(0,40)),"blinker");
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "writer":
{
for (var i = 0; i < 100; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,2)+random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), round(random(0,40)),"writer");
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "swirler":
{
for (var i = 0; i < 60; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,3) + random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)), "swirler");
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
default:
{
for (var i = 0; i < 100; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), 0);
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
}
}
}

function sparkle(position, speed, fade, hue, sat, type)
{
this.position = position.copy();
this.speed = speed.copy();
this.hue = (hue == undefined ? 360 : hue);
this.sat = (sat == undefined ? 0 : sat);
this.type = (type == undefined ? "default" : type);

this.brt = 255;

this.burntime=0;

this.draw = function()
{
stroke(this.hue, this.sat, this.brt);
newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;

point(newPositionX, newPositionY);

if (this.type == "writer" && this.burntime > 1)
{
line(newPositionX, newPositionY, this.position.x + log(this.burntime-2) * 8 * this.speed.x, this.position.y + log(this.burntime-2) * 8 * this.speed.y + this.burntime * gravity);
}

if(this.type == "swirler")
{
sparkleDir = this.burntime/2 % TWO_PI;
sparkleVel = random(0,1);
sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(createVector(newPositionX+sparkleSpd.x, newPositionY+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
sparkles.push(thisSparkle);
}

if(this.type == "sparkler")
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,1);
sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(createVector(newPositionX+sparkleSpd.x, newPositionY+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
sparkles.push(thisSparkle);
}

this.brt = this.brt - fade;

if(this.type == "blinker" && this.burntime > random(10,15))
{
if(int(random(0,15)) == 0)
{
noStroke()
thisSize = random (20,30)
fill(this.hue+round(random(-10,+10)), random(0,10), 100);
ellipse(newPositionX, newPositionY, thisSize, thisSize);
}
this.brt = 0;
}

this.burntime++;

}
}

function touchStarted()
{
if(moving)
{
moving = false;
strokeWeight(1);
fill(255);
rect(width/2-30, -height+20, 10, 30);
rect(width/2-50, -height+20, 10, 30);
noLoop();
}
else
{
moving = true;
loop();
}
// prevent default
return false;
}

• So when I copy paste the code from the link to Processing I get an error message that says "badly formed character (expecting quote,got g)."

'rgba(0,0,0, 0.1)'

line 22, these should be double quotes.

• oddly, that's also in the code here

http://www.secondstep.dk/p5doodles/fireworks/sketch.js

which works perfectly for me if i cut and paste it into processing editor (NB p5.js mode)

• edited December 2017

Thank you sooo much! it works now!

One last question, I am trying to work on a project and would like use minim or sound from the library to make the fireworks burst when the microphone of the computer detects sound. I would like different number of fireworks to shoot depending on the amplitude of the sound. So for instance, if the amplitude is low (i.e. 0.3) three small fireworks shoot up, and if the amplitude is higher (i.e. 0.8) five large fireworks burst. My abilities with coding is very basic and would appreciate it if anyone could modify the above code to make this work in p5.js mode.

Your answer would be of tremendous help.

• edited December 2017

@Tfguy44 and/or @kooogs - how did you find the code based on the source html? (it's a nice animation and I wanted to read the code for it but couldn't figure out how to find the code from the page content - it must be there though!)

• Hit CTRL+U there. :ar!