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

asdf

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?

TfGuy44

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:

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text#latest

asdf

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:
        this.type = "blinker";
        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:
        this.type = "sparkleBlinker";
        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.position.add(this.speed);
    this.speed.y = this.speed.y + gravity;
  }

  this.explode = function()
  {
    switch (this.type)
    {
      case "blinker":
      {
        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;
    case "sparkleBlinker":
      {
        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.fade = (fade == undefined ? 5 : fade);
  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;
}

koogs

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.

koogs

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)

asdf

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.

MuddyGardener

@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!)

GoToLoop

Hit CTRL+U there. :ar!