Week 8: Video Filter

This week, I played around with manipulating video input in p5.  First I loaded the video from the computer camera and adjusted the pixels to create new patterns and practice with the loadPixels() and updatePixels() functions (Figure 1).

Next I animated these samples to understand how I could incorporate some user interactions (Figure 2-4).

Figure 2

Figure 3

Figure 4

Once I felt comfortable with these elements I started to make a video filter.  I began by making a grid that divided the screen into four sections (Figure 5).

  Figure 5

Figure 5

The colors differentiate the four sections in this grid.  My idea was to take the capture image and display slivers of that image in a different area on the canvas.  For instance the slivers of the original image that make up the blue section of the grid would be displayed in the white section on the canvas.  While the slivers of the original image that make up the white section would be displayed in the blue section on the canvas.  The same would be true for the green and red sections.  Meaning the green section in the original image would be displayed in the red section and visa versa.  The result of this pixel manipulation is shown in Figure 6.

  Figure 6

Figure 6

This created an interesting effect where the image was superimposed on itself in a strange way and created a video filter.  Then I decided to incorporate a color tint to each section to make the image easier to understand.  So I added a slightly different tint to each section of the grid (Figure 7).

  Figure 7

Figure 7

 From there I added horizontal lines to break the grid up even more.  The final result is shown in Figure 8 and the code can be found here.  A fullscreen version can be found here

  Figure 8

Figure 8