Overview
In this recitation, I used an image I found on the Internet and then used values from a potentiometer to create an interactive image. I first took the values from the potentiometer, sent them through Arduino, and then to Processing. In Processing I used code to select random pixel colors from the photo and to then draw different circles based on the pixel’s color with random x and y values. I set the size of each of these pixels to the value of the potentiometer in order to let the user use the potentiometer to make these color-picked circles increase and decrease as they desire.
The coding work with Arduino was extremely easy. All I had to do was create an integer for the sensor value coming from the analog zero pin. Then, once having written it as a sensor Value, and sent to Processing is where the more difficult coding comes around.
In Processing, I first had to load the photo, and make sure the serial.list was the correct port number in order that the values coming from the Arduino are sent correctly. Once the value being sent in was correct and the image loaded, then all I had to do was take the value and apply them to the image somehow. I then decided to take the class example of getting the colors from the pixels and instead of using a random value for the height and width of the circles for each loop through the draw function, I changed it to allow the value from the potentiometer control the height and width of the circles.
My end product is an interactive image that you can pixelate and clarify with the turn of the potentiometer.
Code
Arduino
void setup() {
Serial.begin(9600);
}
void loop() {
int sensorValue = analogRead(A0) / 4;
Serial.write(sensorValue);
// too fast communication might cause some latency in Processing
// this delay resolves the issue.
delay(10);
}
Processing
PImage myPhoto;
import processing.serial.*;
Serial myPort;
int valueFromArduino;
void setup() {
size(500, 500);
myPhoto = loadImage(“moonlight.jpg”);
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 1 ], 9600);
}
void draw() {
image(myPhoto,0,0,width,height);
for (int i=0; i<255; i++) {
int size = valueFromArduino;
int x = int( random(myPhoto.width) );
int y = int( random(myPhoto.height) );
color c = myPhoto.get(x, y);
fill(c);
ellipse(x, y, size, size);
while ( myPort.available() > 0) {
valueFromArduino = myPort.read();
}
println(valueFromArduino);
}
}
Media
Reflection about the ways technology was used in my project.
After reading, Computer Vision for Artist and Designers, I genuinely feel more educated on the upbringings of various computer programming systems and how their evolution from strict utilitarian purposes to more widespread use has allowed students and artists to invest in their application on a more creative spectrum. Seeing all of the example projects coming from such early years when I thought none of this would have been possible has shown me a lot about the progress of technology. Progress is not only inventing something more complex and intricate, but it is also allowing what is available to the few become available to the many. And this latter form of progress has allowed me to create what I created today. Using such program as Processing as well as physical components, to create such a unique distortion of the image that every participant can leave their mark on is an accomplishment one doesn’t realize when they’re in the midst of coding. By realizing the history of what we do, can we only understand the reality of the present. And I think it is amazing that even through my eyes, what is seemingly such a simple technology has such a complex history and I am able to take what is present and create something entirely new, by combining Processing, Arduino, and my own creative capacities.