ICM - Week 8 - Sound & Video Glitch


final sketch

For this week I was interested in generating a real-time ‘glitch video’ effect using the createCapture() tool in p5.js. I soon realized that to get that effect it would require me to really think about the specific things that would have to happen to the video in succession. What I wanted to achieve was the effect of each row pixels (or every 10 rows to be exact) being shifted left or right out of sync with the rest of the video. Then basically every aspect of this would be randomized so that the thickness of each row of pixels would be random, as well as the amount it is out of sync and for how long before that row adjusts to a new position on the x-axis.

The first step I took was to create this glitch effect evenly across the whole canvas. To do this I used capture.get() and capture.set() to first get the pixel info for a pixel further on the left of the canvas, and then set that color data to another pixel on the same row but further to the right. Then going across the row of pixels using a for() loop it simply shifted the image down the row. Then using an if() statement inside of the for() loop I set the pixels near the right side to ‘wrap’ the image around by pulling pixels from the far left of the image instead. This had the unexpected but cool result of creating duplicates when the pixel offset is higher.

I mapped the ‘pixel offset’ here to mouseX to show how the code works.

I mapped the ‘pixel offset’ here to mouseX to show how the code works.

The next step was to manipulate the nested for() loops to control the rows individually. Using an if() statement and modulo, I was able to set groups of rows to have the same offset, thus setting every 20 rows to a different amount of offset. From there I randomized the amount of offset to create a first version of the glitch effect.You can see that below.Then to make it feel even more random I added another element which would, depending on the result of a different random() calculation, determine if a row should have a different offset, or the same as the one above it, thus creating an uneven thickness of rows for a more complex image.

The final step for me was to add a modifier to the random offset which could be controlled by an outside input. Because the other half of the lesson this past week dealt with sound, I decided to incorporate that as well, and so the final version of the sketch uses sound to adjust the amount of ‘glitch’ from none to an extreme amount depending on the amplitude coming in the computer’s microphone.

There was one aspect of this assignment that I was unable to figure out. I was hoping to tint a random selection of the rows with red, green or blue to further enhance the feeling of the video go out of wack. However I could not come up with an elegant way to do this because the tint() is unable to manipulate individual pixels, and instead only affects the whole image. I also tried setting individual values in the pixels array to the colors which would simulate the tint effect, but all my attempts to do this ended up just creating random horizontal grey bars in the image in such an unexplainable way that I could not begin to figure out what was going on.

ICMStefan Skripak1 Comment