Skip to content

Instantly share code, notes, and snippets.

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