Recitation 10: Image & Video – Ragnor‘s documentation blog

In this recitation, following the instructions in the guideline, I made an image in Processing that could change its color based on users’ interaction with the potentiometers in Arduino.

I first built up the circuits that contained three potentiometers. Each of them controls one value of RGB (red, blue, green). Based on this circuits, I wrote the code for Arduino：

int Pin1 = A0;
int Pin2 = A1;
int Pin3 = A2;

#include "SerialRecord.h"

// Change this number to send a different number of values
SerialRecord writer(3);

void setup() {
  Serial.begin(9600);
  pinMode(Pin1, INPUT);
  pinMode(Pin2, INPUT);
  pinMode(Pin3, INPUT);
}

void loop() {
  int r = analogRead(A0);
  int g = analogRead(A1);
  int b = analogRead(A2);

  writer[0] = map(r,0,1023,0,255);
  writer[1] = map(g,0,1023,0,255);
  writer[2] = map(b,0,1023,0,255);
  writer.send();

  delay(100);
}

The Arduino part was not difficult to complete. However, one thing to notice is that the pace of sending values must be slowed down, for the SerialRecord might crash if the pace is too fast, for which I added a delay() function at the end of the code.

Then I started to work on the Processing part. For processing, I called a function to load an image I liked into the sketch and displayed it in full screen. Then, using the previous values received from Arduino, I applied a tint function to change the color of the image.

PImage photo;
int r;
int g;
int b;

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;

void setup() {
  fullScreen();

  //String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this,"COM8", 9600);

  serialRecord = new SerialRecord(this, serialPort, 3);
}

void draw() {
  r = serialRecord.values[0];
  g = serialRecord.values[1];
  b = serialRecord.values[2];
  playImage(r,g,b);
  serialRecord.read();
}

void playImage(int r,int g,int b){
  photo = loadImage("X.png");
  image(photo,0,0);
  tint(r,g,b);
}

This is what I eventually achieved in this recitation:

From this recitation, what impressed me most is the thought of combining Processing with Arduino, using physical actions to modify images and videos. Also, I learned how to implement images and videos into an interactive artifact design.

Leave a Reply Cancel reply