apply-and-plot-method.js

// This UGLY code will apply the effect on each color

applyAndPlot (splitted) {
  // parseToAudio will convert image values from the range 0 - 255 to the range -1 - 1
  const parsedRed = this.canvasUtils.parseToAudio(splitted.red)

  // createSource method will create a bufferSource node so we can
  //  write the array values to the buffer and handle as a song wave
  let sourceRed = this.createSource(parsedRed)

  // As we create three different pedals we need to say which one are we using
  let pedal = this.setPedal(sourceRed, 0)

  // take a look at this promise cascading below 👀.
  //  I should refactor this mess someday (probably will never do, but I should)

  // applyEffect is reponsible to get the source node, the image array values
  //  and the pedal applying the pedal effect
  this.applyEffect(sourceRed, parsedRed, pedal, (redData) => {
    // "redData" is the result partial result
    //  (since the recorder class can give results in bursts)
    //  this allow us to plot values while the image is being
    //  processed (as we saw on the gif)
    this.plot(redData, [], [])
  }).then((red) => {
    // the "red" variable is the final result
    //  then we do the exactly same thing to green and blue colors. I could wrap this
    //  to do better, but I was running out of time ⌛️

    const parsedGreen = this.canvasUtils.parseToAudio(splitted.green)
    let sourceGreen = this.createSource(parsedGreen)

    pedal = this.setPedal(sourceGreen, 1)

    this.applyEffect(sourceGreen, parsedGreen, pedal, (greenData) => {
      this.plot(red, greenData, [])
    }).then((green) => {
      const parsedBlue = this.canvasUtils.parseToAudio(splitted.blue)
      let sourceBlue = this.createSource(parsedBlue)

      pedal = this.setPedal(sourceBlue, 2)

      this.applyEffect(sourceBlue, parsedBlue, pedal, (blueData) => {
        this.plot(red, green, blueData)
      }).then((blue) => {
        this.plot(red, green, blue)
      })
    })
  })
}