Recitation 10: Make a Media Controller

Date: 5 December 2018

Instructor: Eric&Young


Goal: To create a Processing sketch that controls media (images or video) by manipulating that media’s attributes using a physical controller made with Arduino.

During the recitation, I used the potentiometer to control the color of the shadow of  Shanghai in Processing. (It exists on my computer a long time ago. And I have no idea about its sources.)


The reading Computer Vision for Artist and Designers introduces how the computer vision system helps the art and the design more interactive and provides plenty of examples. With the help of the computer vision system, art can be more interesting and enjoyable. Thanks to this reading, I gained the idea of how to design the hardware part of our final project, which my partner and I had struggled for a long time. Not to passively receiving the input and responding with simple figures anymore, I intend to make the hardware part more active and can display the outcomes of the game. It may sound abstract now, but everything will be clear next week.


int Pot = A1;

void setup() {
void loop() {
  int valOne = analogRead(Pot);
  Serial.write (valOne);


import processing.serial.*;
Serial myPort;
int valueFromArduino;
PImage img;

void setup() {
  size(600, 716);
  img = loadImage("SH.jpg");
  colorMode(HSB, 100);
  myPort = new Serial(this, Serial.list()[ 3 ], 9600);

void draw() {
  image(img, 0, 0, width, height);
  tint(valueFromArduino, 120, 255, 150);
  image(img, 200, 0);
    while ( myPort.available() > 0) {
    valueFromArduino =;

Leave a Reply