delay-no-direct-affecting-image.js

// Let's instance an AudioContext
const audioContext = new AudioContext()
// Get the canvas context from a canvas that is on the html file
const canvasContext = document.querySelector('#canvas').getContext('2d')

// Here are two utils classes that I created to handle canvas and audio operations...
//  the 'modules' object is just to avoid things globally but is not related with any
//  module implementation on JS, just a regular object {}
const canvasUtils = new modules.CanvasUtils()
const audioUtils = new modules.AudioUtils(audioContext)

let imagePedal

const init = () => {
  // Let's create three different pedals, one for each color
  const pedal1 = new Delay({ audioContext, value: 0.001 })
  const pedal2 = new Delay({ audioContext, value: 0.001 })
  const pedal3 = new Delay({ audioContext, value: 0.001 })

  // Another Class that I created (responsibility separation and stuff, right?)
  imagePedal = new ImagePedal({
    audioContext,
    canvasUtils,
    audioUtils,
    recorderClass: Recorder,
    pedals: [pedal1, pedal2, pedal3],
    canvasContext: document.querySelector('#canvas2').getContext('2d')
  })

  // after having pedals and imagePedal created we call the function to load the image
  loadImage()
}

const loadImage = () => {
  // Let's create an image using browser's Image class
  const baseImage = new Image()

  // then we set the 'src' prop with the path to the image
  baseImage.src = '../assets/images/david-bowie-earthling.jpg'

  // so this callback will allow us to know when the image is loaded
  baseImage.onload = () => {
    // getting the width and height from the canvas context
    const { width, height } = canvasContext.canvas

    // this method will draw an image to the canvas on specific coordinates (0, 0)
    //  with the given width and height
    canvasContext.drawImage(baseImage, 0, 0, width, height)

    // So we get the image data, which will give us an array containing the data
    //  of each pixel like:

    //    R    G    B    A    R    G    B     A    R
    //  [211, 118, 103, 255, 209, 116, 101, 255, 207, ...]

    //  the groups of 4 numbers represents the Red, Green, Blue and Alpha information
    const imageInfo = canvasContext.getImageData(0, 0, width, height)

    // This method of my utils class basic splits the colors in different arrays
    const splitted = canvasUtils.splitRGB(imageInfo.data)

    // This method is responsible to apply the effect
    //  on the colors (will show a little bit more later)
    imagePedal.applyAndPlot(splitted)
  }
}

init()