Recitation10: Media Controller by Haoquan (Kenneth) Wangs

At first, I want to use a potentiometer to adjust the size of each rectangle of pixels when using the camera. But unfortunately, my camera is broken. The picture is green and the picture changes slowly. So I decided to use the potentiometer to change an image. 

Code:

Arduino:

// IMA NYU Shanghai
// Interaction Lab
// This code sends one value from Arduino to Processing

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

void loop() {
int sensorValue = analogRead(A0);
Serial.write(sensorValue);

// too fast communication might cause some latency in Processing
// this delay resolves the issue.
delay(10);
}

Processing:

// IMA NYU Shanghai
// Interaction Lab
// This code receives one value from Arduino to Processing

import processing.serial.*;

PImage img;
int rectSize = 40;

Serial myPort;
int valueFromArduino;
int PORT_INDEX = 0;

void setup() {
size(600, 438);
img = loadImage(“XO.jpg”);

printArray(Serial.list());
// this prints out the list of all available serial ports on your computer.

myPort = new Serial(this, Serial.list()[ PORT_INDEX ], 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.
}

void draw() {
// to read the value from the Arduino

while ( myPort.available() > 0) {
valueFromArduino = myPort.read();
}
println(valueFromArduino);//This prints out the values from Arduino

img.loadPixels();

for (int y=0; y<img.height; y=y+rectSize) {
for (int x=0; x<img.width; x=x+rectSize) {
int i = y * img.width + x;

fill( img.pixels[i] );
rect(x, y, rectSize, rectSize);

//set(x, y, color(img.pixels[i]));
}
}

rectSize = int(map(valueFromArduino, 0, 255, 20, 100));
img.updatePixels();
delay(10);
}

Reflection:

What technology I use in my work is to use potentiometer to change the size of each rectangle pixel so as to change the sharpness of image. After finish reading “Computer Vision for Artist and Designers”, I was suprised by the “algorithmn communication” that I ignore commonly. In fact, computer vision art, or be more simple just like processing(computer graphics) is the manisfetation of code or algorithmn. It is amazing becaue commonly how we draw is to use pens, but now we can use a totaly different way–converting digits to graphics information. For my work, Arduino changes the value and then conveys the analog signal to processing. Processing run the code with the signal from Arduino and eventually output graphics. It is a type of communication which break the barries among digital signals, math values, visual effect and physical controller. In the future, I can also reverse the works that I have in this recitation–I can send message from computer to physical devices to draw or do something else. That is amzaing.

Leave a Reply