<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.2.0/Tone.min.js"></script>
    <script src="https://rawgit.com/nexus-js/ui/master/dist/NexusUI.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>

   <div id="target"></div>
    <script src="sketch.js"></script>
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
}
/* PDM Course: Sound Unit

  Sirens 
*/

function setup() {
  //make an autofilter to shape the noise

  //initialize the noise and start
  var noises = [];
  var filters = [];
  var totalSynths = 8
  
  // create multiple autofilters and connect to multiple synths
  // we do this so we can independantly control the rate of each filter
  for (var i = 0; i < totalSynths; i++) {
    filters[i] = new Tone.AutoFilter({
      frequency: "8m",
      min: 100,
      max: 15000,
      type: "triangle",
      filter: {
        type: "bandpass",
        gain: 12,
        rolloff: -48,
        Q: 15
      }
    }).toMaster()

    noises[i] = new Tone.NoiseSynth({
      type: 'pink',
      "envelope": {
        "attack": 3,
        "decay": 2,
        "sustain": 1,
        "release": 3
    }
    }).connect(filters[i]);
  }

  start = createButton("start").mousePressed(() => {
    // iterate over noises and fitlers to trigger
    for(var i = 0; i < totalSynths; i++) {
      // trigger noise
      noises[i].triggerAttackRelease("8m", `+${i}`);
      
      // start auto filters
      filters[i].start(`+${i}`)
      
      // ramp rate of autofilter
      filters[i].frequency.rampTo(i*2,'8m')
      
      // set quality of filter over time
      filters[i].filter.Q.setValueCurveAtTime([10, 15, 9, 1], '', '8m')
      
      // set overall volume of sound over time
      noises[i].volume.setValueCurveAtTime([-30, -6, -10 ], '', '8m')
    }
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.