Digital Décor: Girls Night Out Painting
2021-02-25 | By Nate_Larson
License: None
National Engineers Week is an annual event started by the National Society of Professional Engineers in 1951 with the goal of “ensuring a diverse and well-educated future engineering workforce by increasing understanding of and interest in engineering and technology careers.” In line with this goal, Girls Night Out has become a staple of the event and takes place on Thursday during Engineers Week. Current research indicates that only 13% of engineers are women, so there is excellent potential to increase diversity.
This year, Digi-Key is hosting our 4th annual Girls Night Out event for local girls in grades 6-12. To help appeal to those who may not have had as much exposure to coding and engineering, the project for this year’s event puts a bit more emphasis on the “A” in STEAM (Science Technology Engineering Arts Math).
The concept is that participants will create a painting of their choice, and then use a micro:bit v2 and a strip of Neopixel LEDs to accentuate the painting as they see fit. I created the following as an example to inspire these projects.
Hardware
The painting itself makes use of the of Engineers Week 2021 theme, Imagining Tomorrow, and features an outstanding galactic theme. My art skills are lacking, so a much more talented Digi-Key team member painted this and provided it to me to add the electronics.
I start by creating a frame for the painting that will provide the foundation to attach the micro:bit and some LEDs. It is a simple design created in CAD software and 3D printed on a LulzBot TAZ Pro S. A simple off-the-shelf frame or one created in the woodshop would have worked just as well for this purpose, but if you have the tools, why not make use of them?
Once framed up, I remove the silicone sleeve from the strip of thirty Neopixel LEDs to cut the strip into various lengths and use these LEDs throughout the painting. I fold a strip of ten LEDs in half and secure it to the back of the painting to allow independent illumination of the individual words. To avoid individual points of light, I position the LEDs perpendicular to the canvas and a generous amount of clear hot glue is used to function as a light pipe and evenly disperse the light across all the letters. The word “Imagining” is all lit in one color, that slowly changes over the full-color spectrum, while the word “Tomorrow” will illuminate with colors blending from one end to the other.
Next, I cut three individual LEDs from the strip and place them in separate corners of the painting. These will sparkle like stars to accentuate the background stars of the image. After that, I place a strip of three Neopixels behind the iridescent foil gears representing the girl’s mind. These LEDs breathe to represent various sections of the mind lighting up as knowledge is gained and ideas are processed. The linear alignment of these LEDs parallel to the hairline also gives the appearance of a headband.
Finally, I place the remainder of the LEDs around the inside of the top of the frame to provide an ambient glow to the image. Each of the sections of Neopixels is connected sequentially using 22 AWG stranded hookup wire, with all hardware physically anchored with hot glue, including the micro:bit which is placed prominently on the front of the frame.
Code
As an example of a beginner-friendly project, it only makes sense to have the code for the micro:bit created using MakeCode and the Neopixel extension. Below, I will walk you through the various code sections.
We start by setting a couple of variable values, the luminosity value used for the three head LEDs, and the hue used for the “imagining” LED strip. Next, we define our strip of thirty LEDs attached to pin two of the micro:bit, then we go on to specifying Neopixel strip ranges. This is especially handy for this type of project because it allows us to deal with each section of LEDs as though they are separate strips, so we don’t need to remember individual LED addresses or worry about the strips’ code interfering with each other. As you can see above, I create LED ranges for each of the words, the stars, the head, and the front ambient lighting. The last thing we need to do in the “on start” block is to set the “tomorrow” range to show a rainbow color spectrum. I should also note that all these ranges and variables are created using all lowercase characters. This is important, as I use these same names with capitalization for another purpose in our next step. If not for this slight difference, one may experience unpredictable behavior from the micro:bit.
The forever block is the main loop of our program that repeats infinitely once the “on start” block code has finished running. I keep the forever block very simple for this program by using individual function calls to hold the code for each strip of LEDs. Each of these functions is called sequentially, and once the code in the function has completed running, it returns to the forever loop to execute the next function call. This not only makes our code easier to understand but allows us to match functions and Neopixel ranges at a glance, so there is less chance of errors or expected behavior. Notice that these function names are the same as the Neopixel strip ranges they reference but capitalized to prevent any confusion in the code.
The “Tomorrow” function rotates the pixels in this range by one. This means that the color setting of each LED shifts to the next LED and the color from the final LED in this range is set for the first LED in the range rather than just dropped. Because we had set this range to show rainbow colors in the “on start” block, this creates a nice rainbow cycle effect. Once the pixels’ colors are rotated to the next LED, we tell this LED range to display the new colors using the “show” block.
Next is the “Imagining” function. The LEDs illuminating this word of the painting also fade through the full-color spectrum, but with all LEDs showing the same color. We can easily do this by making use of the hue, saturation, and luminosity block. We set saturation at its max value of 255 so colors are pure and vivid, while luminosity is at the midpoint setting so colors are not dimmed or washed out. Each time we cycle through this code block the five LEDs in this strip are all displayed at the current hue setting, then we increase the hue value by one before running a check to ensure the hue value stays in bounds.
One can think of hue as a color wheel where the number represents the color at the angular position on the wheel with red at zero degrees.
The “Stars” function has two purposes, one being to randomly twinkle the star LEDs, but the second is setting the timing for our code. This is the only section of code with any pauses, and since this code repeats ten times each time the function is called, it essentially inserts a delay of approximately 100ms in the code so our other animations don’t cycle so fast we can’t correctly perceive them. Within this repeat block, we start by selecting a random number from 0 to 100. This sets the likelihood that we will see a star twinkle. With a number less than 100 this would happen more frequently just as if we increased the number to, say 500, the likelihood of getting a random one and thus a star twinkling would be diminished. If the code does randomly select the number one, we then randomly select one LED in the “star” range and set it to white. We then turn that LED on for ten milliseconds to create a quick flash, then turn the entire LED range off again by setting the range to show the color black.
The “Head” function is the most complex of the functions, but still quite simple when we look at what it actually does. The hue sets all three LEDs in this range to yellow, with saturation at max to provide a vivid color. The only thing that changes is the luminosity, which oscillates between one and fifty to fade from nearly off to full color without going too far and becoming washed out. The first and last LED in this range display the same, while the middle LED shows the antithesis of the other two by subtracting the “hlum” variable from fifty rather than just displaying the variable value. Once these LED values are set and displayed, the variable changes either positively or negatively by one depending on a toggle variable. The toggle variable is a Boolean, so it only has two states, either True or False. If our variable has reached the end of our limit, we simply tell the toggle variable to change to the opposite of its current state. This allows the value of the “hlum” variable to continuously ping-pong back and forth between zero and 49 by increments of one.
Last, the “Ambient” function sets the brightness of the “ambient” LED range according to current lighting conditions and then displays a teal color; this allows the light produced by the artwork to decrease automatically at night so as not to become a nuisance.
The micro:bit does not have an ambient light sensor such as a photoresistor or phototransistor, but instead uses the LED’s of the onboard matrix to sense current light conditions and report back a corresponding number ranging from zero to 255. This is because when unpowered LEDs are subjected to light, some photons striking the LED will be converted to electrons. This small voltage can be measured and roughly correlated to ambient light levels.
While this project only uses a few of the features of the micro:bit v2, there is potential for additional functionality to be added by anyone inspired by this project, such as sound or touch response, audio, motion sensing, or even wireless control. The result is quite attractive and well suited to getting anyone started on the path to becoming an engineer.
Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.
Visit TechForum