The aim of the project is to make a wearable t-shirt that displays an evocative graphic when air pollution is above a set threshold. The graphic is inspired by the classic game "brick breakers", in that the car is like a paddle which spits out the exhaust (which are like balls) that "hit" pieces of the lung and degrade them. When air pollution is above a threshold (e.g. when walking by cars), the otherwise innocuous white t-shirts begins playing the display. This project was built by Jordan, Mary, Nick, and Odessa for a class called The Art and Science of Making.
Step 1: Gather Your Materials
- 6 * Adafruit NeoPixel Digital RGBW LED Strip - White PCB 144 LED/m
- 1 * Arduino Mega (according to the Adafruit website, using more than a couple strips of NeoPixel's requires an Arduino Mega)
- 1 * 9volt battery
- 1 * laptop charger
- 1 * Adafruit MiCS5524 sensor (this was the air pollution sensor we used because it's cheap. The drawback is that it senses multiple gases and does not distinguish between them)
- 2 * white t-shirt (we suggest buying t-shirts that are too big because 1) there needs to be room for the hardware and 2) you'll need to cut off a bit of extra fabric in order to make a pocket to hide the hardware)
- Wire cutter
- Soldering machine
- Sewing material and/or fabric glue
Step 2: Assembling the NeoPixel Grid
In order to assemble the NeoPixel grid, the original NeoPixel strips need to be cut and re-soldered depending on the desired grid dimensions. For this design, we were building a 47x16 grid of NeoPixels:
- Cut the 1-meter (144 NeoPixel) strips in 47 NeoPixel increments, being careful to allow for some room to solder at the edges of the strips (there are small metal leads that are visible on the bottoms of the NeoPixels). Make sure to cut such that the entire soldering pad is exposed (because they are already so small to begin with). The reason the strips are 47 pixels instead of (144/3 = 48) pixels long is that you'll lose at least one from cutting them because the NeoPixel's are so close together.
- Carefully lay the columns out next to one another (optionally use electrical tape to hold them in place), and ensure that the dimensions are as desired (47x16). Lay out the columns in an S-pattern.
- The NeoPixels have leads for voltage-in, input, and ground that should be connected to their counterparts in the next strip. Using multi-strand wire, connect the columns' leads together in an S-pattern, being careful to connect the correct leads.
- Leave the leads at the ends of the grid (there should be 2 ends - one where you began, and one where you ended the S-pattern), and optionally add wire extensions for convenience. You may also optionally tape off or otherwise secure the leads at the end. Also, hot glue over the connections to secure them.
- Ensure that your newly assembled grid is secure by adding a few more layers of electrical tape or other adhesive to the back.
Now you should have a working grid that you can test. Under the NeoPixel Matrix library, you can use the matrixtest sample code to see if the grid is working as expected. If it does, it should look like the photo above (ignore the Arduino Uno in the front, it was for testing something else)
Step 3: Adding the Sensor
A key aspect of this project is the sensor, an Adafruit MiCS5524, which can detect varying gases in the air and signal their intensity through analog input.
- First, ensure that the three leads to the sensor - voltage-in, output, and ground - have been wired correctly (optionally use appropriately colored wire to aid in this).
- Connect the voltage-in to the 5V output on the Arduino board, and connect the ground to the ground on the board.
- Then, connect the output to the A0 (or analog pin of your choice) on the Arduino board. This is all that is necessary in order to connect the sensor to the Arduino.
- Optionally, use the Serial monitor to verify that readings are being reported by the sensor (the readings should hover around one number and change when the sensor is placed near a source of carbon monoxide or other fumes).
Online, there are instructions for calibrating this sensor in particular so that it is sensitive to a change in the environment. What we did was leave the sensor for a few hours to determine what a "regular" reading range was for the room it was in. Then, to test "triggering" of the display, we used a cotton ball soaked in rubbing alcohol so that the sensor reading would spike above a set threshold to begin one loop of the graphic.
Step 4: Debugging the Code
Attached is the code. Notice that there are many headers included at the top. To download the required headers, in the Arduino IDE, click sketch, include library, and then manage libraries. Before you can upload the attached file, you'll need to download the following libraries:
- Adafruit NeoPixel
- Adafruit NeoMatrix
- Adafruit GFX library
Once you've downloaded these libraries, in the Arduino IDE, under file, examples, you'll find example code that can be modified to test as you go. For example, strandtest and matrixtest were very useful for testing the NeoPixel grid. Online, it's also easy to find sample tests for the air pollution sensor.
Before you can upload the file and see the working grid, here are some lines of code that can be modified:
#define PIN 6
#define SENSOR_PIN A0
The pin 6 should be switched to the pin number that the NeoPixel grid is attached to the Arduino with
The pin AO should be switched to the pin number that the sensor is attached to the Arduino with
#define STOP 300
#define NUM_BALLS 8
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(GRID_COLS, GRID_ROWS, PIN,<br> NEO_MATRIX_TOP + NEO_MATRIX_LEFT + NEO_MATRIX_COLUMNS + NEO_MATRIX_ZIGZAG, NEO_GRB + NEO_KHZ800);
The number 300 defines how many pixels of the lung are degraded to count as one cycle of the display. Increasing the number would make the cycle longer (e.g. more of the lungs are degraded) and vice versa.
The number 8 defines the number of "balls" (exhaust) which come out of the car
Now, if you followed the instructions to construct the grid exactly, the configuration of the NeoMatrix should work. However, it's just good to note that what this setup is saying is that the 0,0 coordinate is in the top left, we connected columns of strips, and the strips are connected in an S-formation. Thus, if your grid looks perfect except it's mirrored or 90 degrees off, it's likely that you set up the grid differently and should change the code here. By the end of this step, you should have something that looks like the video, we're triggering the t-shirt with a cotton ball soaked in rubbing alcohol, the graphic is playing one loop and cannot be re-triggered until the loop is complete.
Step 5: Putting Together the T-shirt
Yay! Now that you have the display, the sensor, and the code all working, it's time to put everything together. In the end, we'll have all the hardware attached to the inner shirt, and then the outer shirt on top hiding everything. The t-shirts were too big so we cut a strip off of the bottom. This gave us the fabric we needed to sew a pocket to hide the hardware.
- Begin by first placing strips of electric tape on the back of the NeoPixel grid just to secure it (you'll know you're fine if you can carry the grid around in one piece)
- Fabric glue the NeoPixel grid onto the inner t-shirt. Make sure the grid is centred, and over where lungs actually are.
- Let the glue dry as needed, make sure the glue doesn't seep onto the backside of the shirt and glue the shirt closed. Once the grid is on, see how far away the Arduino, battery, etc. can be placed. For us, we had soldered the jumper wires such that our electronic components would be at the back of the shirt.
- Sew the strip of fabric to make a small pocket for the electronic components. You can sew some components into the pocket (e.g. the Arduino) to make it more secure.
- Cut a small slit for the sensor to peek out of, for us, this was at the centre of the collar at the back of the shirt.
Outer shirt: The reason for the outer shirt is because it looks better with an outer shirt. The outer shirt hides the electronics and diffuses the light from the NeoPixels.
- Carefully place the outer shirt over the inner shirt
- Fabric glue or sew the inner shirt to the outer shirt such that the grid looks taught when lit up (in the image, the black dashes is where the fabric glue is)
Step 6: Troubleshooting
Congrats! You now have a wearable t-shirt that lights up based on air pollution levels. If not, then you probably hit a snag (we hit many), so here are some troubleshooting suggestion:
- The soldering pads on the NeoPixel strips are insanely small so it's difficult to get the grid connections secure. We used lead solder, multi-strand electrical wire, and hot glued down the connections.
- As a result of the NeoPixel's being so close together on the strip, we lost at least 1 pixel whenever we cut the strand. Using scissors was better than using an exacto knife, just peel back the plastic resin and cut.
- If the NeoPixel display is showing a strange colour (e.g. a fade to red, any shade of red instead of white), it's likely because the grid is not getting enough power. To upload code, we had everything unplugged, uploaded the code, then disconnected the computer, plugged in the battery to the Arduino, and finally plugged in the laptop adaptor to the grid.
- If the NeoPixel display is showing completely random colors at random intervals, make sure the grounds are common.
- When using fabric glue, make sure you don't use too much such that it seeps through and glues the t-shirt shut. We put a wooden plank between two fabric pieces that otherwise would be touching.
We hope you enjoyed this instructable! The next step is to connect the grid to a portable battery and take it for a spin out on the streets, where air pollution from cars and other pollutants will trigger the display.
Participated in the
Arduino Contest 2019