Recitation 10 – Annabel Smit (Young)

Exercise: Controlling Media

In this recitation, work individually to create a Processing sketch that controls media (images or video) by manipulating that media’s attributes using a physical controller made with Arduino. Reflect on this week’s classes to guide you in your coding process, and think about how you can incorporate interactivity and computation into this week’s exercise.

For this exercise I used an image of the famous Dutch painting “The Girl with the Pearl Earring” by Johannes Vermeer (picture source: wikipedia). I edited the image with the pixel function in Processing by drawing ellipses that would all together shape the complete image of The Girl with the Pearl Earring. I connected two potentiometers on Arduino (I ended up using just one) to alter the size of the circles in Processing with.

This was the result:



Code on Arduino

void setup() {

void loop() {
int sensor1 = analogRead(A0);
int sensor2 = analogRead(A1);



Code on Processing:

import processing.serial.*;

String myString = null;
Serial myPort;

int NUM_OF_VALUES = 2;
int[] sensorValues;

PImage img;

void setup() {
size(330, 355);
img = loadImage(“parel.jpg”);


void draw() {
for (int i=0; i<100; i++) {
//int size = int( random(1, 20) );
int size = int(map(sensorValues[0], 0, 1023, 1, 20));
int x = int( random(img.width) );
int y = int( random(img.height) );
color c = img.get(x, y);
ellipse(x, y, size, size);



void mousePressed() {


void setupSerial() {
myPort = new Serial(this, Serial.list()[ 10 ], 9600);

myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
myString = null;

sensorValues = new int[NUM_OF_VALUES];

void updateSerial() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
if (myString != null) {
String[] serialInArray = split(trim(myString), “,”);
if (serialInArray.length == NUM_OF_VALUES) {
for (int i=0; i<serialInArray.length; i++) {
sensorValues[i] = int(serialInArray[i]);

Use this week’s reading, Computer Vision for Artist and Designers, to inspire you to write a reflection about the ways technology was used in your project.

“Computer vision algorithms are increasingly used in interactive and other computer-based artworks to track people’s activities. Techniques exist which can create real-time reports about people’s identities, locations, gestural movements, facial expressions, gait characteristics, gaze directions, and other characteristics.”

“As computers and video hardware become more available, and software-authoring tools continue to improve, we can expect to see the use of computer vision techniques increasingly incorporated into media-art education, and into the creation of games, artworks and many other applications”

In my Processing exercise I have combined both traditional art and modern software techniques to make a (slightly) interactive form of media-art. I used potentiometers to do so, which is not as interactive as using sensors to implement hand-gestures for instance, but does allow the user to interact and thus communicate with the media-art in Processing.

Leave a Reply