Recitation #10: Image & Video

As I am working on the distance detector and I am using THIS one, in particular, it came to me that I can simply just test it on recitation 10. That’s how I decided to use the Sharp Infrared Distance Sensor (4-30cm) in this recitation. And I thought the threshold function was really cool as it creates a fascinating light effect with only black and white colors, so that’s how I chose that effect. And I replaced the original change with the “mouseX” to control the degree of that filter into the distance instead. So idea formed, let’s now build the circuit:

I followed the instructions on THIS page and built the exact same circuit. And then I began to choose the image I wanted to use. I know pixabay.com has a lot of amazing free photos on public domain to download and then I saw THIS picture with a gorgeous light effect so I decided to use this and I saved it in the same subfolder with the processing code in the folder named “data”: 

I opened the example code for serial communication RecieveSingleValue in Processing:

/**
 * Example sketch for the SerialRecord library for Processing.
 *
 * Receives an integer from the serial port, and uses it to control the
 * horizontal positon of a line on the canvas.
 *
 * This sketch has the same effect as calling `serialPort.read(0)`.
 *
 * If your sketch needs to receive only a single value, consider using that
 * function instead of this library.
 *
 * The only advantage of the approach in this sketch is that it is simple to
 * modify it to receive a second value, as ReceiveMultipleValues demonstrates.
 */

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

Serial serialPort;
SerialRecord serialRecord;

void setup() {
  size(500, 500);

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 1);
}

void draw() {
  background(0);

  serialRecord.read();
  int value = serialRecord.get();

  float x = map(value, 0, 1024, 0, height);
  line(x, 0, x, height);
}

And the example code for the active filter using threshold:

PImage photo;

void setup() {
 size(600, 600);
 photo = loadImage("yao.gif");

}

void  draw() {
   image(photo, 0, 0);
   filter(THRESHOLD, map(mouseX, 0.0, width, 0,1));
}

So I just merged these two codes together, and this is the full code for Processing:

/**
 * Example sketch for the SerialRecord library for Processing.
 *
 * Receives an integer from the serial port, and uses it to control the
 * horizontal positon of a line on the canvas.
 *
 * This sketch has the same effect as calling `serialPort.read(0)`.
 *
 * If your sketch needs to receive only a single value, consider using that
 * function instead of this library.
 *
 * The only advantage of the approach in this sketch is that it is simple to
 * modify it to receive a second value, as ReceiveMultipleValues demonstrates.
 */

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

Serial serialPort;
SerialRecord serialRecord;

void setup() {
  fullScreen();
  size(500, 500);

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 1);
  photo = loadImage("road-7508538_1920.jpg");
}

void draw() {
  background(0);

  serialRecord.read();
  int value = serialRecord.get();

  float x = map(value, 0, 1024, 0, height);
  line(x, 0, x, height);
  image(photo, 0, 0);
  filter(THRESHOLD, map(value, 0.0, width, 0, 1));
}

While the Arduino code for the SendSignleValue looks like this:

/*
  SendSingleValue

  This sketch repeatedly sends a record that contains a single value. The value
  is the value of `millis()`, modulo 32768.

  This sketch pairs well with the ReceiveSingleValue example from the
  Processing SerialRecord library
  <https://osteele.github.io/Processing_SerialRecord/>.

  You can also use the Serial Monitor to inspect the values that the sketch
  sends to the serial port.

  Things to try:
  - Connect a potentiometer to the Arduino, and send its value instead.

  by Oliver Steele, 2020-2022

  This example code is in the public domain.
*/

#include "SerialRecord.h"

SerialRecord writer(1);

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

void loop() {
  int value = analogRead(A0);
  writer[0] = value;
  writer.send();

  // This delay slows down the loop, so that it runs less frequently. This
  // prevents it from sending data faster than a Processing sketch that runs at
  // 60 frames per second will process it. It also makes it easier to debug the
  // sketch, because values are received at a slower rate.
  delay(20);
}

And this is the final interaction, which is really cool: