Recitation 10: Image & Video – Claire's Documentation Blog

Media controller

The last recitation offered us a great opportunity to creatively produce what we want to make. Based on the examples we learned in class, I wanted to try something helpful to my final project. In order to test the big button I borrowed from the equipment room, I managed to wire the circuit which connected the button with the Arduino Uno board. At first, I had no idea how to connect the button with the breadboard. With the help of Professor Rudi and the instructions on the Arduino tutorial website, I figured out the basic connecting method with two wires soldered with the metal part. Thus, the big button served as the physical controller which can send digital input to manipulate the media in my Processing sketch.

Regarding the Processing sketch, I created it based on my initial idea of the final project, which is to be concerned with the color blind people. After browsing the free website www.pixabay.com, I downloaded a video of black-and-white scene and a colored image of an eye. Using the example code we learned in class, I added a for loop in the code which can only be triggered when the Processing received a value of 1 sent by Arduino.

The whole process I intended to make was something like this:

The video kept playing when no one pressed the button or the button was released. If the user pressed the blue button, the colored eye image would gradually be “drawn” on the screen by forming ellipse with random sizes. The space which the image overlapped the video was based on the duration of pressing.

Failure & Success

Unfortunately, after I finishing the code on Arduino, I found that the colored image seemed to have a long delay when I pressed the button even though the input value displayed correctly as “1” on the serial monitor. Moreover, the image only appeared at the first time I pressed the button after uploading the code on Processing. At first, I thought it was the problem of the for loop as I recalled the memory of the recitation#8 Serial Communication. On that day, we used a for loop to control the servo motor in Arduino but it didn’t work because it needed a long time to operate. However, things didn’t go as expected after I substituted the for loop with a single image function. Struggling to debug by myself, I asked Professor Rudi to help check my code. It turned out that the function I used to play the video wasn’t the most suitable one in my case. In other words, the video kept starting when I used the function myMovie.read() in void draw() loop. Besides, the range of the viable in for loop should be narrowed so that it won’t consume much time for operation. To better realize my ideal process, I relocated the background function to void setup() so that it only operated once and won’t overlapped the video and the image.

Arduino Code:

#include "SerialRecord.h"

SerialRecord writer(1);

// constants won't change. They're used here to set pin numbers:
const int buttonPin1 = 2;

int buttonState1 = 0;

void setup() {
  Serial.begin(9600);
  pinMode(buttonPin1, INPUT);
}

void loop() {
  buttonState1 = digitalRead(buttonPin1);
  if(buttonState1 == HIGH){
    writer[0] = 1;
    writer.send();
  }
  else{
    writer[0] = 0;
    writer.send();
  }
  delay(20);
}

Processing Code:

import processing.serial.*;
import osteele.processing.SerialRecord.*;
import processing.video.*;
PImage photo;

Serial serialPort;
SerialRecord serialRecord;

Movie myMovie;

void setup() {
  fullScreen();
  background(255);
  myMovie = new Movie(this, "startink-white.mp4");
  myMovie.loop();
  
  imageMode(CENTER);
  photo = loadImage("eye.jpeg");

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 1);
}


void movieEvent(Movie movie) {
  myMovie.read();  
}

void draw() {
  serialRecord.read();
  int value = serialRecord.values[0];

  if (value == 1) {
    for (int i=0; i<50; i++) {
      int size = int( random(20, 30) );
      int x = int( random(photo.width) );
      int y = int( random(photo.height) );
      // get the pixel color
      color c = photo.get(x, y);
      // draw a circle with the color
      fill(c);
      noStroke();
      ellipse(x+80, y+30, size, size);
    }
  }else if (value == 0){
    // myMovie.read();
     image(myMovie, width/2, height/2);
  }
}
//*The video and the image are downloaded from https://pixabay.com

Video:

Leave a Reply Cancel reply