Physical Computing Blog 6

Task: Come up with a serial application that controls one of the animation projects you’ve done in ICM with analog sensor data from an Arduino, sent to the browser serially.

Circuit 1

When I initially started this task, I didn’t read the full prompt, so I tried to implement multiple analog inputs to control an output. I made a simple sketch that was supposed to resemble a “matrix of LEDs”. I then connected three potentiometers that would control the red, green, and blue “LEDs”. I looked at the lab for next week to see how to utilize multiple serial inputs and added the “matrix of LEDs'“ to the draw() function. The code, schematic, pictures, and videos are below. The sketch can also viewed here.

 
Schematic for simple circuit using 3 potentiometers to control a p5.js sketch.

Schematic for simple circuit using 3 potentiometers to control a p5.js sketch.

 
/* Modified Code from Danny Rozin
Introduction to Physical Computing
ITP */

var serial; 
var fromSerial = 0,
    fromSerial2 = 0,
    fromSerial3 = 0; 

function setup() {
    createCanvas(400, 400);
    serial = new p5.SerialPort(); 
    serial.on('list', printList);
    serial.on('data', serialEvent); 
    serial.list(); 
    serial.open("/dev/cu.usbmodem14111"); 
}

function draw() {
    for (let i = 5; i < width / 3; i += 30) {
        for (let j = 5; j < height + 20; j += 30) {
            fill(fromSerial, 0, 0);
            ellipse(i, j, 20, 20);
        }
    }
    for (let i = width / 3 + 20; i < ((width * 2) / 3); i += 30) {
        for (let j = 5; j < height + 20; j += 30) {
            fill(0, fromSerial2, 0);
            ellipse(i, j, 20, 20);
        }
    }
    for (let i = ((width * 2) / 3) + 5; i < width; i += 30) {
        for (let j = 5; j < height + 20; j += 30) {
            fill(0, 0, fromSerial3);
            ellipse(i, j, 20, 20);
        }
    }
}

function printList(portList) {
    for (var i = 0; i < portList.length; i++) {
        println(i + " " + portList[i]);
    }
}

function serialEvent() {
    var stringFromSerial = serial.readLine(); 
    if (stringFromSerial.length > 0) { 
        var trimmedString = trim(stringFromSerial); 
        var myArray = split(trimmedString, ",") 
        fromSerial = Number(myArray[0]); 
        fromSerial2 = Number(myArray[1]); 
        fromSerial3 = Number(myArray[2]);
    }
}

/*  
// Arduino Code 
void setup() {
  Serial.begin(9600);
}
void loop() {
  int valueToSend = analogRead(A0)/4;
  Serial.print(valueToSend);
  Serial.print(",");
  valueToSend = analogRead(A1)/4;
  Serial.print(valueToSend);
  Serial.print(",");
  valueToSend = analogRead(A2)/4;
  Serial.println(valueToSend);
  delay (10);
}
*/
GIF of p5.js sketch being controlled by 3 potentiometers.

GIF of p5.js sketch being controlled by 3 potentiometers.

Circuit 2

I then tried to incorporate an existing sketch that I created in ICM. I used the following sketch, which can be viewed here. I decided to change the color of the face with the potentiometer values, the existing colors change based on the x and y position of the face. I had some difficulty using the serial values in my original sketch. I believe this is because in the original sketch, I create a number of faces in the setup function, prior to the serial input being processed. I will try to work on this further by restructuring my code so the faces can be created in draw. In order to create a “quick” fix, I made it so that one face would be drawn every time the draw() function runs and this allows me to change the color of the face that is being drawn (unable to change the color of the previous faces — will also try to figure this out). Due to the sheer number of faces being drawn, the sketch can only really be run for a couple of seconds before lagging tremendously. The code, schematic, pictures and a video are below. The sketch can also be viewed here.

Schematic for simple circuit using a potentiometer to control a p5.js sketch.

Schematic for simple circuit using a potentiometer to control a p5.js sketch.

Photo of simple circuit with a single potentiometer.

Photo of simple circuit with a single potentiometer.

/* Modified Code from Danny Rozin
Introduction to Physical Computing
ITP */

var serial; 
var fromSerial = 0;
let faces = [];

function setup() {
  createCanvas(400, 400);
  serial = new p5.SerialPort(); 
  serial.list();
  serial.on('error', gotError);
  serial.on('open', gotOpen);
  serial.on('list', printList); 
  serial.on('data', serialEvent);
  serial.open("/dev/cu.usbmodem1421");
}
    
function gotOpen(ms) {
  print(ms);
  print("Open");
}

function gotError(err) {
  print(err);
}

function draw() {
  background(220);
  faces.push(new Face(random(width), random(height), random(-4, 4), random(-4, 4), fromSerial));
  for (let f in faces) {
    faces[f].run();
  }
}

function printList(portList) {
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    print(i + " " + portList[i]);
  }
}

function serialEvent() {    
  fromSerial = serial.read();
}

/*  
// Arduino Code 
void setup() {
  Serial.begin(9600);
}
void loop() {
  int analogValue = analogRead(A0);
  byte byteToSend = map (analogValue, 0, 1023, 0, 255);
  Serial.write(byteToSend);
  delay(50);
}
*/
GIF of p5.js sketch being controlled by a single potentiometer.

GIF of p5.js sketch being controlled by a single potentiometer.