#igme470

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. 

Going Outside Simulator ™

I didn’t really know what to do for this project, since the Arduino bits and pieces I had were sort of random and I can’t make phone apps without a Mac...in comes Processing which we were learning how to use in another class this semester.

For this project, I used Processing’s Serial library in Java to allow my arduino to control a canvas and audio. Here’s what Processing was doing in response to the above video:

https://www.screencast.com/t/jA1Dg2WfPfz

The potentiometer alters the hue of the background color and the tint applied to the other images on the screen (clouds and trees - I drew these myself). The colormode of the Processing sketch was set to HSB to allow the potentiometer to alter the color shade and the CDS cell to alter the brightness.

The CDS cell alters the brightness of the color set by the potentiometer. When I started I wasn’t thinking and put the CDS in front of the Neopixel which then kept making it strobe due to the lights on the Neopixel changing. It was moved behind the Neopixel for the final iteration.

The mic amp uses the volume level of the enviromemt to set the sound of the audio file being played by Processing’s sound library (sound free use from here: https://freesound.org/people/lextrack/sounds/272417/)   The values of the potentiometer, CDS cell, and mic amp are mapped to values 0-255 in the Arduino code. While I ended up not being able to use serial.write, the 0-255 is still more convenient for using in Processing. In Processing itself, the mic amps values had to be mapped to 0.0-1.0 for the Sound library’s amp() function. Originally I was going to have the potentiometer cycle through different photo filters on Processing, but for some reason Processing lacks the ability to remove filters after applying them so I switched to changing the hue. 90% of the problems with this project were due to Processing being weird. 

Processing will send the Arduino an int (0, 1, or 2) when one of the canvas variables changes meaningfully. The CDS cell and mic especially tend to have 1-2 differences in the numbers it sent, so I tried to catch then when they had differences of greater than 3-5 for the three inputs. The 0 represents the mic has changed volume, the 1 means the hue has changed via the potentiometer, and the 2 means the brightness has changed via the CDS cell. These ints were then sent back to the Arduino, where they light up the Neopixel green (mic), blue (potentiometer), or yellow (CDS) to give feedback on what is being changed. This was especially helpful because I can’t open the serial monitor to ensure what’s being sent back while the Processing sketch is running.

Coding stuff:

Processing’s loop runs every 60 seconds, which is slower than the Arduino sending information. This caused backlog and made it so the canvas was responding with a large delay. Delaying the Arduino sending data and using port.clear(); in Processing made it so the lag was eliminated and it responded in real-time without backlog

The mic amp’s effect on the audio is very subtle - my screen recording has terrible audio quality but it is noticeable if you pull the mic out and then plug it back in - my room’s noise had the Processing audio set to around half volume (it defaults to full volume with no input) 

Sending three different variables from the Arduino didn’t really work super well and needed multiple fixes 

I sent the variables all in a string seperated by “,” using Serial.println() and then threw an extra line break in there

In Processing, I had the port be read until it detected a line break - this ensured it only got three variables at a time instead of an endless stream of data 

The string was then split at the commas, saved to an array, and cast to integers and floats when needed. The [0] index of the array was the mic, [1] was the potentiometer, and [2] was the CDS cell

Bonus: I had to duct tape my phone to a tripod to get the simultaneous videos (when I picked the Arduino up I was blowing into the mic)

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.

Air Music Box

Using a proximity censor, a potentiometer, and a speaker, I created something that will play notes based on how far your hand is from the censor. You can also change the delay between notes using the potentiometer, which will speed up or slow down your music as wanted. 

Originally, I intended to have audio input come in through the microphone and have the speaking candence be mimicked by the speaker in 8-bit notes. However, I quickly found out without other equipment the mic was only really good for detecting the existence of noise and the volume, so I ditched it. 

Then, the next iteration had 5 CDS Cells to create a sort of “air piano”, but they weren’t as sensitive as I liked and only would create 1-3 different notes, so I switched to the proximity censor. I would have liked to have been able to use multiple proximity censors to allow for a piano-type experience, but I only currently have one with me. The potentiometer was then added as I liked the sound of both more spaced-out notes and the weird electronic noise of them all being played rapidly, and now it can be changed while playing. 

Design Inspiration:

Noticing the CDS Cell’s output was falling into the general range of RGB color values gave me the inspiration for the color changing based on brightness. For the second one, I was thinking more of the streetlights that turn on based on dimness to have the pixels respond to different levels of brightness

How It Works:

The first mode of my project takes the output value from the CDS Cell and uses it to manipulate the color saturation of the Neopixels. I noticed the CDS Cell’s output in the serial monitor was within a 0-255 range generally, which made it perfect for manipulating RGB values. There are a few checks in the code to ensure it doesn’t go above 255, but the value of the CDS Cell’s output is plugged into a RGB value of ( - value -, 255, 255) which means the brightness of the room impacts the intensity of the red color of the Neopixels. A slight delay is used for the “wipe” effect.

The pushbutton, when held down, will completely shut off the Neopixels. Based on the CDS Cell’s output value, 1-3 of the Neopixels will light up. The first pixel will light up green if the room is relatively bright. The first and second will light up green and yellow respectively if the room is a bit dimmer, and any darker will light up all three green > yellow > red. If the room is incredibly bright, the Neopixels will not light up at all. There is a slight delay just to make it appear smoother, but the three pixels will respond in real time to changing brightness.

Challenges:

I originally wanted to use the CDS Cell’s output values to control the brightness level of the pixels, but the pixels responded weirdly to it and I was scared of damaging them, so I switched to the traffic light idea

Figuring out how to set up the schematic for the A0 wire, resistor, and Cell leg that all overlap each other was difficult

I jacked up the brightness of the Neopixels so much at one point it was legitmately hurting my eyes to work on this

Future Improvements:

I would like to include something that allows you to change the color of the first mode. I chose to hardcode in red, but it would be cool to maybe hook up an app or colorwheel that would allow the user to choose a color for that state

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).

For my second project, I made a wearable hat with LEDS that should light up based off sound frequency with the mic amplifier. The hat consists of four LEDS that is stabbed through a breadboard and the other breadboard contains the microphone amplifier and the PCB mini speaker. The mic amplifier is really clunky and doesn’t stick to the board very well so it doesn’t take in sound very well. For some reason, the speaker doesn’t make any sound either once the LEDs light up.

CODE

/*  Melody

 Plays a melody

 circuit:  - 8 ohm speaker on digital pin 8

 created 21 Jan 2010  modified 30 Aug 2011  by Tom Igoe

 This example code is in the public domain.

 http://www.arduino.cc/en/Tutorial/Tone */

#include "pitches.h"

int led1 = 2; int led2 = 3; int led3 = 4; int led4 = 5;

int sensorPin = A0;   // input pin for the sensor int sensorval = 0;    // variable for the value coming from the sensor int SPEAKER = 8;

// notes in the melody: int melody[] = {  NOTE_C4, NOTE_G3, NOTE_G3, NOTE_A3, NOTE_G3, 0, NOTE_B3, NOTE_C4 };

// note durations: 4 = quarter note, 8 = eighth note, etc.: int noteDurations[] = {  4, 8, 8, 4, 4, 4, 4, 4 };

void setup() {

   // initialize the digital pin as an output.  pinMode(led1,OUTPUT);  pinMode(led2,OUTPUT);  pinMode(led3,OUTPUT);  pinMode(led4,OUTPUT);

 pinMode(sensorPin, INPUT); // initialize sensor as input  Serial.begin(9600); // initialize serial communication with computer

}

void loop() {   sensorval = analogRead(sensorPin); // read the value from the sensor  Serial.println(sensorval); // send it to the computer's serial port screen

 if (sensorval > 600) {    digitalWrite(led1, HIGH);      for(int i =0; i < 8; i++){  tone(SPEAKER, melody[i],noteDurations[i]);  delay(noteDurations[i]);      }  }    else {        digitalWrite(led1,LOW);    }  if (sensorval > 600) {    digitalWrite(led2, HIGH);    }else {        digitalWrite(led2,LOW);    }  if (sensorval > 600) {    digitalWrite(led3, HIGH);    } else {        digitalWrite(led3,LOW);    }  if (sensorval > 600) {    digitalWrite(led4, HIGH);    } else{        digitalWrite(led4,LOW);    }

 delay(100);

Alamo is an outdoor sculpture by Bernard (Tony) Rosenthal and it is located in Astor Place in East Village, Manhattan, New York. The cube is 8 feet long on each side and is mounted on a corner. It is also made of Cor-Ten steel and weighs 1800 lbs.

It was originally built to be one of the 35 artworks installed by NYC Department of Cultural Affairs as part of its Sculpture and the Environment program.