TITLE: Streaming Video Effects

AUTHOR: Elizabeth Perry

DESCRIPTION: In this project, you will learn how to bring live video into a Processing sketch and modify it as it plays.

GOAL: Modify streaming video with Processing. Learn that video is data, and you can modify data in interesting and beautiful ways with a simple computer program.

LANGUAGE: Processing

DEGREE OF DIFFICULTY: Beginning

EQUIPMENT: Processing - free from http://processing.org Computer with webcam (a connected video camera can work, but it depends

on the camera and on your computer - the webcam is an easy way to test this effect)

Projector (optional, but fun to have when you share your finished program) Prerequisite

You should already have downloaded Processing to your computer, and have played around with it a bit. Ideally, you have some experience drawing shapes like circles with Processing.

Here’s an excellent video tutorial from Hour of Code: http://hello.processing.org/ - it lets you program along with the video instruction, and takes about an hour to complete.

The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

1

STEP­BY­STEP INSTRUCTIONS: First, some context:

Artists and performing artists use live streaming video as part of their work, but don’t always want the video to look like regular video. In this photo, live video of the student dancers was modified with a short program in Processing and then projected on both sides of the stage during their dance. In this project, you can learn how to bring live video into a Processing sketch and modify it as it plays.

The particular effect is called Pointillism, because it is inspired by the work of the impressionist painter Georges Seurat. Here’s a detail from one of his paintings: The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

2

Look familiar? How about this view:

No? How about when you look at the whole thing?

The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

3

http://www.googleartproject.com/galleries/21790318/24061259/25300509/ Imagine this artistic dotted effect, but happening to your own video - LIVE - and that’s what you’ll be creating.

Instructions First we’ll capture video and we won’t do anything to it - just watch it play live in a window. You can make sure your webcam is working, and learn a little about the code. Create a new sketch and name it something like “SimpleStreamingVideo.” Type (or cut and paste) the following Processing code. Typing is usually better, because it slows you down, and you will notice more about how the code is working. Type the comments (the text preceded by // which is ignored by the computer) as well, since they’ll remind you of the explanations.

import processing.video.*; //importing a special library to let Processing manage video

The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

4

Capture video; //using a capture object //you can name it video or vid or george whatever ­ global void setup() size(640, 480); //change size to 320 x 240 if too slow video = new Capture(this, width, height, 24); video.start(); void draw () if (video.available()) video.read(); //read the new frame from the camera image(video, 0, 0); //draw yourself

IMPORTANT: Add the video library to your Processing programming environment. If you are using Processing version 3.0 or higher, the video library may not be already installed. To add it, go to Sketch > Import Library… and then select Video and click the button to install it. Run the code and make faces at yourself. (You’ll notice that unlike your regular webcam image, this is not mirror-reversed. Why?) Digital video is just data. You can run programs to alter it in interesting ways... Create a new sketch and name it something like “VideoPointillism.” Type in the code below:

import processing.video.*; Capture video; void setup() size(640, 480); video = new Capture(this, width, height, 24); video.start(); background(0); //because this looks better on a black background

The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

5

noStroke(); //because the dots look better without outlines smooth(); //because the dots look better and less jagged void draw () if (video.available()) video.read(); for(int i=0; i <40; i++) // this is a for loop which tells // how many dots are drawn before the screen redraws int x = int(random(video.width)); //x value is a random location in width of video int y = int(random(video.height)); //y value is a random location in height of video color someColor = video.get(x, y); //gets the color of the pixel at the x, y location fill(someColor); //uses that color as fill ellipse(x, y, 20, 20); //draws a 20 pixel wide circle at that location

For the most effective way to look at this, run it with Sketch > Present. If your computer is powerful enough, replace size(640, 480); with fullScreen(); For the most fun, project this as large as you can. So what can you do to make this your own? How would you make the dots bigger or smaller? Could you use a different shape? Could you make the size of the dot random? What would it look like if instead of int y = int(random(video.height));

The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

6

you put int y = 240; In the example above, this sketch was used for a live performance - can you imagine other places to use this kind of project?

SOURCES AND RESOURCES: In the Processing environment itself, go to File > Examples > Libraries > Video and begin opening and looking at each one of those sketches. Make a tiny change. See what happens! http://processing.org has lots and lots and lots of resources. See especially the page on libraries and read more about video. http://processing.org/reference/libraries/

CREATED IN 2012 ­ Updated 2014 to run in Processing 2.2.1, Updated again in 2015 for Processing 3.1.

The content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License.

7