Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment