In this workshop, participants will learn how to transform a Processing sketch into an interactive projection installation. We’ll use Syphon to stream the output of a Processing sketch into projection mapping tools, learn how to map our projected sketch onto a unique surface, and make our projection installation interactive by integrating a basic sensor.
Iterations of this workshop have been presented at The School of Afrotectopia (2020) and Processing Community Day NYC(2019).
- Projector
- Laptop
- MadMapper (see alternatives below). Download the free trial version here.
- Processing.
For participants hoping to projection map content from browser-based p5 sketches, try Syphoner (free) or ScreenCaptureSyphon ($10). Windows users, try OBS w/ Spout Camera.
During this demo, we will use SimpleCircleExample and SimpleCircleExampleWithSyphon. To download and run these these Processing sketches on your own computer, please complete the following steps:
- Near the top of this page, find the green button that says "Clone or Download"
- Download this repository using the "Download ZIP" or by cloning the repository using
git clone <repository .git link>from your terminal (if you're not familiar the terminal or command-line interfaces, please use the "Download ZIP" option). - Unzip the repository. You may put the resulting folder on your Desktop or in another easily accessible location.
- Open Processing and use File > Open and open one of the the .pde files within the subdirectories of the repository folder (for example, SimpleCircleExample > SimpleCircleExample.pde). Once you select the file, a new Processing window should open that displays the code in the folder.
- If you are using a Syphon example (e.g. SimpleCircleExampleWithSyphon), you'll need to install the Syphon library in order to run the Processing sketch. While Processing is in focus, select Sketch > Import Library > Add Library. A new window title "Contribution Manager" should pop up. Search "Syphon" in the top bar and install (using the Install button in the bottom right corner) the library authored by Andress Colubri, Tom Butterworth, et al. Once the installation is done, you can close this window.
- Return to the main Processing window where the code is diplayed. In the top left corner of the page, click the triangular play button to run your sketch. You should see a new window open up that contains the visual output of your code.
This repository also includes some example sketches using the Leap Motion Controller for you to check out if you're ever interested. Please ensure that you install all of the necessary libraries before running those files (see the import lines at the top of the file).
Syphon, the technology that allows us to stream Processing outputs into our projection mapping software, is only available for Mac. For Windows computers, you can use Spout to achieve the same results. Similar to Syphon, it also has a Processing library.
During the workshop, I will use MadMapper to provide some insight into the state-of-the-art application, but there are alternatives (including free ones). I haven't tested these options yet, but I plan to record a YouTube video reviewing some of these alternatives in the future.
Here's a growing list of open-source alternatives you might want to explore:
While not free, a few others you might want to look into are:
- Rendering in Processing: https://processing.org/tutorials/rendering/
- PGraphics: https://funprogramming.org/143-Using-PGraphics-as-layers-in-Processing.html
- MadMapper Tutorials: https://madmapper.com/tutorials/
- Projection Mapping Central: http://projection-mapping.org/