Jin Jin Heipler - Spring '20 @jxh9922 - Tumblr Blog

IGME-470 - Project 3: Neopixel Controller

For my final project, we needed to interface our Arduino with something else. I chose to create a React web app that used a NodeJS and Express back-end to communicate with my Arduino and the neopixels. As you can see in the video, not only can you control the neopixel on the web, but you can also control it via your phone’s internet browser.

I originally wanted to interface my Arduino with a Raspberry Pi 3, so I drew inspiration from this tutorial found here. I decided to scrap that because it used python to make its back-end, and I’m a front-end developer. As such, I decided that I still wanted to utilize the Arduino ALA library used in the tutorial, but I wanted to use NodeJS as my server.

The image above is the final front-end I developed using React. In the original example, it only had a basic html page for all of the buttons, which can be found in this repo. I wanted to use my web design skills to create something better and more user-friendly.

For my web page, the user is able to use the radio buttons to turn the neopixel on and off. The color pad on the left side allows the user to click on the colors to make the neopixel light up with that color. The animation buttons call upon a few of the animations found in the ALA library. The brightness buttons set the brightness of the neopixel to 20%, 40%, 60%, 80%, or 100%. At the bottom, the user can select some pre-determined color palettes that were also defined in the ALA library.

The hardest part about this project was getting an idea. With COVID-19, I wasn’t able to have the resources needed to create any of the ideas I thought about prior to quarantine. After I determined that I wanted to interface my Arduino with something on the web, things got easier. This was only the second time I’ve built a web app using a front-end AND a back-end, as well as the second time using React. Although I figured a lot of it out myself, I did have to enlist the help of Austin Willoughby--who I previously had as a professor for IGME-430.

Overall, I’m very happy with what I created, especially given the circumstances. Not only was I able to create another project using my Arduino, but I was also able to grow my understanding of React and NodeJS, which will carry me into my future careers. This class has easily been one of my favorite classes at RIT. I learned so much about physical computing with Arduinos, and it has been a fantastic experience having Paul as a professor. I’m glad that this is the note I end on!

#igme470

IGME-480 - Project 2: Audio Viz FFT

For my audio visualizer, I form an audio wave with ellipses that change size and opacity based on how high the frequency is to create an effect where it slightly resembles lights lighting up with the music. I also use a white noise filter that can be manipulated based on the location of the mouse on the window, which adds a cool effect to the audio being played. The audio I used was from an open source found here.

IGME-470 - Project 2: Audio

For this project, I decided to create a “light show” with a speaker, buttons, a potentiometer, and a neopixel. I found code for the Pirates of the Caribbean song, which was written by XITANGG and can be found here. I also created the first verse of “All Star” by SmashMouth by myself. I used buttons on the arduino to switch between the two songs. The audio from the speaker was obnoxiously loud, so the first thing I wanted to do was change the volume. I ended up using a volume library with the potentiometer to manually manipulate the volume up and down. Additionally, I recycled some code from Project 1 that let me increase and decrease the amount of lights that were lit on the neopixel using the potentiometer as well--which resulted in having more lights lit up when the volume was higher. The last thing I did was change the brightness of the lights based on what note was playing; the higher the note, the brighter the lights.

In the future, I would finish the song and potentially add more songs.

#IGME470

For this exercise, we were playing around with some of the examples in the video capture processing library. The goal was to modify a previously existing example. I took the example called “Framingham” and partially combined it with the “Mirror” one (as seen in the first “block”). I also slowed down the frame rate to 5 fps and made the background color purple.

#igme480

For this project, we had to make some agents move autonomously around our scene in Unity, as well as allow the user to interact with a “focus” object in the scene and change which agents appear on the screen.

I chose to stick with the same theme from my previous assignment because I thought a space aesthetic would look really cool for this project. Right now, the user can choose to have either asteroids or ships fly in and move around through space.

This is currently a work in progress. I’m planning on adding a third option for agents (TBD) and I would like to make changes to the current UI elements. Additionally, I need to create an interaction with a focal item, so my thinking is to create some kind of click interaction with the solar system.

#igme480

IGME-470 - Project 1: LEDs

For this project, I used a potentiometer, a push-button, and a switch to light up the LEDs in a 30pixel Neopixel strip. I programmed it so that the user can twist the potentiometer to increase or decrease the amount of lights that are illuminated. They can also use the push button to change what the color pattern is. Lastly, the switch changes the brightness of the lights.

The first thing I needed to figure out was how to convert the analog values to digital values with the potentiometer in order to use it to manipulate the pixels in the Neopixel. Once I did that, I was able to use the potentiometer to turn on individual LEDs based on where the knob was turned. The biggest challenge that took me the longest to figure how was how to then turn off the LEDs when the knob was rotated back to where it started.

After doing that, the next thing I needed to accomplish was turning on specific pixels at different intervals. This was one of the most crucial parts of my project because I wanted my LEDs to have very specific and repetitive patterns. I ended up using for-loops to help me achieve this, and this can be shown in the picture below.

The last key part of the project was figuring out how to change the color pattern using the push-button. I found that this wasn’t that difficult to do, and I managed to accomplish this using a counter, which I passed into a function that used a switch statement to change the pattern based on the counter value.

In terms of the color patterns that I chose, I was inspired by some of the pride flags of the LGBTQ+ community. The first pattern is the all-encompassing rainbow to represent the gay community, as well as anyone else who falls under the queer umbrella.

The second pattern draws inspiration from the colors of the bi-pride flag, which are blue, purple, and pink.

The last color pattern uses blue, pink, and white to resemble that of the trans-pride flag.

The final aspect of this project (which is shown in the video) was the switch. I used the switch to adjust the brightness of the LEDs. On one side, the LEDs were very dim. When flipped to the other side, the LEDs were lit up at maximum brightness (255).

Overall, this project turned out really nicely. I was worried at the beginning that I wouldn’t know how to do it, but I was proud of myself for figuring it all out. In the future, I would add more color patterns and maybe figure out a function to clean up my switch statement.

#igme470

IGME480 - AR Guided Flow

For this assignment, the user’s camera looks for the ground plane. Once detected, it places a galaxy “landing” surface and indicates to the user that they can tap on the surface to place content. After tapping, the solar system appears and the galaxy disappears. This application will also indicate to the user if it can’t detect the ground plane due to excessive movement or poor lighting. The reset button allows the user to replace the content.

#igme480

IGME480-Custom AR Targets

For this assignment, I had to upload my own custom images in the Vuforia database to use as target images in Unity. I chose to use a snowflake image and a farm silhouette image as my two custom images--both of which received 5 stars on Vuforia’s image rating scale. Using some free assets from the Unity Asset Store, I was able to create two separate AR scenes when the camera detects the image in the real world.

#igme480