Maker.io main logo

NeoPixels with MakeCode

2017-10-05 | By Adafruit Industries

License: See Original Project

Courtesy of Adafruit

Guide by Peli de Halleux

Overview

The Circuit Playground Express is equipped with 10 NeoPixel LEDs that can be controlled with code to create tons of cool visual effects. In this guide, you will learn the various ways to use the Microsoft MakeCode editor to use those LEDs. The guide also covers how to use additional NeoPixel strips.

Make sure to read the MakeCode primer if you are not familiar with MakeCode and check out the Adafruit NeoPixel Uberguide for more details on those amazing LEDs.

Show Ring

The show ring block lets you choose the colors of the 10 LEDs. You can find it find under the light category.

You use multiple show ring blocks to create basic animations. The example below is a blinking siren animation that repeats in a forever loop.

The example is a blinking siren animation

Copy Code 
loops.forever(function () {
    light.showRing(
    `black black black black black red red black red red`
    )
    light.showRing(
    `black blue blue blue black black black black black black`
    )
}

Required Parts:

Built-in Animations

The show animation block provides a set of built-in animations. You can find it find under the light category.

The block will run the animation for the requested time, then continue the program. If another animation is already running, it will be queued and wait for its turn to run.

The example below shows the Rainbow animation running in a forever loop. The runtime maintains an animation queue and waits until the animation is fully executed before continuing to run.

The example shows the Rainbow animation

Copy Code 
loops.forever(function () {
    light.pixels.showAnimation(light.animation(LightAnimation.Rainbow), 2000)
}

Responsive Animations

When you need to run an animation to respond to an event, you'd typically want it to run immediately. To avoid waiting for other animations to finish, make sure to add the stop all animations block. This block stops the current animation and clears the animation queue.

In the example below, we want to run the Sparkle animation as soon as a shake event is detected. To do so, we add a stop all animations block before the show animation block.

Sparkle animation as soon as a shake event is detected

Copy Code 
loops.forever(function () {
    light.pixels.showAnimation(light.animation(LightAnimation.Rainbow), 2000)
})
input.onGesture(Gesture.Shake, function () {
    light.pixels.stopAllAnimations()
    light.pixels.showAnimation(light.animation(LightAnimation.Sparkle), 2000)
})

Frame by Frame Animations

In some case, you might want to be able to control frame by frame how the animation runs. This is also possible but requires a bit more setup.

You will need to store the animation instance in a variable and call show animation frame whenever you want the next frame to run. You can find this block under the More... category under light or by using block search.

In the example below, we store the Theater Chase animation and we show a new frame in a loop if button A is pressed.

Theater Chase animation

Copy Code 
let anim: light.NeoPixelAnimation = null
loops.forever(function () {
    if (input.buttonA.isPressed()) {
        light.pixels.showAnimationFrame(anim)
    }
})
anim = light.animation(LightAnimation.TheaterChase

Photon

Photon is a simple logo turtle for NeoPixels. The Photon is a color cursor that leaves a trail color as it moves. You can move Photon forward or backward, change the trail color or lift/lower the pen.

In the example below, we repeat 9 times a move forward and a color shift. Then, we set the photon in eraser mode and have it go back to clear up the circle. This creates a cool effect of bouncing rainbow animation.

To get started, try playing with these two blocks:

  • Photon forward let you move the photon on the LED strip
  • Photon set color lets you change the color hue from 0 to 255.

Photon is inspired from LightLogo from Brian Silverman

Copy Code 
let item = 0
loops.forever(function () {
    light.pixels.setPhotonMode(PhotonMode.PenDown)
    for (let i = 0; i < 9; i++) {
        light.pixels.photonForward(1)
        light.pixels.setPhotonColor(item)
        item += 5
        loops.pause(50)
    }
    light.pixels.setPhotonMode(PhotonMode.Eraser)
    for (let i = 0; i < 9; i++) {
        light.pixels.photonForward(-1)
        loops.pause(50)
    }
})
item =

Photon is inspired from LightLogo from Brian Silverman.

External Pixels

MakeCode provides a rich library to more NeoPixel strips (see the API reference) connected on the pins of the Circuit Playground.

If you want to support an external NeoPixel strip, not the 10 built-in LEDs, you can create a NeoPixelStrip instance and store it in a variable. You can configure the number and type of LEDs.

Copy Code 
// mount an external Neopixel strip on pin A1 with 24 RGB pixels
let strip = light.createNeoPixelStrip(pins.A1, 24, NeoPixelMode.RGB);

The example below mounts a NeoPixel strip on pin A1 and turns it to blue or red when buttons A or B are pressed.

To set all the colors on the pixels, use setAll:

Copy Code 
// show blue on all pixels
strip.setAll(Colors.Blue)

You can also use the set pixel color block to set an individual pixel color.

Copy Code 
// set colors one by one
for(let i = 0; i &lt; strip.length(); ++i) {
    strip.setPixelColor(i, Colors.Green);
}

The example mounts a NeoPixel strip

Copy Code 
// mount an external Neopixel strip on pin A1 with 24 RGB pixels
let strip = light.createNeoPixelStrip(pins.A1, 24, NeoPixelMode.RGB);

input.buttonA.onEvent(ButtonEvent.Down, function () {
    // show blue on all pixels
    strip.setAll(Colors.Blue)
})

input.buttonB.onEvent(ButtonEvent.Down, function () {
    // show red on all pixels
    strip.setAll(Colors.Red)
}

Ranges

When working with long strips of NeoPixel, it is quite useful to chunk them into ranges and apply independent colors and animations to them. The range allows you to create a new NeoPixel strip instance over a subset of the pixels.

Copy Code 
// mount an external Neopixel strip on pin A1 with 24 RGB pixels
let strip = light.createNeoPixelStrip(pins.A1, 24, NeoPixelMode.RGB);

// create 2 ranges for each half of the strip
let head = strip.range(0, 12);
let tail = strip.range(12, 12);

Once you have your rangers defined, you can easily apply colors and animation without worrying about complicated index computations.

Copy Code 
// turn on 1 pixel on each range
head.setPixelColor(0, Colors.Blue)
tail.setPixelColor(11, Colors.Red)

The example below create 2 ranges and moves the pixels in opposite directions on each of them.

Example creates 2 ranges and moves the pixels

Copy Code 
// mount an external Neopixel strip on pin A1 with 24 RGB pixels
let strip = light.createNeoPixelStrip(pins.A1, 24, NeoPixelMode.RGB);

// create 2 ranges for each half of the strip
let head = strip.range(0, 12);
let tail = strip.range(12, 12);

// turn on 1 pixel on each range
head.setPixelColor(0, Colors.Blue)
tail.setPixelColor(11, Colors.Red)

// rotate both ranges in opposite direction
loops.forever(function () {
    head.move(LightMove.Rotate, 1)
    tail.move(LightMove.Rotate, -1)
    loops.pause(50)
}

Buffering

By default, all operations on the NeoPixels are immediately transferred to the lights. This works great to get started and for a small number of pixels. However, for a large number of lights and for precise control of the timings, you might want to decide when to send the updates to the hardware.

To turn on buffering, call setBuffered.

Copy Code 
...
strip.setBuffered(false)

Once buffering is on, you need to call show to send the color updates into the NeoPixels.

Copy Code 
... some operations on the colors
strip.show();

call show to send the color updates into the NeoPixels

Copy Code 
// mount an external Neopixel strip on pin A1 with 24 RGB pixels
let strip = light.createNeoPixelStrip(pins.A1, 24, NeoPixelMode.RGB);
strip.setBuffered(false);

// move and show
loops.forever(function () {
    strip.move(LightMove.Rotate)
    strip.show();
}

Bitmap animations (Beta)

This is a cool-yet still rather experimental feature!

NeoAnim is a way to encode NeoPixel animation into bitmaps. It's a surprisingly easy way to design cool animation (once you wrap your head around the concept).

The pxt-neoanim implements this technique for MakeCode. It also comes with a converter that takes an image and turns into the JavaScript code that MakeCode can understand.

The image below is an example of possible animation and the editor shows the animation once converted.

example of animation and the editor

Copy Code 
const animation = light.animationSheet
(hex`2e0a2188ff004cfc024cfd004cfe004cfe8c4df8064dfc8b4dfe024efa8a4ff6084ffe0550f20d50f40b50f98950fe0051e60a51f20551f78851f80b52ed1152f40e53d91053f48654e91654fb0d55ee
8a55f28557ee8357ee8458e29558ec8259dd2259fc005ada255afb005cd52a5cfb005dd12d5de57e5fec2460e17c61aa2361e07b61f62362f72463d83265813665fa2666bc4366d977696a4069f8006c
afae6cd1736dac536ff70070a45a71a25d739c6375b25d76c16a79be697a15657a8c737bbb677c0b697c86787cba667d39607f006d80016d81047082056a83087184738c84f200850a68856f90859081
8810668868978a16798a619d8ba55b8d17618e59a68f1b648f57a89151d99257ac929b5592ef009572919743bc9746bc9794519841be992f689a2e5a9a3ac59a855c9c31549c35ca9c8d4d9ee2829eed
009f2ed1a129d6a235d2a259c3a38247a421dda48147a61ce3a67e45a71ae5a915eaa97942ab0ff7ac0df2ac0ef0ac33e1ad09f6ad5676aee900af07f8af713eb002fcb004fab100feb16c3eb200fcb2
02feb2e302b300f9b300fab306ffb400f6b400f8b500f0b506fbb55c3eb700ecb76638b800eab86537b91affba00e4ba59e5bb00dfbc00dcbde600be03d7bf00d2bf20f3bf5a31bf71e2c05931c103c4
c17544c1e500c200cac500bec600bbc6512cc6878dc84d2ac900b0c991e3ca00adcb4928cd00a3cd4626cdbf1ace009fce00a1ce0cadd0009ad04224d14123d60085d6391fd69322d7361ed9341cdc0b
5edc301add006fdd0070de2e19df0068e00064e02b17e0b37ae11c7ee40057e40058e4ab16e52514e60052e6ae15e7004ee72112e7b113e8004ae82011e8dc00e90047e9b412ec003decba0eed0039ed
0d20ed180dee0034ee0037ee160cf00030f0150bf1002df1c10bf21108f30c0af3c509f40022f5001af5001ef50d07f60a06f6c908f6ca06f70019f70211f70708f7d900f80014f80904f8cd08f90011
f9d800fa000efa0603fad003fb000afb000cfb0502fc0004fc0008fc0201fc0402fcd307fd0006fdd600fe0000fe0002fed800fcfcfcfcfcf7b9420503fcfcfcfcfcc9520c0303fcfcfcfcdc71190303
03fcfcfcf0a32703030303fcfcf7bf3b0303030303fcfce26d0c0303030303fcfcb730030303030303fcf0740c030303030303fcd93f03030303030303fcbc2703030303030303f7ab15030303030303
03f49c0c03030303030303f0900703030303030303f08e0703030303030303f49a0c03030303030303f8a91503030303030303fcb92503030303030303f2d73b03030303030303d5e86f070303030303
03b0e0b6270303030303038fc8dd6607030303030382aae7b73403030303038094dae37d15030303038085bef5c93f050303038080a6edf4a31d030303808092d8fcdc59050303808086bdf5f7b42503
03808080a6effce25e050380808094dffcf7b11a038080808ad2fdfcd73c0380808089c8f5fcf4740580808086c3f5fcfcb21080808085c2f5fcfcc51d80808088cbf5fcfcd4258080808dd5fdfcfcd4
2980808098e1fcfcfcd727808082adf3fcfcfcd42580808ac3f5fcfcfccc1b8080a2dffcfcfcfcb718808fbef6fcfcfcf7a51c85aee1fcfcfcfcf08133a0d6f5fcfcfcfceb6357c6fafcfcfcfcfcdd5b
75f3fcfcfcfcfcfcd36b80fcfcfcfcfcfcf5b87980fcfcfcfcfcfce09d8080fcfcfcfcfcf2b3828080fcfcfcfcfdce8a808080fcfcfcfce6a180808080fcfcfcf6ba8980808080fcfcf5d09580808080
80fcfce1a8828080808080fcf3bb8a808080808080fdd59780808080808080eaaf8080808080808080c18b80808080808080809980808080808080807f83808080808080807e69808080808080808072
3780808080808080794104808080808080794c0b0280808080807951120202808080807e621e020202808080807335000202028080807f540a020202028080806e2f0202020202808079510a02020202
0280806e2f020202020202807f560a02020202020280763700020202020202806e22020202020202027e6512020202020202027e5f08020202020202027e5c08020202020202027e620a020202020202
02806e200202020202020280773900020202020202807e621602020202020280807949040202020202808080773e04020202028080808073380202020280808080806a2402020280808080807c4f0402
028080808080806e24020280808080808079410002808080808080805d1302777e80808080837826023a58707c8087919b2a0202112c4d6c93a767090202020206172b2e090202320d02020202020202
02cd682102020202020202feee9632020202020202fefeee9f320202020202fefefee97b2302020202fefefefecd4a0d020201fefefefefe961f020214fefefefefecd36020e31fefefefefeee5a0f2d
40fefefefefefe84283d44fefefefefefbac434444fefefefefef19e484444fefefefefbd161444444fefefefefbb54b444444fefefefef18c45444444fefefefee56444444444fefefefedb53444444
44fefefefed14b44444444fefefefbca4744444444fefefefbc44744444444fefefefbc44744444444fefefefbc74744444444fefefefbcf4744444444fefefefed14b44444444fefefefedb4e444444
44fefefefede5544444444fefefefee46044444444fefefefeec7a44444444fefefefef9a446444444fefefefefbc050444444`, 50);
loops.forever(() => {
    light.pixels.showAnimationFrame(animation);
})
TechForum

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum