Rudi’s Class Recitation 11- Media Controller by Lichen Dong

Instructions: “create a Processing sketch that controls media elements (images, videos and audio) using a physical controller made with Arduino”.

Materials: cables, potentiometer *1, Arduino breadboard *1.

Source (Music): “5”  <>.

Step 1:  Concept Building

The concept of my idea is that using the potentiometer to control the lightness of the picture and the volume of the music. The intuition behind is that the user is the one who controls the natural phenomenon “rain” to become heavier or lighter, and the surrounding to be lighter or darker. The image that I used was the picture that I took in the Maker Carnival

The music that I used was stated above in the source part.

Step 1: Importing the image and building the Arduino Part.

I got a tiny electronic shock previously when I dealt with the potentiometer previously (see my previous Documentation about Stepper Motor), so I built the Arduino Part really carefully this time. Luckily, I didn’t make any mistake. The problem that I met was about serial communication. When I coded by myself, I found that the picture changed from bright to dark quickly when I turned the potentiometer a little bit, and it quickly turned to bright again when I continued turning the potentiometer.

The Fellow found that I wrote int sensorValue = analogRead (A0) in the Arduino part. The original code was sensorValue = analogRead (A0)/4, but I deleted A0 because I thought it was the same (This means that I only copied and pasted the code every time I used the single value serial communication code for Arduino, and always questioned the /4, but never asked anyone else). I got to know from the Fellow that the value sent from Arduino to Processing should be 255. (which is approximately 1023/4). There’s no need to write the map function in the Processing part. Instead, I need to write int sensorValue = analogRead (A0)/4 in the Arduino part. The Fellow told me to write int sensorValue = map(analogRead(A0), 0, 1023,0, 255); which is clearer.

The code for Arduino:

Step 2: Changing the Darkness and the volume of the sound

Learning from Step 2, I got to know that I didn’t need to do Map Function in the Processing part. As my concept was the image is darker, the sound is louder, so I need to write file.amp(255-valueFromArduino);


The coding part was relatively simple, but I got to know that I sometimes took the some codes for granted and didn’t think about them carefully.

PImage photo;
import processing.serial.*;
import processing.sound.*;
SoundFile file;
Serial myPort;
int valueFromArduino;

void setup() {
  size(1000, 750);
  myPort = new Serial(this, Serial.list()[ 1 ], 9600);
  photo = loadImage("WechatIMG39.jpeg");
  file = new SoundFile(this,"thunder.mp3");;


void draw() {
  while ( myPort.available() > 0) {
    valueFromArduino =; 
    image(photo, 0, 0);
    println (valueFromArduino);


Leave a Reply