Hello everyone and welcome back to my Tinkering, Hacking, and Making Website! In today’s post, I am going to be filling you in on the last two coding projects I have done.

The Yeet Machine

The first project I completed was a smaller, less involved project that had us experimenting with Microbits. I had never worked with Microbits before, so I was very excited to play with it and code something on it. My idea for my project was inspired by the old Nerf footballs with the spin counter in them. I also drew inspiration from the iconic and hallowed, “THIS BITCH EMPTY, YEET!” Vine. With all of these pieces in mind, I made “The Yeet Machine.” When turned on, it prompts the user to throw it. During the throw, the Microbit reads “YEET!” After the throw is complete, a user can see how strong their throw was by pressing button A. By pressing button B, the user completes a “Vibe Check.” This is simply reading the Microbit’s photoresistor and determining whether it is lit or not based on how much light is in the user’s surroundings.

Link to Microbit project

I liked working with the Microbit as its simplicity made me think of a unique way to create a full experience based on very little input. However, I did run into some initial difficulty as I didn’t realize the Microbit doesn’t have a built speaker. Originally, I was going to have the Microbit play the “YEET!” sound when it was thrown, but this proved too troublesome. It was really fun to work with the Microbit and it helped inspire my bigger project, which I have named “Vibe Check.”

Vibe Check

In terms of the requirements for the larger project, Professor Meadow’s asked us to use either a Hummingbird board or an Arduino board. Once we selected our board, he wanted us to build and code an interactive machine or device around this board. This device is also required to have input from environmental sensors (e.g. temperature, light, motion) that caused a reaction.

Needless to say, when I heard these criteria I was stressed. However, I decided to take into consideration the Yeet Machine and my desire to extend the “Vibe Check” functionality. As per usual for me, my initial, rough idea shot for the stars. It was to include Arduino boards, projection mapping, complex art rendering run on code…The list goes on. I quickly realized that I needed to lower expectations for myself and form a more realistic vision for my project. 

While reexamining my project idea, I tried to maintain the inspiration for my project. This project is inspired by the Tisch Interactive Media Arts School, which is doing amazing work in the digital/physical realm. Other inspiration for this project came from Professor Zach Whalen’s Creative Coding class and their amazing p5.js projects. Together this inspiration pushed me to create a project that allowed me to further my knowledge of Arduinos and to learn p5.js.

I must admit that before I started this project, I had no knowledge or understanding of JavaScript. Consequently, before I formulated the exact parameters of my project, I had to watch a lot of p5.js tutorials. I began by watching these very useful video tutorials by Jeff Feddersen, who teaches electronics and energy at NYU. In these videos, he is joined by Arduino co-founder, Tom Igoe. The first video I watched, Serial Output From Arduino, taught me how to connect the Arduino to p5.js via Serial Port. Serial port is a handy library that allows the Arduino to use my computer’s serial port, or USB port, to receive or transmit data. I am honestly very grateful for Jeff and Tom’s videos because working with serial port sounded scary at first, but after this video, I felt comfortable and confident in using it. Once I had mastered the first tutorial, I moved onto the Serial Out as ASCII and Serial Out ASCII 2 videos. It was through these videos that I specifically learned how to receive information from a joystick and how to use input values to trigger a certain response on p5.js. I also found these notes that Tom Igoe wrote and Yeseul Song revised about using input from a joystick. I always find it useful to receive my information in multiple modes, so having the notes helped me understand the videos more.

Once I had felt I had learned enough about p5.js and the serial port, I began to code Vibe Check. My plan for Vibe Check was as follows: to use a similar concept to Jeff and Tom where the joystick values translate to action in p5.js, but to add more decoration and, well, memes to it. To begin, I transcribed the code Jeff and Tom had in their video and tried to get that to work. Once I succeeded in that, I began remixing the code for what I had in mind. It was while working with the x and y values of the joystick that I naturally concluded to use these values for a graph that charted a user’s vibe. Once the user was at a point that reflected their vibe, they could click the button and the Cat in the Hat would appear. Below is my code for my Arduino and my p5.js code. 

Arduino:

void setup() {
  Serial.begin(9600);
  pinMode(2, INPUT_PULLUP);
}

void loop() {
  int x = analogRead(A0);
  delay(1); 
  int y = analogRead(A1);
  delay(1);
  int button = digitalRead(2);
  Serial.print(x);
  Serial.print(",");
  Serial.print(y);
  Serial.print(",");
  Serial.println(button);
}

p5.js:

var serial;
var portName = 'COM6';
var xValue = 0;
var yValue = 0;
var button = 1;

function setup() {
  createCanvas(800, 400);
  jenn_img = loadImage('jenn.png');
  cat_hat = loadImage('cat_hat_small.png');
  serial = new p5.SerialPort();
  serial.on('list', printList);
  serial.on('connected', serverConnected);
  serial.on('open', portOpen);
  serial.on('data', serialEvent);
  serial.on('error', serialError);
  serial.on('close', portClose);
  serial.open(portName);
}

function draw() {
  background("#100c08");
  fill("#00FF00");
  textSize(16);
  textFont("Comic Sans MS");
  text("VIBE CHECK LADZ", 25, 25);
  textAlign(LEFT)
  image(jenn_img, 0, 0);
  noStroke();
  if (button === 0) {
    ellipse(xValue / 2, yValue / 2 , 50, 50);
    } 
  else if (button === 1) {
    image(cat_hat, xValue / 2 - 75, yValue / 2 - 75);
  }
}

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

function serverConnected() {
  console.log('connected to server.');
}

function portOpen() {
  console.log('the serial port opened.')
}

function serialEvent() {
  var data = serial.readLine();
  if (data.length > 0) {
    //console.log(data);
    var sensors = split(data, ",");
    if (sensors.length > 2) {
      xValue = sensors[0];
      yValue = sensors[1];
      button = int(sensors[2]);
    }
  }
}

function serialError(err) {
  console.log('Something went wrong with the serial port.' + err);
}

function portClose() {
  console.log('The serial port closed.');
}

(If you are not familiar with the vibe check meme, I bet you weren’t expecting me to say Cat in the Hat. The very end of this video should bring some clarification to the Vibe Check, but simultaneously it’s a confusing meme that honestly just expresses how much things are not vibing right now.)

With my concept and code for the most part down, I then focused on getting my physical board and Arduino working together. For this project, I used an Arduino Uno and a simple joystick. I began my project trying to use an Arduino Huzzah, but I quickly realized that it was greatly limited in terms of inputs and outputs. Switching to the Uno helped me move further along and have more control over the wiring. In terms of actually wiring things together, I used this guide as I had never used a controller of this variety before. Below is a video that details my design process. 

Overall, this project was very challenging, but also very fulfilling. I ran into extensive issues with my Arduino IDE and had to restart my computer and drivers a million times. However, these difficulties helped me deeply understand the ways the board, serial port, and p5.js all talked to each other. Moreover, I found it easy to create this project as it did have some elements that I am very confident in (e.g. Photoshop to create the graph and the Cat in the Hat symbol). If I were to do this project again, I would figure out a way to make the Cat in the Hat image stick, almost like pinning the tail on a donkey. I think that figuring that functionality out would extend the experience and add more humor to it. All in all, I really liked this project as it pushed me out of my comfort zone and allowed me to play with physical computing.

Tagged with: Coding

Categorised as: Arduino