Category: Interaction Lab

Introduction

In recitation 9, the goal was to create a processing sketch alongside Arduino code and have a physical tool on the breadboard which manipulates that sketch in some way. In this recitation, my goal was to use the core concepts of tinting we learned from class and tint an image. I didn’t want to use an image from the examples in class, so I used an image of my favorite building in Hong Kong, the Bank of China building designed by famed architect I.M. Pei. In this recitation, I used one potentiometer to control the values 0-1023 on a picture. With these values, I manipulated the picture of the Bank of China building to be tinted either blue or green, depending on which values the potentiometer was turned to. Although my project is minuscule compared to those in Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers, the interactive models inspired my method for tinting the picture. In the beginning, I thought it would be fine to just use a push button and correlate that with tinted values. But this fared far too simple as I wanted to push it just a little bit further. So, using Rafael Lozano-Hemmer’s Standards and Double Standards for inspiration, I used a potentiometer instead.

Building and Implementation

In order to initiate the coding sequence, I used one value from Arduino to Processing examples from class. These two templates gave me a base to write the rest of my code. In Arduino, I used Serial.write(sensor1) because I needed to translate these values from Arduino to processing since I would be controlling the tint with my potentiometer. After this, I mapped the possible values for a potentiometer (sensor1) (0-1023). Then I used serial.write(a) again to then translate these values into processing. All Arduino code can be viewed at the bottom of my sketch under “my code”

In the processing side of things, I needed to incorporate a few more parts to get the project up and running. I inserted the image “HK.jpeg” under a loadImage name. I did this also by defining PImage = img at the top of my code. After loading the image in, I fit it to the screen by using an if statement under void draw. This ensured that it was all visually pleasing before trying to tint it. Then I had to use the array given in the tint example in order to insert my port [16]. For this next step of tinting the image, I first defined sensor1 as (int sensor1) at the top of my code so that the Arduino code and processing code could interact. I also defined valueFromArduino which printed out the value from Arduino into processing. I then created an if statement saying that if valueFromArduino was greater than 150 on a scale of 255, then the picture would turn blue. I also correlated this with an “else if” that said if the potentiometer value is less than 149, then the image will turn green. Below both of these statements, I placed the tint function (red or green) colors. Below is a video of the completed project. 

In the beginning I was trying to use pixelation and pointillism, but realized it would not be possible to abide by the original rules of the recitation. When I switched to just a classic tint, everything worked out as planned. In the future, I might possibly employ the use of two different potentiometers to correlate with two different tinted colors.

My Code

Arduino

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


void loop() {
  int sensor1 = analogRead(A0);
  Serial.write(sensor1);
  int a = map(sensor1, 0, 1023, 0 , 255);
  Serial.write(a);
//  Serial.print(sensor1);
//  Serial.println();
  

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

Processing

import processing.serial.*;
PImage img;
Serial myPort;
int valueFromArduino;
int sensor1;


void setup() {
  size(600, 600);
  img = loadImage("HK.jpeg");
  imageMode(CENTER);
  background(255);
  
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[16], 9600);
}

void draw() {
  if (img.width > 0) {
    image(img, 300, 300, width, height);
    //float a = map(sensor1, 0, 1023, 0, 600); 
    
    while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);//This prints out the values from Arduino
}
  
  if ( valueFromArduino > 150) { 
    tint(0, 0, 255, 150);
    image(img, 250, 0);
  }
 else if (valueFromArduino < 149) {
  tint(0, 255, 0);
 }
  }

Sources

Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers by FLONG.