Create a beautiful and unique fascinator hat for every occasion. A NeoPixel Jewel, Gemma M0, and tiny battery are hidden inside. The flowers and feathers glow tastefully and set off your outfit-du-jour with colors and animations you can design yourself in MakeCode. 

A little hot glue, a little creativity, and you'll be the talk of the Derby Hat Parade. Make one for everyone in your wedding party, or two for yourself and one for each of your girlfriends for a night on the town.  

From Wikipedia:

fascinator is a headpiece, a style of millinery. Fascinators were originally a form of lightweight knitted head-covering. Since the 1990s the term refers to a type of formal headwear worn as an alternative to the hat; it is usually a large decorative design attached to a band or clip, sometimes incorporating a base to resemble a hat, in which case it may be called a hatinator

Hatinator is my new favorite word. 

Parts

1 x Gemma M0
Gemma M0 Microcontroller
1 x NeoPixel Jewel
7-Pixel NeoPixel Jewel
1 x Battery
Tiny LiPoly Battery
1 x On/Off Switch
Tactile On/Off Switch with Leads
1 x JST Connector Cable
Battery Extension Cable with Connectors
1 x Battery Charger
USB Battery Charger

This is an easy project that requires some simple soldering and a little creativity. We've included code for a simple and beautiful rainbow animation. Also included is some more complex code that allows you to choose a color gradient to go with an outfit via Gemma's onboard capacitive touch pads -- just touch the Gemma and the animation colors will change.

Tools and Materials

  • Soldering iron, solder & heat shrink
  • Wire cutters & strippers
  • Hot glue gun & glue sticks
  • Scissors
  • Hair clips
  • Craft foam & craft felt
  • Feathers, flowers, and fancy things

I also used a few small pieces of Worbla and Fosshape in my fascinator to add structure and height, but this is not required.

The Gemma M0 will be hooked up to the NeoPixel jewel via 3 wires.  VOUT goes to PWR, D1 goes to IN, and G goes to G.

If you're happy using Gemma's onboard on/off switch (which is a bit tiny and hard to get to), that's all you'll need -- you can just plug the battery directly into the Gemma.  If you go this route, remember to unplug the battery when the fascinator is being stored.  The battery will slowly drain if it's left plugged in directly, and it's no fun to find a dead battery right before it's time to leave.

If you want to be able to turn the fascinator on and off more easily, and leave the battery plugged in during storage, I've also included instructions on how to add an on/off switch. It takes a little more soldering and time, but your hairdo will thank you later.

MakeCode is Microsoft's fabulous drag-and-drop code editor that makes it easy to create complex animations without a lot of in-depth knowledge about how the code works. You can either download the code we wrote and use it as-is, or follow along and learn to code your own custom animations.

The Simple Rainbow code makes pretty lights that shift in a rainbow spectrum. It's great for first-timers since it's very easy to set up -- and of course, rainbow goes with everything.

The Changing Gradient code is a bit more involved. The flower will glow in a gradient (i.e. red-orange-yellow) and each time you touch Gemma's capacitive touch pad it will step through the spectrum, showing yellow-green-blue, then green-blue-purple the next time you touch it, and so on. If you like being able to make your colors change to go with different outfits, this code is for you.

MakeCode

To see the code (if you do not see it below), click the "Show Embedded Content" button. You can use the icon in the upper right corner of the code box to open the code in the Microsoft MakeCode editor. 

See the following pages for a step-by-step guide for each code type you can use.

Simple Rainbow Code

Changing Gradient Code

To follow along and learn how I did it, point your browser at maker.makecode.com and select "New Project".  

Select the Gemma M0 board, since that's the one we're working with today. While you're here, take a second to notice all the other development boards MakeCode will work with. So many possibilities!

You'll find yourself in the MakeCode editor window.  From here, you can drag and drop snippets of code from the different blocks listed in the middle, into the workspace on the right. Then, the Gemma emulator will simulate what your code is doing on the left.  

We'll start with the on_start loop, which will run some code when the Gemma first boots up. For now, drag the forever loop down out of the way.

Choose the PIXEL tab. Anything in this tab will deal with Gemma's onboard NeoPixel, the one on the front face. For this project, I want to turn this pixel off entirely so it doesn't compete with the jewel. Drag an instance of set pixel to red into the on start loop and change the color to black.

Next we'll tell Gemma about our jewel. Any lights we solder to the Gemma will be controlled by code snippets in the LIGHT tab or the LIGHT > MORE tab. 

From the MORE tab drag an instance of set strip to create WS2812 strip on LED with 30 pixels. We soldered onto D1, so change the first dropdown to D1.  Since we have 7 lights in our jewel, change the number in the set strip snippet to 7.  Drag an instance of strip set brightness into your on start loop as well. Then choose your brightness. For this project I like around 150 -- bright enough to see but not so bright you'll blind people.

The very easiest way to get your lights going is with one of the pre-made animations that come with MakeCode.  Back in the MORE tab, drag out an instance of strip show frame of animationonto your workspace, and put it in the forever loop.  You'll notice that your Gemma emulator now has a strip of LEDs that are playing a rainbow animation.

You may notice that there are two different code blocks dealing with showing animations: one called show animation for 500 ms and one called show frame of animation

The first one will run the selected animation for the specified amount of time, then move on to do something else. If you want a few seconds of rainbow, then a few seconds of twinkle, etc, you can make a "playlist" of animations inside your forever loop to accomplish this. You won't have any control over the animations except to tell them how long to run.

The second one will show just one frame of the animation and then look for more instructions. This will give you a bit more control - you can change the speed or the brightness between each frame, slowing it down or making it appear to pulse or flicker. I want a slower rainbow, so I've chosen this version for this project.

Go into the LOOPS tab and drag an instance of pause 100 ms into your forever loop beneath the animation block. Watch the emulator on the right as you try different values in this block. When you have a speed you like, move on to the next step.

Give the file a name and save it to MakeCode.  I called mine "Fascinator -  Rainbow".  Then click the Download button, and plug your Gemma into your computer via the USB port. 

Click the Reset button on the face of the Gemma and a drive will appear on your computer called GEMMABOOT.  This means it's in bootloader mode and you can program it.  Drag the file you just downloaded onto that drive.

It may ask you if you want to pair the Gemma to your computer. If you want to do this, follow the onscreen instructions. You may need to update your bootloader before proceeding. Pairing will make code testing a bit easier - you'll no longer need to drag the file to the GEMMABOOT drive each time you want to test it. But it's not necessary - you can cancel out of the pairing process and simply drag the file onto your Gemma.

Another way to tell if Gemma is in bootloader mode is that you'll see a red and green light on the Gemma's face.  Once you've downloaded the code to Gemma, the light will be magenta and the code will be running.  To get back into bootloader mode for another download, just click the reset button again.

Troubleshooting

If the GEMMABOOT drive is not appearing, first check to be sure that the on/off switch on the face of the Gemma is switched on.  It's easy to miss! 

Next, try using a different USB cable.  Some cables are "charge-only" and won't pass data.  Also try using a different USB port on your computer (mine is sometimes twitchy).  

If it's still not working, head over to the Gemma M0 intro guide for more suggestions.

If you can drag the code onto GEMMABOOT but your jewel isn't lighting up, check to be sure that your code reflects the pin you soldered to (did you remember to change to D1?).  Also be sure you've soldered your connector to the IN pin on the back of the jewel -- it won't work if you soldered to the OUT pin.

This code will create a slowly animating gradient of 2-3 colors. Each time you touch the D0 pad on Gemma, the gradient will shift to a new color range. You can make an animated gradient that matches every outfit you have, without having to change the code. It's a bit more involved to build, but so satisfying to have so much control over what your lights are doing.

The first part of the code is exactly the same as in the Simple Rainbow code, so start there. Get your on start loop all set up, then come back here to continue.

Create some variables. In the VARIABLES tab, make a variable called hue, one called gradient, and one called toggle. Drag an instance of set gradient to 0 into the on start loop. Drag a second instance make it read set hue to gradient

These variables will allow us to change and store color values on the fly. Variables are essential to creating smooth color animations.

Go to MORE and drag an instance of set strip pixel 0 to red into your forever loop. From the LIGHT tab, replace the red with hue 255 saturation 255 value 255. Then from the VARIABLES tab, replace the hue value with your hue variable.

To get the animation to move along the strip and light up all the pixels one by one, add an instance of MORE > strip rotate by 1 into your forever loop. Then go to LOOPS and add a pause 100ms block to slow the animation down a bit. You can change this number to whatever you'd like to change the speed of the motion.

Hue, Saturation and Value

Hue, saturation and value are a means of defining a specific color using just numbers, on a scale of 0-255.

Hue refers to the color on the spectrum -- red, blue, purple, etc.  Red is at 0, blue is at around 140, purple comes in at around 180, and the spectrum loops around back to red at 255.

Saturation refers to how pastel or how vivid the colors are: 0 is a plain white, no matter what your hue is -- any completely unsaturated color just turns white. 255 is fully vivid and saturated with color. 

Value, for our purposes, refers to the brightness or intensity of the color. The higher the value, the more red or blue is added. 

You can read far more than you ever wanted to know about this on Wikipedia. What matters to us is that we can mess with the NeoPixel colors in all sorts of fun ways using hue, saturation and value. For this animation, we will focus on messing with hue and leave the saturation and value alone.

From the VARIABLES tab, drag an instance of change hue by 0 into your forever loop. Change it to read change hue by toggle using an instance of the toggle variable you made earlier. We'll use this variable to change the hue upwards or downwards by a set amount, giving us a gradient effect.

Now we'll set up a conditional limit on the hue. This means the hue value will count up until it reaches its top limit, then it will start counting down again until it hits its bottom limit. From the LOGIC tab drag an instance of if/then/else into your forever loop. Click the + and - buttons until it looks like the picture. Then drag a conditional 0 = 0 block to replace each true statement. Change the first = to >= and the second to <=.

Now drag your hue variable to replace the first 0 in each conditional statement. Drag your gradient variable to replace the 0 in the second block. Add set toggle to 0 inside both slots. Set the first toggle change to -5 and the second to 5.

From the MATH tab, grab an instance of 0 + 0 and replace the remaining 0 in the conditional statement. Insert the gradient variable to replace one of these 0s, and change the other to 75, making the line read hue >= 75 + gradient.

Check out the emulator. You should see a gradient animation that rotates from red to orange and a bit into green before rotating back to red and repeating. What is happening here?

The hue variable tells pixel 0 what color to be. Then, the rotate block tells pixel 1 then pixel 2 etc to become that color. This creates the animation.

By changing the value of hue, each time the forever loop runs will tell pixel 0 (and then subsequently the other pixels) to be a slightly different color. Since our gradient value started at 0 (remember, in our on start loop we specified this) then the hue value will increase by 5 each time until it reaches 75, at which time it will start counting down by 5. When it reaches 0, it will start counting up again.

The magic here is that we can change the starting value of gradient, and the whole thing will hang together and show whatever portion of the spectrum we want. Try changing gradient to 50 or 100 in your on start loop and see what happens to the LEDs in the emulator.

We can harness this magic! We'll set it up so each time we touch one of Gemma's capacitive touch pads, the value of gradient changes by 50. This will allow us to change to whatever colors we want just by touching the Gemma.

From the INPUT tab drag an instance of on touch D0 click into your workspace. Place an instance of change gradient by 0 inside and change the 0 to 50. Now each time you touch the D0 pad the value of gradient will increase by 50.

This will work perfectly for the first 5 times you touch it. But once the value of gradient surpasses 255, it will stop changing. Remember, we're looking for a hue between 0-255, so let's add some code that will reset the value to 0 if it gets too high.

Drag an if/then block form the LOGIC tab. Make it read if gradient >= 255 set gradient to 0. Then drag an instance of VARIABLES > set hue to 0 and make it read set hue to gradient. Now the value will reset and cycle through the colors over and over.

Try this out with the emulator. Click the D0 button and watch to see if the LED animation changes in a way that pleases you. Try changing some of the values to tweak it so it does exactly what you want. 

Extra Credit - Add a Feedback Blink

I finished this code and downloaded it. It works great, but because of how it refreshes it's a little hard to tell whether the touch was actually sensed or not. I found myself unsure as to whether it worked, so I decided to add some code to make the pixels blink a bit when a touch was sensed. This made the whole thing a bit more satisfying to use.

From the LIGHTS > MORE tab drag two instances of set strip to red into your on click loop above the last block. Change the first one to black. Drag two instances of pause 100 ms in between, changing the 100 to 500. This will pause for a half second, creating a satisfying blink. 

 

Then change the second red to hsv (from the LIGHT tab) and replace the hue value with gradient. This will make the blink happen in the same color range you're already in.

Click the D0 pad on the Gemma emulator to test and see how it works. If you're happy, it's time to download to the Gemma.

Downloading

Click the Download button, and plug your Gemma into your computer via the USB port. 

Click the Reset button on the face of the Gemma and a drive will appear on your computer called GEMMABOOT.  This means it's in bootloader mode and you can program it.  Drag the file you just downloaded onto that drive.

Another way to tell if Gemma is in bootloader mode is that you'll see a red and green light on the Gemma's face.  Once you've downloaded the code to Gemma, the light will be magenta and the code will be running.  To get back into bootloader mode for another download, just click the reset button again.

Troubleshooting

If the GEMMABOOT drive is not appearing, first check to be sure that the on/off switch on the face of the Gemma is switched on.  It's easy to miss! 

Next, try using a different USB cable. Some cables are "charge-only" and won't pass data.  Also try using a different USB port on your computer (mine is sometimes twitchy).  

If it's still not working, head over to the Gemma M0 intro guide for more suggestions.

If you can drag the code onto GEMMABOOT but your LED strand isn't lighting up, check to be sure that your code reflects the pin you soldered to (did you remember to change to D1?). Also be sure you've soldered your connector to the IN end of the LED strand -- it won't work if you soldered to the OUT end.

Cut a red, black, and white wire about 3" long. Strip a tiny bit off the end of each, and carefully solder the wires into the back of the NeoPixel jewel. This can be a bit fiddly, but it really does work best if you solder from the back.

Trim the wires to about 1.5", just long enough to reach the Gemma's pads without a lot of slack. Strip about 1/4" off this end. Solder the red wire to VOUT, the white wire to D1 and the black wire to G.

Twist the jewel around so it's sitting back to back with the Gemma.  It makes such a tidy little package. Plug in your battery. If you've already uploaded your code, the NeoPixels should all light up. Success!

If the NeoPixels don't light up, here are a few things to check:

  • Did you solder to the correct pads on the Jewel? Be sure you soldered to IN and not OUT with the white wire.
  • Make sure your code specifies that the pixels are on pin D1
  • Be sure the on/off switch on the face of the Gemma is turned on.
  • Be sure the battery has charge.

On/Off Switch

If you're happy using the Gemma's onboard on/off switch, you're done! Go make the hat. 

If you want an easier way to turn the hat on and off while you're wearing it, adding a tactile switch is really worth the extra effort.

Trim the leads on your tactile on/off switch until they're about 2" long. Cut both ends off the JST extension cable, also to about 2". Put some heat shrink on each wire.

Solder the black wires of the extension cable right back together (only shorter). Solder each end of the red wires to one of the switch leads. You'll end up with short extension cable with a switch.

Plug the battery into the male end and the female end into the Gemma. Now you can turn your lights on and off by feel.

Cut an oval out of craft foam and a matching one out of sticky-back felt. Mine are about 5" x 7". Stick the felt to the craft foam. Cut a small wedge out of both layers. 

Close the gap with your fingers and test the fit, seeing if it curves nicely to your head (or your trusty skull-head friend's head). Once it fits, use hot glue to close the gap. If you want to shape it a bit more, hit it with a heat gun for a few seconds until it settles into its curve.

Attach two hair clips to the inside of the fascinator with hot glue. Don't rely on the hot glue, as it will fail at exactly the wrong moment. Just use it to hold while you sew the clips firmly in place, making sure they open and close easily. Try it on, and make note of which side is the front respective to the way the clips want to go into your hair.

I'm using a white carnation from the craft store to diffuse the lights. To make it as flat as possible, pull off the back sepal leaves and clip the stem short. This will make most cloth flowers fall apart immediately, so if this happens to yours, secure the little stumpy stem with some more hot glue.

I wanted a black and white look, so I took a sharpie and colored in all the edges of the white petals. This was incredibly effective.

Now it's time to start decorating. I laid down a layer of netting, then some shaped craft foam and hot glued them to the hat.  I added a triangle of fosshape (a felt that hardens into shape when you heat it) to add height and create a space for the battery. You could also use cardboard or card stock for this, if that's what you have on-hand. 

I glued feathers over my little battery pocket then slipped the battery inside, making sure it fits fairly tightly. I don't plan to take the battery out (I'll just charge it in place) so I added some glue around it to be sure it doesn't slip out. I added some tubular crin for danglies, and made sure to pay attention to height!

Glue a clear marble or other dainty thing into the center of the flower, then sew it to the Gemma through the unused pads, sandwiching the jewel behind the flower. Glue the flower petals down to the fascinator, making sure you can still reach the reset button and the USB port and battery port on the Gemma. If you went with the capacitive touch code option, make sure you can access pin D0 for color changes.

Once it's all secured, clip it into your hair. Pair it with a color touch necklace and some LED spats for a fabulously high-tech ensemble.

This guide was first published on Feb 25, 2019. It was last updated on Feb 25, 2019.