Month: November 2022

Assignment 8: Serial Communication

Groupmates: Hessa, Aisha

Schematics

The schematic is made to be compatible throughout the assignment.

This schematic is used for Exercise 2.

Exercise 1:

    • make something that uses only one sensor  on arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on arduino is controlled by p5

Arduino Code (Credit: Hessa):

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);
  //Serial.println(mappedPot);
  // slight delay to stabilize the ADC:
  delay(1);                                            
}

Exercise 2:

    • make something that controls the LED brightness from p5

Arduino Code (Credit: Aisha):

int LED = 5;

void setup() {
  Serial.begin(9600);
  pinMode(LED, OUTPUT);
  // start the handshake
  while (Serial.available() <= 0) {
    Serial.println("Wait");  // send a starting message
    delay(300);               // wait 1/3 second
  }
}

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    int brightness = Serial.parseInt(); 
    if (Serial.read() == '\n') {
      analogWrite(LED, brightness); // turn on LED and adjusts brightness
      Serial.println("LIT"); 
    }
  }
}

Exercise 3:

Code is included in the above sketch.

Working Video of Exercise 3

Final Project Preliminary Concept: Live Fruit Ninja

While brainstorming, I was trying to recall what interactive projects I’ve interacted with and enjoyed. I feel like key components that draw me personally to a project are the outcome, music, and how the body is used in the project.

My preliminary idea for the final project is to take the classic 2000s mobile game, Fruit Ninja, and make it live. If you’re not familiar with Fruit Ninja, it’s a timed game where the player has to slice as many fruits as they can using their finger(s). There are combos, bombs, and special fruits in the game, but to keep it relatively simple for implementation I will probably just have the player be able to slice one fruit at a time.

The physical component will be instead of the player using just their finger, they will use their whole body. For instance when they see a fruit coming, they will have to slice it using their arms. This might use the distance sensor. Another possible idea is to have multiple buttons, one representing each fruit, scattered around so the player will have to move to get the button.

I’m not sure if I will stick to this idea, but for now live Fruit Ninja will be what I’m going for.

Assignment 8: In-Class Exercises

 

[In collaboration with Maryam]

Here is the actual physical circuit and schematic we used for all three exercises. The actual physical circuit has two LEDs, one at pin 2, but it wasn’t illustrated because it wasn’t used, it was just there for testing purposes.

Exercise 1: Ellipse

Here is the link to the full code. It uses professor Sherwood’s  example “Webserial Handshake” code, except it includes this line:

ellipse(map(rVal, 0, 1023, 0, 600), 300, 200, 300);

which maps the rVal to the x-position of the ellipse. Since the rVal reads from the Arduino, the ellipse x-position also changes as the sensor is being used. We used a potentiometer to control this.

Exercise 2: LED Brightness

Here is the link to the full code. At first we tried using up and down arrow keys, but we changed it to mouse click and then the mouseX position. So, for this exercise, we controlled the brightness of the LED using the mouseX position, where we mapped it to the values for the LED:

LEDBrightness = map(mouseX, 0, width, 0, 255);

We wanted it to be changing constantly, like how a potentiometer changes the LED constantly, but it didn’t work out that way. We tried printing the values and it turns out that the mouseX value is sent to the Arduino only once, so it doesn’t always get sent. However, when printing the LEDBrightness, it is constantly being checked.

Additionally, another version we tried was using the left and right halves of the canvas to change the brightness by using mouse input. The left side would make the LED dimmer, whereas the right side was the full brightness. This was used as a way of simplifying the program. The issue we ran into with this method was that the LED would be full brightness when clicking the right half, but when clicking the left half it would barely light up, even when the value for left was the same as the right value.

Exercise 3: Gravity Wind with Potentiometer and LED

Here is the link to the code. The code for this exercise uses Professor Mang’s example and the gravity wind example from Professor Sherwood with a few modifications. Firstly, there are boundaries set so the ball does not go out of the canvas. This is the code that checks if the ball bounces and then the LED will light up:

if (position_.y > height - mass/2 - mass) {
    if (velocity.y > 1) {
      serial.write(255);
    }
  }

It checks if the position of the ball hits the bottom edge of the canvas. It also checks if the ball is still bouncing based on the velocity.

And this is the code from the Arduino side for the LED:

serialRead = Serial.read();
analogWrite(ledPin, serialRead);

Since we just used serial.write() in p5, when we Serial.read() it takes the value in the serial write (which is 255) and we use that to write to the LED.

As for the potentiometer that controls the wind, here is the code for it in p5:

wind_strength = 5;
new_wind = map(inData, 0, 255, -wind_strength, wind_strength);
print("this is indata", inData);
wind.x = new_wind;

It maps inData, which reads from Arduino and maps the values to wind strength, which changes the x-position.

Here is a video of it working:

Ahmed & Abigail Final – Interactive Artwork: Fern Plant Robot Instrument Thing

Concept & Brainstorming
          So for our project, we wanted to do something artistic. The idea we have comes from the following piece of computer graphic art: Interactive Walls. The artwork is graphic and based on the software Max, but we thought it would look great if implemented with servo motors and multicolored panels in real life. The panels will be mounted to servo motors and be multicolored to look aesthetically pleasing. The panels can be made out of acrylic material or something lighter like thin plywood or cardboard. Due to restrictions of the Arduino Uno, we will only be able to use a maximum of 12 panels for our interactive artwork.
Concept visualization and further explanation can be found in Ahmed’s post
Functionality
      We want the panels to depict a living, breathing, organism that reacts to different inputs; touch, noise, and input controls on a mounted panel. The artwork will have two speakers that will create a surround sound effect and output predetermined responses to different stimuli. The control panel for the artwork will have a few buttons that will change modes. Modes can be an ambient mode that makes predetermined patterns, music mode which will make the artwork react to music playing, and a touch mode that will allow the audience to touch the artwork and have it react to their inputs.
Additional Information
We also found the following code that may help us during the production of this project: Audio Reactive Program
Interactive Walls
www.behance.net

Week 11 Exercise

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

 

Final Project Proposal

No description available.

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.

No description available.

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.

Final Project Idea

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.

 

Final Project- Preliminary Concept

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.

Final Project Draft – Daniel Basurto

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.

Final Project Proposal

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.