Here are some nodes that we’ll use to create the effects.

List of nodes that will be used on the demos (Delay, Media, Oscillator, etc…)

Delay

We’ll start by adding a delay between the media input and the output, not really useful as a guitar effect because it’ll only make the sound be delayed (as the name clearly says!) without to have the imediate feedback on what you’re playing but it’ll help to explain the basic concept.

Adding a delay node between the input and output

Plotting the input (a simple 300 Hz sin wave, in orange) with the output (in white) we have the graph below. Well, that’s what we expect from a delay: a time displacement.

Graph 1 — Delay response (white) to a 300 Hz sin (orange)

Now if we split the colors from an image and then use it individually through the delay configuration above we can note a displacement on the image:

Original image (left) and result (right) after pass the colors through the delay node

This happens because when we “rebuild” it from the splitted colors, the rgba array will be displaced. Let’s add a big delay value to visualize that the image is being “pushed” away and that’s why we have the gray zone on top. If we look on the graph above we can see that on the response beggining (white signal) there are zeroed values that correspond to the gray area. You are probably asking yourself why is gray and not black (if the values are zero). That’s because the process to transform amplitudes between -1 and 1 to 0 and 255.

Result of a big delay value being added to the process. The gray part on top shows the zero values on the signal response.

And here is a gif with the final image being generated color by color:

Original image (left) and result (right) being created color by color

To achieve this I created a Delay class and some util classes (creative name, huh?). The code below is how I put it together the image loading and the effect applying

And below is the method that get the colors and plot them on canvas after applying the effects: