Recitation 9 Media Controller Chloe Wang

In this recitation, we incorporated the use of images in the interaction between Processing and Arduino. In this week’s class, we learned how to put an image in processing and manipulate the image using values in Arduino. This week, I built my recitation project based on last week’s project of Etch a Sketch. First, I took the first step from last week’s Etch a sketch where I got an ellipse to move according to me turning two potentiometers. 
Here is what I had last week:
Then in my codes, I added codes for PImage:  photo = loadImage(“cat.jpg”);

and dragged a picture of my cat in Processing.  At first, my goal was to have a blurred picture of my cat on top of the clear picture, and wherever the ellipse moves, that part of the canvas would show the photo beneath rather than the blurred picture on top. I used the maskImage function in doing this. At the time, blurring a photo would take some time, so I added another photo that has a similar size with

  maskImage = loadImage("mask.jpg");
  photo.mask(maskImage);
  maskImage.resize(652, 484);

But the program still did work as I wished. I did not screenshot the result, but it would show a picture of my cat with some colors distorted. The ellipse on the canvas would leave a faded trial behind as it moves around. Later I realized that the mask would only be used when the mask image needs to contain only greyscale data. So with some help, I changed the maskImage to black with maskImage.set(x, y,255); and a rectangle would move around to reveal the photo beneath. With set function, it changes the color of those pixels of the selected area.  For the rectangle that is moving around, I (with help) used two for functions

  for (int y=200; y<300; y++) {
    for (int x=200; x<300; x++) {
      maskImage.set(x, y,255);
   }
  }
 and 
  int a=round(map(sensorValues[1],0,1023,0,height));
  int b=round(map(sensorValues[0],0,1023,0,width));
  
  for (int y=a; y<a+50; y++) {
    for (int x=b; x<b+50; x++) {
      maskImage.set(x, y,255);
    }
  }
in set up and draw. 
This way, when the rectangle moves around the black canvas as I turned the two potentiometers on Arduino, the rectangle would only reveal the part of the image it is at. Using int a and int b and the map function, I finally gave a boundary to where the ellipse can freely move. Now the ellipse would be on the canvas at all times.
From doing this exercise in class, I also reflected on my final project. Rather than having a blurred picture representing the things we don’t know about, a black screen and just a small part of visible image would be more representative of our actual experience with modern media that we don’t see most of the things we comment on. After reading Computer Visions for Artists and Designers, it provided me with another idea with “simple object tracking”. If this rectangle was generated by an analog source of flashlight, maybe I could step up the interactivity of my project to have people “looking for the truth in the dark” with an actual flashlight and black screen. 
 
Here is the complete code to the final version:
 
Here is a video of my final result:
Here is another video of my final result that could lead to another direction for my project:
 
Just in case you want to know, this is the picture I used in this exercise.
Image used in Recitation 9
Image used in Recitation 9

Reference:

Levin, G. and Collaborators (2012) ‘Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers’. FLONG. Available at: https://drive.google.com/file/d/1NpAO6atCGHfNgBcXrtkCrbLnzkg2aw48/view.

Leave a Reply