Learn creative coding writing simple programs

126. A Processing abstract video player

Any non random data has a special quality that's missing in random values. Such real life data can be photographs, videos or audio recordings.

In this episode we play a video file, but instead of displaying it, we look at the colors in some pixels in each frame. Those colors have hue, saturation and brightness values. Values can be used for different purposes only limited by our imagination.

What we do in this episode is, for each video frame, start in the middle of the screen, look at the hue, brightness and saturation of the middle pixels, use the color to draw an ellipse, the size of the ellipse defined by the saturation, and then use hue and brightness to decide in which direction to move. For bright colors we take a large step, for dark colors we take a small step. The same way the time changes the direction of the needles in an old clock, we let the hue set the direction of our step. We take up to 100 steps of different lengths and in different directions depending on the video colors, drawing one ellipse on each step. If we reach a border in the display, we stop before getting to 100 steps. This whole process happens very quickly, one series of steps per animation frame. The result looks like a painting that contains little details out of every frame in the movie.

Tags: video, painting, paint, abstract

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
 To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```