A common tool for facilitating interaction in software-based works is the web camera. These small imaging devices built into most computers can be used for everything from face tracking to motion detection, and p5 makes it easy to access that video. In this work, we’ll use the camera as source data for a software mirror. You will continuously capture the viewer’s own image, processing it into something new that you feed back to them in real-time. Perhaps you could detect all the colors in their image and reorder the pixels based on a new sorting of that data? Another approach would be to convert their image into a drawing made up of primitive shapes. Whatever method you choose, make sure to consider its implications in terms of meaning and aesthetics. What does your mirror say about the viewer who interacts with it?
Essential Functions and Libraries:
In addition to those functions and variables from Project 1 and our homework assignments, you’ll be using…
the pixels[] array
nested for() loops to extract color from the incoming video stream
other built-in functions of use for your project, such as(?):
bezier()
curve()
beginShape()/endShape()
filter()
tint()
arc()
quad()
brightness()
saturation()
transform()
Methods:
Don’t forget to treat programming as an experimental material! Just as you would with paint or photography, use code to try things. Don’t start out with too much of a planned idea. Experiment. Play. Mess up. See what happens. Let some of these less-guided investigations lead to the next thing.
Example Code:
Full demo: code and present (try on your phone! move touch the screen and move the phone to modify the image)
Basic demo (just extracting color and drawing pixels): code and present
p5 version WARNING:
The current version of p5.js (0.7.3 at this time) has a bug with camera pixel array access. However, version 0.7.1 works fine. So you will have to make this change on any new sketch you write! Go to the index.html file in your sketch, find the three script lines, and change 0.7.3 to 0.7.1
Mobile and Touch:
For the final version of this work you should focus on your mobile device. Try and test it out on your phone, make sure any interactions support touch as an input. You will probably want to reverse the width/height from your desktop, so that the input camera is using say, 40×30 (to match the typical portrait mode of the phone).
So the final post to the blog, by the due date, should include:
- A clickable link to the presentation version of your sketch
- A clickable link to the code of your sketch in the p5 editor
- Three screenshots from your final version
Timeline:
1 week