Head to www.makecode.com and select the Circuit Playground Express. Create a new project and give it a name. I called mine Crystal Fire Gem.

Here are the completed projects, if you just want to download the code and go. The "Large Crystal Fire Gem" version uses the lights onboard the face of the Circuit Playground Express. The "Small Crystal Fire Gem(s)" version assumes you've soldered NeoPixels onto pin A1 and runs the lights on them.

The step-by-step below shows the Large Gem / Circuit Playground Onboard lights code. At the end, we'll show you how to modify it for a NeoPixel strand instead.

Fire Light Flicker Animation

For this lamp, I wanted a flickering fire effect. To achieve this, we'll add a bit of randomness to the hue and value fields, as well as to which pixel we're affecting. The more randomness we can add, the more natural the flame effect will seem.

From LIGHT drag an instance of set pixel color at 0 to red into your forever loop.

From the MATH tab, drag an instance of pick random 0 to 10 to replace the 0. Now our lights will be randomly assigned to the 10 lights on the Circuit Playground. 

From the LIGHT tab, find the hue 255 sat 255 val 255 block. Use it to replace the red in the block you just made.

This little bit of awesomeness will give us lots of control over the colors. Hue refers to what we usually think of as a color: red, orange, green, etc. Red is at 0, yellow is around 50, blue 160 and it cycles back around to red at 255.

Saturation (sat) controls how intense the color is. For example, given a hue of 0 (red), saturation=0 comes out plain white, 100 is sort of pinkish, and 255 is full, bright red. 

Value (val) refers to the amount of color. Think of it as intensity or brightness.  

There's lots of info about HSV colors available on Wikipedia if you want to know more. 

Grab two more instances of pick random from the MATH tab and drag them in to replace the hue and val settings. For an orangey-red flame, change the hue to 5-20. Experiment with different numbers here to find the color you like.

The val setting translates to brightness (more or less). I chose a range from 100-255.

Next we'll add some speed randomness and control to the flickering. Drag an instance of LOOPS > pause 100 ms into your forever loops. Then add a randomness block and try values of 50 and 200. Take a look at the emulator on the left side to see how you like it.

Mine wasn't quite flickery enough, so I added another block that adds more randomness to the overall brightness. Drag an instance of LIGHTset brightness into your forever loop and try some different random values. I liked 50-200.

Download your code to your Circuit Playground Express and see how you like it. Does it look flamey enough? Play with the values in all the different blocks you made until you absolutely love the effect.

On/Off Switch

It's not too hard to add some code that will turn the lights on and off with any number of triggers.  The Circuit Playground Express comes ready-made for this type of thing, with onboard capacitive touch pads and sensors already set up. All you need to do is code the switch and decide how you want to trigger it. 

In this example I'm triggering the switch with the capacitive touch pad A4 on the Circuit Playground. You can also use the sound or acceleration triggers just by changing the INPUT loop you choose.

From your LOOPS tab, drag an instance of on start into your workspace. Anything in this loop will happen just once, when your Circuit Playground Express boots up.

Next, from VARIABLES, create a new variable called switch. Drag set switch to 0 into your on start loop.

Then, from LOGIC, replace the 0 with true. This will allow us to tell the switch to turn the lights on when true, or off when false.

Now let's add a conditional loop to our forever loop. From LOGIC, drag an instance of if / then into your forever loop, and put the existing code blocks inside the first if slot. 

From LOGIC, replace the true with a comparison block, and make it read if switch = true then 

This will make the flame code you wrote earlier happen when the variable switch is set to true.

In the else block, add LIGHT > clear to turn all the lights off.

Finally, we'll tell the switch to change states when we touch pad A4 on the Circuit Playground. From INPUT, drag an instance of on button A click and change it to read on touch A4 click.

Add another conditional from the LOGIC tab as shown. This will create a toggle switch, turning the lights on and off each time the pad is touched. 

Download your code to your Circuit Playground and test it out. Once everything's working, it's time to build the crystal gem.

Troubleshooting

If you're having trouble getting the code to download, head over to the Circuit Playground Express Intro Guide for help.

Small Gem Version

To modify the code to run on individual NeoPixels, make the following changes:

  • Add LIGHT > NEOPIXEL > set strip to create strip on A1 with (x) pixelsto your on start loop
  • Change set pixel color... to set strip pixel color... (NEOPIXEL tab) for both instances in the forever loop
  • Change clear to strip clear in the else portion of the conditional loop

This guide was first published on May 14, 2019. It was last updated on May 14, 2019.

This page (Code with MakeCode) was last updated on May 05, 2021.

Text editor powered by tinymce.