Author: Abigail_Mata-Hernandez

In collaboration with Ahmed 

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

p5.js

Arduino

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

Exercise 2

Make something that controls the LED brightness from p5:

p5.js

Arduino

void setup() {
 Serial.begin(9600); // initialize serial communications
}
void loop() {
 if(Serial.available()) {
   digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
 
   int light = Serial.read();
   Serial.println(light);

   // the led is connected to digital pin 3 with pwm
   analogWrite(3, light);
 }                                         
}

Exercise 3

Take the gravity wind example and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor.

p5.js

Arduino

int potentiometer = A0;
int serialRead = 0;

void setup()
{
  Serial.begin(9600);
  pinMode(3, OUTPUT); //the led is connected to 3 pwm digital
}
 
void loop() 
{
  while (Serial.available() > 0) 
  {
    serialRead = Serial.read();
    analogWrite(3, serialRead); //the led is connected to 3 pwm digital
  }

  int mappedPotentiometer = map(analogRead(potentiometer), 0, 1023, 0, 255); 
  Serial.write(mappedPotentiometer);                                            
  delay(200);
}

Video

Concept & Brainstorming

Functionality

Additional Information

Interactive Walls

www.behance.net

Concept

Honestly, we had some trouble brainstorming for this assignment at first. We weren’t sure what instrument to create or mimic and how. However, after watching a video about the theremin we decided to make an instrument that would react to the distance between our hands and some sensor. We also wanted to recreate the drone of old midi modulating synths.

For that, we needed to use an ultrasonic distance finder and the HC-SR04 sensor in our kit was perfect for that. Also, we wanted to be able to control the itch of the sound being produced so we used a potentiometer for that. We decided to use a speaker available at the IM lab, a switch, and an enclosure to build the whole project.

Brainstorming:

While looking for inspiration and knowledge necessary for implementing our idea we came across the following youtube video that outlined how to make a simple ‘instrument’ using an ultrasonic distance sensor:

Musical Instrument Using Arduino + Ultrasonic Distance Sensor

This video allowed us to build a device that could convert distance measurements into different musical notes.

After this, we used some other sources to understand better the use of ultrasonic distance sensors and also how to integrate switches and potentiometers into the circuit:

Arduino Potentiometer – Complete Tutorial

Ultrasonic Sensor HC-SR04 with Arduino Tutorial

Process & Code

For the code, it was a bit difficult to figure out how to use the ultrasonic range finder at first. We had to figure out how to convert time to distance since the sensor needs to listen for a pulse from an object to return and the returning pulse is proportional to the distance of the object from the sensor. Luckily, we found exactly what we were looking for in a tutorial on the internet. However, it was calibrated for a few meters instead of a few inches. We needed something that was more sensitive and produced a different set of frequencies. We decided that we would do that by reducing the maximum distance to a few inches and increasing the sensitivity. We also tweaked the code to put the speaker in a continuous loop instead of just beeps to give us a more synth-esque sound.

The sensor itself was difficult to calibrate but after referring to the aforementioned sources we were able to discover some useful functions like the delayMicroseconds() and microsecondstoInches()

// The ping is triggered by a HIGH pulse of 2 or more microseconds.
// Give a short LOW pulse beforehand to ensure a clean HIGH pulse:
pinMode(3, OUTPUT);// attach pin 3 to Trig
digitalWrite(3, LOW);
delayMicroseconds(2);
digitalWrite(3, HIGH);
delayMicroseconds(5);
digitalWrite(3, LOW);

cm = microsecondsToCentimeters(duration);

For the potentiometer, we added the following code to make it emit certain frequencies of sound depending on the position of the knob:

int potVal= analogRead(potentiometerPin);
int speakerVal = potVal * 5 ;
Serial.println((String)potVal + " -> " + (String) speakerVal);
tone(speakerPin, speakerVal );

Below is our initial setup:

after hooking it up to the speaker this is what it sounded like:

However, we were still missing a key feature of the assignment which was a button to control the sound output. For that, we used the following simple line of code to detect whether the signal output from the switch was HIGH or not:

buttonState = digitalRead(buttonPin);
  if (buttonState == HIGH)

If this statement was held true, it would continue the loop that would initialize the ultrasonic distance sensor and then output a sound signal depending on the position of the hands.

To connect the wires to the button and the ultrasonic distance sensor we had to solder the wires to ensure a strong and secure connection:

The circuit diagram of the final circuit:

Final project:

The look of the final project assembled:

Reflection and Difficulties:

This project was a lot of fun for both of us. We both learned some important information about using distance sensors and the inbuilt functionality of Arduino IDE that helps make a lot of information processing very easy as a programmer. We also had to solder which was a new experience and allowed us to gain important hands-on knowledge in building practical circuits. Some of the difficulties we faced included code optimization and building usable circuits.

We also learned the importance of top-down development in building circuits; we used a multitude of resources and examples and our own creativity to create circuits with a lot of unnecessary parts. After tinkering and experimenting we were able to streamline not only our circuit to be as simple as functionally possible while losing no part of the usability.

With complex circuits, we discovered that cable management was very important and some of our components were regularly shorting. to reduce this effect we used tape and insulators but it was still far from perfect. Additionally, we could have used heat-shrinking insulating wraps to create better insulation.

Also, we had trouble using the buttons available in the kit because they were pushing buttons and not permanent switches. The fix was super easy thankfully and only required replacement parts that we found in the lab.

Concept

For this assignment, I wanted to make my switch useful and involve it in something I do. I read and write a lot for my Political Science & Law and Society classes, so I chose to use a book to make my switch work. I borrowed some conductive fabric from the IM Lab, my Advanced Introduction to Law and Literature, and my Arduino kit, and got to work.

I decided that I wanted to use an LED light to light up the pages once the book is opened so that the reader is able to read in the dark. However, I obviously knew the LED light we have in our kits is too small, so when looking at the images and video below imagine a bigger and brighter light.

Implementation

Images

Video

Link (Video was too big to upload on post)

https://drive.google.com/file/d/1cYJXPSOgu55uT1rVhsz7reBrLLZ8t_bc/view?usp=sharing

Reflection

I found this assignment pretty fun to do besides the fact that it didn’t do what I wanted to do which was light up the pages. But, with a bigger and brighter light it would have worked out. For future improvements I’d have to find a way to take into consideration when the reader flips the pages or doesn’t have the book open all the way like it is needed for this switch to work.

Save the Zombie!

Overall Concept

For my midterm, I decided to recreate the google dinosaur game that pops up whenever you try to go on a google web browser without a connection to the internet. In the dinosaur game, there is a dinosaur, cacti, and a simple background containing moving clouds. The game prompts the player to use their keyboard keys to make the dinosaur jump over the cacti as the cacti randomly enter the canvas. If the player does not press the key or presses it at the wrong time, the dinosaur will collide with the cacti and the game ends. To goal of the game is to avoid as many cacti as you can. To keep the player intrigued with the game, the game displays the player’s score and their high score.

I find that it is a very simple but engaging game. The purpose of it is very user-oriented since it allows the player to do something while they wait for their internet to connect again.  I also decided to go with this concept because it looked simple and achievable for me. In the beginning I was exploring other games that I used to play when I was a kid, but I thought dress-up and restaurant games would be too complicated. To make it my own, I decided to go with a Halloween theme since we are in October, I love Halloween, and I am going to miss the Halloween decoration from home. I did change a few things as I was creating the game in terms of the narrative and how the player would win. Instead of having a high score, I made it so that the player has to reach a certain number of jumps in order to save the zombie from a pumpkin attack.

Technical Decisions & Game Design

It is important to note that I took inspiration from Dan from The Coding Train on YouTube. He made a video replicating the dinosaur game with his own twist that included different images and controlling the character using the player’s voice. I decided to omit the voice control portion, but used his code as my base code. I knew I still needed to add other parts to meet the midterm requirements such as on-screen text, sound, the start screen, and a way to restart the game without restarting the program.

My Zombie game includes the start screen, the game scene, and two different end screens depending on whether the player saves the Zombie from a pumpkin attack or lets him die (again). Using Dan’s code as my base code, I also had to change a few things. For example, his game used noLoop() to stop his sketch completely. He also continuously drew the pumpkins because he had no need to restart the game. I used the class sample code by Professor Mang that showed how to restart the game and implemented it into my code. I found out that because I did this, I also had to change how the pumpkins would show up in the game. To do this I created a pumpkin array and an if statement that said if the gameState == “playing” is true and the chance of adding a new pumpkin is random is also true, then a new pumpkin is created. I was proud that I was able to integrate the code into a base code that I changed, it really forced me to go through the code and understand every single part in order to figure out what parts go together. It was almost as if I was solving a puzzle.

I also wanted to end the game in a certain way instead of having the player make the Zombie jump as many times as they can. To do this I decided to create a storyline. In this game, the player is trying to save the Zombie from getting attacked and killed (again) by the pumpkins. In order to do this, the Zombie needs to avoid (jump over) the randomly generated pumpkins 10 times. I chose this number randomly.

Problems I Ran Into & Improvements

Even though I used a base code, I ran into so many tedious issues. I appreciate what coding does and admire everyone who is able to think like a coder, however I think I find it almost as scary as some aspects of Halloween. I mentioned in my second part of my documentation that I had trouble with just loading an image, I think that issue was probably the issue I took the longest on. It was not the correct path and I simply replaced the Zombie image with one that was not in a sprite sheet. I also struggled in integrating new code in an already existing code, mainly because I obviously did not make it and I had to take time to really familiarize myself with it in order to put the puzzle pieces together. Once I did familiarize myself with it though, I was able to figure out where everything else is supposed to go.

Another issue I had was that at first I did not include circles on top of the character images. However, that made the user experience difficult because even though the Zombie itself would not touch the pumpkin, I am guessing the background of the image did. This would cause the game to end even though the player didn’t know that the images touched since you visually couldn’t see that. To solve this I decided to add circles over the images to clearly define the borders and help the player better calculate when to press the space bar. I call it the cheat circle since it makes it really useful to jump at the right time and save the Zombie. Overall, I am glad I was able to combine what we have learned so far into a simple version of the dinosaur game that represents one of my favorite holidays.

Inspiration

This midterm project involves making a game, and though I love playing games and find a lot of them to be very impressive, the idea of creating one myself is very scary. To play it safe, I knew I wanted to make something simple yet fun enough for other people  to at least play when they’re really really bored. At first, it was hard to think of games that didn’t involve various elements that I was not familiar with or would require a lot of time that I do not have right this moment. I started thinking of online games I used to play on the computer when I was little. I then remembered coolmathgames.com. It gave me flashbacks to when I would be in my computer class and we would go on coolmathgames.com whenever we would get “free time” and had nothing else to do. I started exploring the games.

I found these relatively simple games:

• https://www.coolmathgames.com/0-curve-ball-3d?utm_content=CTA_Top_Picks#immersiveModal
• https://www.coolmathgames.com/0-run-3

I also remembered I used to play a lot of dress-up games, but I thought it would be too complicated to use or create a lot of the objects needed to dress up a figure so I abandoned that idea. I was favoring the idea of run 3 and wanted to look at more examples. A friend actually reminded me of the Google dinosaur game that pops up whenever a user attempts to navigate the google browser  offline. I inserted it below.

In order to add my own twist to it, I decided to go with a Halloween theme since we are in October and I am going to miss celebrating Halloween at home.  Below is a more detailed thought process related to the project requirements in terms of my own dino game.

• Can be one or more players
  • One player; Jack O’ Lantern character
• Must include
  • At least one shape
    • Obstacles for Jack to jump over or go under (or both?)
    • Background: dark, full moon, clouds
  • At least one image
    • Jack
  • At least one sound
    • Sound whenever he jumps or crashes into something. Game over sound? Background music?
  • At least one on-screen text
    • Instructions in the beginning
    • “GAME OVER”
  • Object Oriented Programming
• The game must start with a screen giving instructions, and must wait there until a button or key (your choice) is pressed
  • “Jack is trying to escape pumpkin carving season. Press space to start running! Don’t get caught or else RIP Jack :(“
• After the game is won or lost, there must be a way to restart the game without closing and restarting the program
  • button? automatic restart to the instruction page?

Future Improvements

I have not started my code yet, but that is for part II, which will then lead to the final part. I look forward to creating my own version of this game and learning along the way.

Concept

For this assignment, I chose to try and do either a line or bar graph based on a set of data. I retrieved a data set from datahub.io, it was a data set showing the mean global temperate yearly from 1880 to 2016. I referenced the class example, The Coding Train, and various other YouTube videos to help me.

Code Highlight

let dataMin, dataMax = 0;

function minMax() {
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) > dataMax) {
      dataMax = table.getNum(i, 1);
    }
  }
  dataMin = dataMax;
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) < dataMin) {
      dataMin = table.getNum(i, 1);
    }
  }

  print("max value " + dataMax + "min value " + dataMin); // checks if finding the min and max value works
  
}

This part of my code finds the maximum and minimum average global temperature. To make sure it worked, I printed the max and min value.

Image

No image 🙁

// IIM Michael Shiloh
// October 4, 2022 Assignment 4 Data Visualization
// Abigail Mata-Hernandez

// Description: This code attempts to create a data visualization about annual global temperature means in celcius from 1880 to the present. My goal is to create either a line or bar graph showing the how the global temperature changes over time.

// I chose this data set randomly from https://datahub.io/core/global-temp

// Inspiration: Class, The Coding Train,

let table;
let numRows, numCols;
let date = [];
mean = [];
let diagramX, diagramY; // x and y coordinates

function preload() {
  table = loadTable("annual_csv.csv", "csv", "header");
}

function setup() {
  createCanvas(400, 400);
  background(220);

// print(table); // check if loads table

  numRows = table.getRowCount();
  numCols = table.getColumnCount();

//print("rows:" + numRows + "cols;"+ numCols) check number of rows and columns

// load data

  for (let r = 0; r < table.getRowCount(); r++) {
    date[r] = table.getString(r, 0);
    mean[r] = table.getNum(r, 1);

// print(date[r] + " " + mean[r]) check if I get the date and mean, the date  points needed on the graph
    
  }

  // const name = table.getString(r, "Source");
  // const year = table.getNum(r, "Year");
  // const x = random(0, width);
  // const y = random(0, height);
  // text(name, x, y);
  // console.log(name);
  // the above code was a different attempt at drawing the graph using a different way but I did not understand it and stopped
  
  minMax(); //minMax function found below
}

function draw() {
  background(240);
  
  diagramX = width/2;
  diagramY = height/2;
  
 // When I tried to actually use the points to visualize the data is when I got stuck. I tried to follow videos such as https://www.youtube.com/watch?v=hokTcLVtZs8 but it was very different than what I was doing
  
}
  
  

let dataMin, dataMax = 0;

function minMax() {
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) > dataMax) {
      dataMax = table.getNum(i, 1);
    }
  }
  dataMin = dataMax;
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) < dataMin) {
      dataMin = table.getNum(i, 1);
    }
  }

  print("max value " + dataMax + "min value " + dataMin); // checks if finding the min and max value works
  
}

It wasn’t until I got to the actual data visualization part where I had trouble. The code before attempting to draw the line or bar chart had already taken me quite some time, more than I would have liked. I thought however that because I already loaded and figured out how to get some values, it would be easier to get the rest of the values I needed and plot them on a line graph. I know there is a solution which is why I kept trying, but I kept failing.

Reflection

I don’t think looking at just examples or videos is helping me. I tend to try and do almost the exact same thing as the examples, but the code that I had made on my own from what I understand is obviously too different to fit into what the examples do. I plan on taking more time to practice coding outside of the assignments assigned.

Concept

I have yet to break through my creative side and struggled to think of something to create that was outside the box, literally. I ended up looking up examples of generative art on Google. Most of the examples ended up scaring me with their complexity, so I revised my search by adding the word “simple” in the end and saw the image below. I thought it would be relatively easy considering I’d only use square() , but I knew that to make it interesting I’d have to figure out how to use color to make less simple. For the first time I felt confident on the coding part, but little did I know that I was going to struggle with color and it was going to be yet again, another very simple art piece. After going over the class lecture notes and watching numerous The Coding Train Videos I began creating my artwork using the object-oriented programming we had learned.

Code

Below is the the class portion of the code. It is pretty straight forward, I have a constructor, a display function, and a sizeChange function for the squares. As explained in my comment, I failed to successfully have the color of the squares change gradually. The more I looked at videos from The Coding Train and random examples online, the more I confused myself so I decided it was best to accept that I am understanding object-oriented programming, but not yet how to implement colors and cool variations of them.

class Square {
  constructor() {
    // width x,y
    this.w = 10;
    this.x = random(0, width);
    this.y = random(0, height);
  }

  sizeChange() {
    this.w *= 1.01; //makes the square one percent bigger
    if (this.w > height / 2) {
      this.w = height / 2;
    } // if it reaches a certain w, it stops there
  }

  // I wanted to have the color slowly change to different colors in each square, but the more I tried, the squares would either be all white or I would get an error code. I forgot and didnt' save any that code but I stopped trying and just used one color instead

  display() {
    rectMode(CENTER);
    fill("#32a6a8"); // used color picker on google
    square(this.x, this.y, this.w);
  }
}

Final Image

Future Improvements

In future assignments, I’d like to teach myself more about how I can incorporate color in my work. I believe it would make a simple piece of art with a simple piece of code more intriguing and eye-catching regardless of its simplicity. I did like that I took my time in trying to understand the code itself, though simple, it was the first time I was confident that it would work before I ran it. Though I do think I should run it regardless and accept failure as part of the process as well.