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

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:

Answers

  • 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

  • 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:
            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;
    }
    
  • 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!

Sign In or Register to comment.