Recitation 9: Media Controller

In this recitation we are to design a physical media controller. I thought of making a manually controlled photo editor.

I borrowed from the code my professor introduced in class and added the Ardiono-Processing communication. This is the effect:

Photo Dots

The circuit is very simple, only with one potentiometer:

This is the Processing code:

PImage img;

void setup() {
size(1580, 1124);
img = loadImage(“painting2.jpeg”);
setupSerial();
}

void draw() {
updateSerial();
printArray(sensorValues);
clear();

float dotSpacing = map(sensorValues[0], 0, 1023, 1, 20);
float dotSize = map(sensorValues[0], 0, 1023, 1, dotSpacing * 1.4);

for (int x = 0; x < 1580; x += dotSpacing) {
for (int y = 0; y < 1124; y += dotSpacing) {
color c = img.get(x, y);
fill(c);
noStroke();
circle(x, y, dotSize);
}
}
}

I am a bit confused by the manipulation of image size. I tried to get the color that covers the whole canvas by changing the x<number and y<number to the image size but it didn’t seem to work, so at last I adjusted the size of the whole canvas.

and in another file for the communication:

// IMA NYU Shanghai
// Interaction Lab
// For receiving multiple values from Arduino to Processing

/*
* Based on the readStringUntil() example by Tom Igoe
* https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
*/

import processing.serial.*;

String myString = null;
Serial myPort;

int NUM_OF_VALUES = 1; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; /** this array stores values from Arduino **/

 

 

void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[2], 9600);
// WARNING!
// You will definitely get an error here.
// Change the PORT_INDEX to 0 and try running it again.
// And then, check the list of the ports,
// find the port “/dev/cu.usbmodem—-” or “/dev/tty.usbmodem—-”
// and replace PORT_INDEX above with the index number of the port.

myPort.clear();
// Throw out the first reading,
// in case we started reading in the middle of a string from the sender.
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]);
}
}
}
}
}

This is the very short Arduino code:

void setup() {
Serial.begin(9600);
}

void loop() {
int sensor1 = analogRead(A0);
Serial.println(sensor1);
delay(100);
}

The article Computer vision for Artists and Designers introduced some interesting ways of using images conceived by computer cameras. I think that is an interesting field to look into a bit more and perhaps use in my later projects, and there is a lot of space for recreations and applications that’s new and unexplored.