Recitation 9: Media Controller by Jiahui Zhang

For this recitation, we need to apply what we learn about photos, films, and cameras in Processing and Arduino. I make three different stuff.

1.Using the potentiometer to control the sizes of the ellipses with pixel colors.

PImage img;
import processing.serial.*;


Serial myPort;
int valueFromArduino;


void setup() {
  size(675, 900);
  noStroke();
   printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  myPort = new Serial(this, Serial.list()[ 2 ], 9600);
  img = loadImage("photo-1574265771984-0f881d593263.jpeg");
}

void draw() {

    while ( myPort.available() > 0) {
      if (myPort.read() <18){
        valueFromArduino = 4;
      }else{
    valueFromArduino = myPort.read()/6;
  }
    }
  for (int i=0; i<100; i++) {
    int size = int( random(1, valueFromArduino) );
    int x = int( random(img.width) );
    int y = int( random(img.height) );
    // get the pixel color
    color c = img.get(x, y);
    // draw a circle with the color
    fill(c);
    ellipse(x, y, size, size);
  }
}

import processing.video.*;
import processing.serial.*;
Capture cam;

Serial myPort;
float valueFromArduino;


void setup() {
  size(640, 480); 
  cam = new Capture(this, 640, 480);
  cam.start();
  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  myPort = new Serial(this, Serial.list()[ 2 ], 9600);
}

void draw() {


  while ( myPort.available() > 0) {
    valueFromArduino = map(myPort.read(), 0, 255, 1, 30);
  }
  if (cam.available()) { 
    cam.read();
  } 
  scale(-1, 1);
  image(cam, -640, 0);

  frameRate(valueFromArduino);
}

void mousePressed() {
}

2.Using the potentiometer to control the color (by the function tint) and the frame rate captured by the camera. I forget to save the code so sorry for only have videos here.

3.Using the potentiometer to control the frame rate captured by the camera.

import processing.video.*;

Capture cam;
import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 2;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues;  

void setup() {

  size(640, 480); 
  cam = new Capture(this, 640, 480);
  cam.start();
  setupSerial();
}

void draw() {
  updateSerial();
  printArray(sensorValues);
  if (cam.available()) { 
    cam.read();
  } 
  scale(-1, 1);

  image(cam, -640, 0);
  tint(20, 20, sensorValues[1], 120);
  float x = map (sensorValues[0], 0, 1023, 1, 30);
  frameRate(x);
}

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]);
        }
      }
    }
  }
}

Question: 

Use this week’s reading, Computer Vision for Artist and Designers, to inspire you to write a reflection about the ways technology was used in your project.