User Testing – Mariam & Yesenia

Video:

For this week, we focused on our visuals. We wanted to have our countries and videos. We ran into multiple problems where the video is not always triggered even though our code was the same. There was also the problem of having the video to stop looping go back to the original page (image of the map). So far we have gotten the Mexico video to work, but when we try to add the other videos, they do not work.

Here is our code:

const pts = []
var size = 0.6;
let alpha = 255;
let left = 0;
let right = 0; 

let rVal0 = 0;
let rVal1 = 0;

let img1;
let vid0;
let vid1;


let playVid0 = false;
let playVid1 = false;

let playOnce0 = 0; 
let playOnce1 = 0;

function preload () {
  img1 = loadImage("outline map.png");
}

function setup() {
  createCanvas(innerWidth, innerHeight);
  pixelDensity(5);
  textSize(18);
  setUpSerial();
  vid0 = createVideo("mexico.mp4")
  vid0.position(220, 100)
  vid0.size(560, 315);
  vid0.volume(1);
  vid0.hide();
  vid0.showControls();
  vid0.onended(sayDone);

  // vid1 = createVideo("Ethiopia.mp4")
  // vid1.position(220, 100)
  // vid1.size(800, 315);
  // vid1.volume(1);
  // vid1.hide();
  // vid1.showControls();
  // vid1.onended(sayDone);
 
}
function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial(SELECT_PORT);
  }
}
function draw() {
  console.log(rVal0)
  // console.log(rVal1)
  fill(100);
  stroke(255);
  strokeWeight(1);


  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
  background(img1, 0, 0, innerWidth, innerHeight);



  if (playVid0 == true && playOnce0 == 0){
      vid0.show();
      vid0.loop();
      vid0.volume(1); 
    }
    
    // if (playVid1 == true && playOnce1 == 0){
    //   vid1.show();
    //   vid1.loop();
    //   vid1.volume(1); 
    // }
  }
  function sayDone(elt) {
    alert('done playing ' + elt.src);
    playOnce0 = 1;
    // playOnce1 = 1;
  }

function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////
 
  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 1) {
      // only store values here
      // do everything with those values in the main draw loop
    rVal0 = fromArduino[0];
      if (rVal0 > 100){
             playOnce0= 0;
             playVid0 = true;
        }
      //   rVal1 = fromArduino[1];
      // if (rVal1 > 100){
      //        playOnce1= 0;
      //        playVid1 = true;
      //   }
   }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = "\n";
    writeSerial(sendToArduino);
  }
}

 

 

 

Serial Communication Exercises

Exercise One:

Processing Code:

let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem14501"; // fill in your serial port name here
let xPos=0;
let yPos=0;
let onOff=0;

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);
  ellipse(xPos, yPos, 50, 50); // draw the circle
}

// 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();
 
  //check to see that there's actually a string there:
  if (inString.length > 0) {
    let sensors = split(inString, ","); // split the string on the commas
    if (sensors.length== 2) {
      // if there are three elements
      
      xPos = map(sensors[1], 0, 1023, 0, width); // element 0 is the locH
      yPos = height/2; 
      // yPos = map(sensors[1], 550, 250, 0, height); // element 1 is the locV
    }
  }

  serial.write(onOff);
}

function serialError(err) {
  print("Something went wrong with the serial port. " + err);
}

function portClose() {
  print("The serial port closed.");
}

Arduino:

void setup() {
Serial.begin(9600);
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();
int sensorValue = analogRead(A0);
Serial.println(sensorValue);
}
}

Exercise Two:

Processing:

let serial; // variable to hold an instance of the serialport library
let portName = "/dev/cu.usbmodem14501"; // fill in your serial port name here
let xPos = 0;
let yPos = 0;
let onOff = 0;

let brightness = 0; 

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);
}
  
// 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();
  
  brightness = mouseX;
  let mapped = map (brightness, 0, 640, 0, 255);

  serial.write(mapped);
}

function serialError(err) {
  print("Something went wrong with the serial port. " + err);
}

function portClose() {
  print("The serial port closed.");
}

Arduino:

int ledPin = 5;

void setup () {
  Serial.begin(9600);
  pinMode(5, OUTPUT);
  while (Serial.available() <= 0) {
    Serial.println("0,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(ledPin, inByte);
    Serial.println("0");
  }
}

 

Exercise Three:

Processing:

let serial; 
let portName = "/dev/cu.usbmodem14401"; 

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let bounce;


let xPos=0;
let yPos=0;
let onOff=0;

// for port connection and handshake 

function setup() {
  createCanvas(640, 360);
  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();
  //xPos = map(inString, 0, 1023, 0, width);
 
  //check to see that there's actually a string there:
  if (inString.length > 0) {
    xPos = map(inString, 0, 1023, 0, width);
  }
  serial.write(onOff);
}
function serialError(err) {
  print("Something went wrong with the serial port. " + err);
}
function portClose() {
  print("The serial port closed.");
}
  
  // code for the actual bouncing, wind, etc. 
  
  noFill();
  position = createVector(width/2, 0);
  velocity = createVector(0,0);
  acceleration = createVector(0,0);
  gravity = createVector(0, 0.5*mass);
  wind = createVector(0,0);
  bounce=map (mass,15,80,.80,.80);
}
function draw() {
  background(255);
  if (!keyPressed){
    
    console.log(xPos);
    velocity.x*=bounce;
  }
  
  wind.x = map(xPos, 0, width, -1, 1);
  
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  fill(255);
  ellipse(position.x,position.y,mass,mass);
  
  
  if (position.y > height-mass/2 - 40) {
    if (velocity.y > 1) {
      serial.write(255);
    }
    
    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.y=-mass;
    velocity.mult(0);
  }
}

Arduino:

void setup() {
  Serial.begin(9600);
  pinMode(5, OUTPUT);
  while (Serial.available() <= 0) {
    Serial.println("0,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(5, inByte);
    int sensorValue = analogRead(A0);
    Serial.print(sensorValue);
    Serial.println();
  }
}

 

Mariam’s Final Project

For my final project, I want to combine one of my favorite hobbies, drawing, with p5.js and arduino.  I want to create a system that uses arduino to create an art piece on p5.js. I can use pressure pads to create lines on p5.js that eventually develop into an art piece. I want to create some generative art piece that uses a creative way to trigger the design. This is an example of the art I would like to generate.

https://editor.p5js.org/generative-design/sketches/P_2_2_3_01

A creative way to trigger it would be by using the camera to track your movement and then translate it into the design instead of using the mouse. Maybe another way would be to use a remote control where you press buttons and it triggers the design.

Dozing Off

Idea:

My idea for the assignment is a person who is studying, turned on his desk lamp (digital input and output) then doses off and as the pressure sensor senses the body, the light starts dimming (analog input and output).

Clearer video where desk lamp lights https://studio.youtube.com/video/I4NiezThfGQ/edit

const int ledPin = 2;
const int buttonPin = 3;
const int eyePin = 5; 
int pressureValue = A0; 

byte prevButtonState = LOW;
bool brightness = HIGH;

void setup() {
  // put your setup code here, to run once:
  pinMode(ledPin, OUTPUT);
  pinMode(buttonPin, INPUT);
  pinMode(eyePin, OUTPUT);
  pinMode(pressureValue, INPUT);
 
  Serial.begin(9600);
}

void loop() {
  // read the button pin
  // store that in a local variable
  byte buttonState  = digitalRead(buttonPin);
  int pressureValue = analogRead(A0);

 int mappedPressureValue = map(pressureValue, 0,400, 0, 255);
  Serial.print(pressureValue);
    
   int constrainedValue = constrain(mappedPressureValue, 0, 255);
    analogWrite(5, constrainedValue);//0-255
   
  // print out the state of the button stored in the variable
  // record the current button state for use next time through loop
  prevButtonState = buttonState;

 
  if (buttonState == HIGH && prevButtonState == LOW) {
   digitalWrite(ledPin, HIGH);
    }
  // otherwise turn the LED off
   else {
    digitalWrite(ledPin, LOW);
  }
}

 

Mariam’s Unusual Switch

I had so much fun doing this assignment, I couldn’t just stick to one switch. Initially, I had the idea of making the guitar strings my switch as when each string vibrates, it connects to a paper clip connected to a foil connected to the switch, turning on the lamp. I also connected different colored led lights so they can be triggered by different strings. However, I thought that this would require the use of my hands technically. Therefore, I came up with the idea of taping the foil to my eyebrows and making the lightbulb light whenever I make a “confused” face in irony as light bulbs usually stand for ideas.

I was then sleepy and got the idea of having the led light turn on whenever I close my eyes would be really fun. All you have to do is sleep and the light will turn on! My last idea was the hair straightener, where whenever I would straighten my hair, the light bulb lights. I am aware this requires the use of hands but, I wanted to include it for fun nonetheless.

Midterm Final

My Game:

Concept/ Inspiration:
My idea for the midterm came from the movie “Cloudy with a Chance of Meatballs” where the sky rains food and people keep eating what falls from the sky. Therefore, my main concept for the game is that food (Meatballs) fall from the sky and the character has to eat it. If the player eats all five meatballs, they win. If the player misses two meatballs, they lose.

Process and Challenges:
I have made a class for meatballs in order to have multiple meatballs falling at once.When the player misses two meatballs, he loses the game. Therefore, the screen changes to one that says “You Lost!”. when you click the mouse, you are brought back to the original page. However, one of the challenges I have faced and still do not know the answer to is that when the game is “restarted” everything is scattered and not like the game actually was at the beginning. Therefore, you have to click play again in order to restart the game. I am guessing it is because the game is actually still going and I need to do something to make every aspect of the game restart not just bring the screen back to the “Home” screen.

Midterm Progress (Very Slow)

Idea:
For my midterm, I will create a game called “Hungry Henry”. In this game, there will be food falling from the sky – like the movie “Cloudy with a Chance of Meatballs” – and the small person (Henry) will have a task which is eating all the food that falls from the sky. The player gets to move Henry left and right in order to eat the falling food; if the food touches the ground, the player loses.

Implementation:
In order to make the food fall from the sky, I will be using object oriented programming. So far, I have been having some difficulties with the if function that makes the object move left and right. I am assuming it is because my “object” is an image. For my progress, I am using the image of a random cat, however, my actual object “Henry” will be an animated figure that I will draw using an iPad to make it more customized.

Data Visualization

I was scrolling through twitter and I found Kim Kardashian to be trending, therefore, I thought it would be interesting to search Kim Kardashian on Google Trends, and it showed me how much people searched Kim Kardashian over time. I turned it into a graph and added. a picture of Kim as the Background as we learned last class. One of the difficulties I met was that I wanted the graph to be more stretched out on the Y-axis to look better. I used circles instead of normal lines and added a color that I think represents Kim Kardashian haha.

Mariam’s OOP

I wanted to start with making something simple and making it more complicated gradually as I understood the code. I used the professor’s example in class as kind of a reference point to help me throughout the process. I started with making one cloud and then making it move. I had trouble representing the cloud as an actual cloud and not just an ellipse, my code for the cloud contained 3 ellipses, therefore, it was hard for me to combine them as one.

I fixed the cloud shape by adding and subtracting values from the x and y positions,. I added more clouds. I think, however, it would have been smarter if I used an array instead of creating more clouds.