CONCEPT

In our last post we had come up with a game for our final project. After some further brainstorming, we thought it would be fun to try something other than a game, considering that this is what we did for our midterms. We thought about making an interactive system that could be experienced by multiple people at the same time. Our idea for the project is now to create a touchable “friendship lamp.” The basic idea is that we will build two lamps using two Arduino boards and LED strips. Each light will be equipped with different settings that can change the light pattern and color. These settings will be able to be manipulated within a program on p5.js, accessed on separate computers by the two users. After one user chooses the settings of their light, they then touch their lamp to send that light to the other user’s lamp. Communication between the two users can be simultaneous and there is no limit to the amount of times they can send each other messages. 

THE ROLE OF P5.js 

The sketch on p5.js will be a simple program with a few screens that allows the user to control the light they will send. They will be able to choose any color from a color wheel, and they will be able to choose from 3 different light modes: flicker, wave, and pulse. The choices made by the user will be stored by the program, and p5 will then send this data to the board of the other person’s lamp. However, data is not sent until some feedback is received from Arduino, explained in detail in the following section. 

THE ROLE OF ARDUINO 

A touch sensor and an LED strip would both be included in the Arduino circuit. When touched, the touch sensor transmits a signal to p5js, enabling p5js to transfer data to the Arduino board. Since p5js will be sending data about the color and pattern that the LED strip should light up in, the Arduino board receives this data and turns the light on as requested by the user.

HOW THEY COMMUNICATE 

As for the method of communication (serial mode) between the Arduino and p5js, we are still employing wires to transfer data back and forth at the time. However, because the two lamps and users in our original concept must be distanced from one another, we are exploring and, ideally, planning to include Bluetooth modules or, perhaps, an esp32 on our board to help with wireless communication between the two platforms.

PROGRESS 

We knew that we weren’t going to be able to have cross communication between two users without wireless Arduino boards, and that we would not be able to implement the touching aspect without an actual tactile sensor. Hence, our plan for this week was to finalize our idea and begin assembling the different components of the system separately. The p5 program is almost complete, with an exception to the code that will send the data to the wireless Arduino board. The sketch is shown below:

At the end of the program, the console prints out the data that would theoretically be sent to Arduino. Including the color value and the light mode. Also, because we do not have the tactile sensor yet, the light is “sent” figuratively by just pressing any key in the third step. 

For the Arduino component, we built our strips of 10 LED’s for each lamp and connected them to a board and focused on simply creating three different light modes that could be controlled within the Arduino code, separate from p5. The code that demonstrates how the various light modes are used to enable a flicker, wavy, or fading effect on the LED strip is provided below:

void loop() {
  NeoPixel.clear(); // set all pixel colors to 'off'. It only takes effect if pixels.show() is called
  NeoPixel.show();


  // WAVY
  //turn pixels to green one by one with delay between each pixel
  for (int pixel = 0; pixel < NUM_PIXELS; pixel++) { // for each pixel
    NeoPixel.setPixelColor(pixel, NeoPixel.Color(0, 255, 0)); // it only takes effect if pixels.show() is called
    // if(pixel > 0)
    // {
    //   NeoPixel.show();   // send the updated pixel colors to the NeoPixel hardware.
    //   NeoPixel.clear();
    // }
    NeoPixel.show();   // send the updated pixel colors to the NeoPixel hardware.
    NeoPixel.clear();
    
    delay(100); // pause between each pixel
  }

  // turn off all pixels for two seconds
  NeoPixel.clear();
  NeoPixel.show(); // send the updated pixel colors to the NeoPixel hardware.
  delay(2000);     // off time


  // FLICKERING:
  //turn on all pixels to red at the same time for two seconds
  for (int pixel = 0; pixel < NUM_PIXELS; pixel++) { // for each pixel
    NeoPixel.setPixelColor(pixel, NeoPixel.Color(255, 0, 0)); // it only takes effect if pixels.show() is called
  }
  NeoPixel.show(); // send the updated pixel colors to the NeoPixel hardware.
  delay(500);     // on time

  // turn off all pixels for two seconds
  NeoPixel.clear();
  NeoPixel.show(); // send the updated pixel colors to the NeoPixel hardware.
  delay(500);     // off time

  //PULSING
  brighten();
  darken();
}


// 0 to 255
void brighten() {
  uint16_t i, j;

  for (j = 0; j < 255; j++) {
    for (i = 0; i < NeoPixel.numPixels(); i++) {
      NeoPixel.setPixelColor(i, 0, 0, j);
    }
    NeoPixel.show();
    delay(10);
  }
  //delay(100);
}

// 255 to 0
void darken() {
  Serial.begin(9600);
  uint16_t i, j;

  for (j = 255; j > 0; j--) {
    for (i = 0; i < NeoPixel.numPixels(); i++) {
      NeoPixel.setPixelColor(i, 0, 0, j);
    }
    NeoPixel.show();
    delay(10);
    Serial.println(j);
  }
  delay(100);
}

Finally, a demo of the different modes is displayed below:

Finalized concept

For my final project (I’m doing it solo), I decided to make a radio that changes FM values according to what number you turn the potentiometer dial to (I will input song files that play according to their designated serial monitor value).

Each range of values will take you to a different channel.

This includes:

• 4-204 (Hip Hop)
• 205-408 (Historic Events)
• 409-612 (Classic Rock/ Oldies)
• 613-816 (Classical)
• 817-1023 (Khaleeji)

For 0-3 Radio is switched off.

Assembly

To assemble the circuit, I connected 5 different color LEDs to a digital pin on the anode ends, and to each cathode, I connected a resistor. I then connected a potentiometer dial to an analog pin (along with 5V and GND).

Arduino Code

So far, my Arduino code works separately from p5. I’m having trouble connecting both, as I’m trying to convert the 1023 ASCII serial monitor values to p5 without having to change it to 255.

My code generally consists of if statements designating each range of potentiometer values to each LED.

Example:

if ((potMeasure > 3) && (potMeasure <= 204)) {
  digitalWrite (redPin, HIGH);
  digitalWrite (yellowPin, LOW);
  digitalWrite (greenPin, LOW);
  digitalWrite (tealPin, LOW);
  digitalWrite (bluePin, LOW);
}
else if ((potMeasure > 204) && (potMeasure < 409)) {
  digitalWrite (yellowPin, HIGH);
  digitalWrite (redPin, LOW);
  digitalWrite (greenPin, LOW);
  digitalWrite (tealPin, LOW);
  digitalWrite (bluePin, LOW);
}

The inputs are the LEDs, and the output is the single potentiometer.

p5 Code

I have the p5 code for the serial monitor that picks up values from 0-255, but I’m not sure how to change it so that it can pick up values from 0-1023.

I’m trying to make it so that when inData is between the designated range of values for each channel, it would display the channel name and also play a random song from the designated array of mp3 files.

p5 Screen Design

 

 

 

 

 

 

 

This is the design I made so far, but it of course could be subject to change later on!

Exercise 1:

Here is the p5js code for exercise 1:

// variable to hold an instance of the p5.webserial library:
const serial = new p5.WebSerial();
 
// HTML button object:
let portButton;
let inData;                   // for incoming serial data
let outByte = 0;              // for outgoing data
 
function setup() {
  createCanvas(400, 300);          // make the canvas
  // check to see if serial is available:
  if (!navigator.serial) {
    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
  }
  // if serial is available, add connect/disconnect listeners:
  navigator.serial.addEventListener("connect", portConnect);
  navigator.serial.addEventListener("disconnect", portDisconnect);
  // check for any ports that are available:
  serial.getPorts();
  // if there's no port chosen, choose one:
  serial.on("noport", makePortButton);
  // open whatever port is available:
  serial.on("portavailable", openPort);
  // handle serial errors:
  serial.on("requesterror", portError);
  // handle any incoming serial data:
  serial.on("data", serialEvent);
  serial.on("close", makePortButton);
}
 
function draw() {
  
   background(0);
   fill(255);
   text("sensor value: " + inData, 30, 50);
 
}
// if there's no port selected, 
// make a port select button appear:
function makePortButton() {
  // create and position a port chooser button:
  portButton = createButton("choose port");
  portButton.position(10, 10);
  // give the port button a mousepressed handler:
  portButton.mousePressed(choosePort);
}
 
// make the port selector window appear:
function choosePort() {
  if (portButton) portButton.show();
  serial.requestPort();
}
 
// open the selected port, and make the port 
// button invisible:
function openPort() {
  // wait for the serial.open promise to return,
  // then call the initiateSerial function
  serial.open().then(initiateSerial);
 
  // once the port opens, let the user know:
  function initiateSerial() {
    console.log("port open");
  }
  // hide the port button once a port is chosen:
  if (portButton) portButton.hide();
}
 
// pop up an alert if there's a port error:
function portError(err) {
  alert("Serial port error: " + err);
}
// read any incoming data as a string
// (assumes a newline at the end of it):
function serialEvent() {
  inData = Number(serial.read());
  console.log(inData);
}
 
// try to connect if a new serial port 
// gets added (i.e. plugged in via USB):
function portConnect() {
  console.log("port connected");
  serial.getPorts();
}
 
// if a port is disconnected:
function portDisconnect() {
  serial.close();
  console.log("port disconnected");
}
 
function closePort() {
  serial.close();
}

This is the Arduino code we used for the exercise:

void setup() {
  Serial.begin(9600); // initialize serial communications
}
 
void loop() {
  // read the input pin:
  int potentiometer = analogRead(A0);                  
  // remap the pot value to fit in 1 byte:
  int mappedPot = map(potentiometer, 0, 1023, 0, 255); 
  // print it out the serial port:
  Serial.write(mappedPot);                             
  // slight delay to stabilize the ADC:
  delay(1);                                            
  
  // Delay so we only send 10 times per second and don't
  // flood the serial connection
  delay(100);
}

Here is the demo:

Exercise 2:

The p5js code for excercise 2:

let serial; // variable to hold an instance of the serialport library
let portName = "COM3"; // fill in your serial port name here
let xPos=0;
let yPos=240;
let onOff=0;
let val;
function setup() {
  createCanvas(640, 480);
  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on("list", printList); // set a callback function for the serialport list event
  serial.on("connected", serverConnected); // callback for connecting to the server
  serial.on("open", portOpen); // callback for the port opening
  serial.on("data", serialEvent); // callback for when new data arrives
  serial.on("error", serialError); // callback for errors
  serial.on("close", portClose); // callback for the port closing
  serial.list(); // list the serial ports
  serial.open(portName); // open a serial port
}
function draw() {
  background(255);
  val = map(mouseX, 0, width, 0, 255);
}
// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (let i = 0; i < portList.length; i++) {
    // Display the list the console:
    print(i + " " + portList[i]);
  }
}
function serverConnected() {
  print("connected to server.");
}
function portOpen() {
  print("the serial port opened.");
}
function serialEvent() {
  // read a string from the serial port
  // until you get carriage return and newline:
  let inString = serial.readLine();
  serial.write(val);
}
function serialError(err) {
  print("Something went wrong with the serial port. " + err);
}
function portClose() {
  print("The serial port closed.");
}

The Arduino code :

void setup() {
  Serial.begin(9600);
  pinMode(2, OUTPUT);
  pinMode(5, OUTPUT);
  while (Serial.available() <= 0) {
    Serial.println("0,0"); // send a starting message
    delay(200);      
  }
}
void loop() {
  while (Serial.available() > 0) {
    // read the incoming byte:
    int inByte = Serial.read();
    analogWrite(5,inByte);
    Serial.println();
  }
}

Exercise 3:

P5js code:

let serial; // variable to hold an instance of the serialport library
let portName = "COM7"; // fill in your serial port name here
let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let windVal;
function setup() {
  createCanvas(640, 360);
  noFill();
  position = createVector(width/2, 0);
  velocity = createVector(0,0);
  acceleration = createVector(0,0);
  gravity = createVector(0, 0.5*mass);
  wind = createVector(0,0);
  
  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on("list", printList); // set a callback function for the serialport list event
  serial.on("connected", serverConnected); // callback for connecting to the server
  serial.on("open", portOpen); // callback for the port opening
  serial.on("data", serialEvent); // callback for when new data arrives
  serial.on("error", serialError); // callback for errors
  serial.on("close", portClose); // callback for the port closing
  serial.list(); // list the serial ports
  serial.open(portName); // open a serial port
}
// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (let i = 0; i < portList.length; i++) {
    // Display the list the console:
    print(i + " " + portList[i]);
  }
}
function serverConnected() {
  print("connected to server.");
}
function portOpen() {
  print("the serial port opened.");
}
function serialEvent() {
  // read a string from the serial port
  // until you get carriage return and newline:
  let inString = serial.readLine();
  print(inString);
  if (inString.length > 0){
    windVal = map(inString, 0, 1023, -3, 3);
  }
}
function serialError(err) {
  print("Something went wrong with the serial port. " + err);
}
function portClose() {
  print("The serial port closed.");
}
function draw() {
  background(255);
  
  wind.x = windVal;
  
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  ellipse(position.x,position.y,mass,mass);
  
  if (position.y > height-mass/2 - 25){
    serial.write(255);
  }
  else serial.write(0);
  
  if (position.y > height-mass/2) {
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
    }
}
function applyForce(force){
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}
function keyPressed(){
  if (keyCode==LEFT_ARROW){
    wind.x=-1;
  } 
  if (keyCode==RIGHT_ARROW){
    wind.x=1;
  }
  if (key==' '){
    mass=random(15,80);
    position.x=width/2;
    position.y=-mass;
    velocity.mult(0);
  }
}

Arduino code:

Arduino code
void setup() {
  Serial.begin(9600);
  pinMode(2, OUTPUT);
  while (Serial.available() <= 0) {
    Serial.println("0"); // send a starting message
    delay(300);              // wait 1/3 second
  }
}
void loop() {
  while (Serial.available() > 0) {
    // read the incoming byte:
    int inByte = Serial.read();
    analogWrite(2, inByte);
    int WindPower = analogRead(A0);
    Serial.println(WindPower);
    
  }
}

 

For my final project, I’m planning to make an Arduino and p5.js based game where the user can help make haluhalo, a classic Filipino dessert. I chose this concept not only because I miss haluhalo, but also because I wanted to insert some more meaningful story elements. I’m a Chinese person born and raised in the Philippines, and I’m often asked about how I feel having these two “identities”. Haluhalo to me represents a way of seeing that difference not as a one-or-the-other choice, but as a a celebration of many different elements that together make something awesome.

The experience will be split into 4 game phases with 3 story phases in between. Below is the storyboard.

Game Stages

The first stage involves using a potentiometer to control the heat for a pot that is cooking sago. I will give the user 30 seconds, in which time they have to keep the heat at the right levels as requested by the p5.js screen. I’ll be borrowing inspiration from my Swampy temperature calibration game for this.

In the second stage, they will use Posenet to play a game where they need to punch ice and other fruits to break them into smaller parts for use in haluhalo. I’ll be borrowing inspiration from my Posenet Ant Smasher game for this.

In the third stage, I’ll be making a blender with a servo motor and a button where the user will have to blend just enough but not too much that the blender explodes.

In the last stage, they will again use posenet to catch the ingredients in the glass as they fall down.

Story Stages

These four stages will be punctuated by story segments between a daughter and a mother, where the mother and daughter will explain a little bit about the history and context behind haluhalo, as well as the metaphor I mentioned, where it can be seen as a celebration of difference rather than a choice between them

All in all, I expect this to be a challenging experience because I want to make the illustrations myself and make them very polished, as well as involve animations and other things, but I’m excited to get started.

For the final project, I want to create a dancing pad by using Arduino and by serial communication on the p5js platform.

Dance Pad:

A dance pad is a panel with cells on which a person stands and steps on the panels following instructions on a screen. For each correct step on the panel, the player gets a point.

My implementation:

My implementation of the dance pad will use force sensitive sensors to record steps and on the screen color coded panels will indicate the steps the player has to move. The panels will change color and be synced with a sound track on p5js.

Possible challenges:

The main challenge would be to make the force sensitive sensors detect the steps correctly. Another challenge would be sync the color panels on the screen with the music without hardcoding.

 

As an art and art history major, I have had the opportunity to work with multiple media and styles while completing an artwork. One of the main reasons I took the intro to IM was to get my hand dirty with a new style of creative expression. Honing that, for my final project I would like to work on a painting project that includes physical computing. So far I have been thinking about the following:

a) potentiometer that would work as the brush/pen-probably like etch-a-sketch where, as the user will interact with it the cursor would draw on the screen.

b) I would mainly like to include basic shapes such as circles or squares to allow the user to create a distinct pattern each time the program is run by overlaying the same shapes.

c) I may also add switches that may control the different values of colors when pressed. For instance, they could also change the size of the stroke as well.

d) I am a bit worried as to how the canvas would get cleaned or if the design would stop once it is complete. And I might have to assign a separate sensor with a function to do that.

concept

While I don’t have a fully finalized version, I have ideas on what I want to have my final project be about. For my final project I will be making an interface where you can modify audio. The audio will either be something the person records into p5 with the sound recorder function, or a selected song/audio file.

The audio would be modified using p5’s sound system, and the sound would be modified by buttons and maybe a potentiometer on the Arduino. I still need to find in which way the order will be in order to make the sound work, but p5 would serve as the UI to show the levels and settings, and the Arduino board will modify the sound.

Aadil, Tarek and Janindu

Proposal – Space destroyer game with Joystick

We plane to make a project that allows you to control a space ship with the potentiometer and use a push button switch to shoot lasers at the incoming rocks. There will be a light that lights up when you get hit by asteroids.

We will use OOP concepts to first make the game and control it through keyboard input. Then we will construct a relevant Arduino framework to provide input and then we will combine the two to make a user interface.

Aadil, Tarek and Janindu

Proposal – Space destroyer game with Joystick

We plane to make a project that allows you to control a space ship with the potentiometer and use a push button switch to shoot lasers at the incoming rocks. There will be a light that lights up when you get hit by asteroids.

We will use OOP concepts to first make the game and control it through keyboard input. Then we will construct a relevant Arduino framework to provide input and then we will combine the two to make a user interface.

After thinking through what I wanted to do for my project I came up with the idea for a robot which I will elaborate below:

1. An explorer robot

My idea was to create a robot using arduino which would move and explore its environments. The interaction with its environment would be based on a video feed whose data could be viewed in p5js. The control of the robot’s movement would be implemented in p5js. Using ml5js, I would attempt to identify some of the objects coming from the robot’s camera feed.

The components I have in mind:

Arduino:

-arduino camera

-ultrasonic sensor

-DC motors

-LEDs

-servo motors, etc

p5js:

-ml5js

-events

-webserial

-keyboard controls,etc