Thursday, May 05, 2016

Code a Photobooth Program with P5 and a MaKey MaKey Controller

Creative student controller design!
This turned out to be a really fun project that my students can do quickly. We're using P5 to code a Photobooth program that streams the webcam and applies different filters the students choose. Plus we're adding a MaKey MaKey as a controller to work a little with
circuits and design. A few resources:
I leveled the types of filters by difficulty in the handout and was pleased to see many of them go for the hardest, the picture frame. They can use 5 effects using the arrow and space keys, or they can go beyond that with w, a, s, d, f, and g keys by plugging into the headers on the back of the MaKey MaKey. Most of them are sticking with 5. A note about streaming the webcam, these projects are staying local on the MacBook Airs we're using. I originally wanted to upload and host them but Chrome has increased its security such that a function used by P5, getUserMedia, is only allowed from a secure web server. This is a good thing, but I don't have time to figure that out, if it's even possible for us as a school to set up. I think they are happy to play with it as is, though.
One cool thing the students figured out was how to combine filters. By assigning multiple functions to the same key they can add to each other, like first applying THRESHOLD, then a colorize() overlay.
if (keyCode == LEFT_ARROW) filter(THRESHOLD,.3);
if (keyCode == LEFT_ARROW) colorize();
A feature request was to mirror the video feed so it didn't look backwards. I figured out how by adding these two lines of code:
function draw() {
  translate(capture.width-40, 0);
  scale(-1,1);
  image(capture, 0, 0,width,height);

No comments :