# NeoPixels with MakeCode ## 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](https://makecode.adafruit.com) to use those LEDs. The guide also covers how to use additional NeoPixel strips. Make sure to read the [MakeCode primer](https://learn.adafruit.com/makecode) if you are not familiar with MakeCode and checkout the [Adafruit NeoPixel Uberguide](https://learn.adafruit.com/adafruit-neopixel-uberguide/) for more details on those amazing LEDs. ## Show Ring The [show ring](https://makecode.adafruit.com/reference/light/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 repeat in a forever loop. https://makecode.com/_h2e1XoD605cf ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/3333) **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to... In Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ![A Black woman's manicured hand holds a round microcontroller with lit up LEDs.](https://cdn-shop.adafruit.com/640x480/3333-05.jpg) # NeoPixels with MakeCode ## Built-in Animations The [show animation](https://makecode.adafruit.com/reference/light/show-animation) block provides a set of builtin 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. https://makecode.com/_LmYdvu8yuM99 # NeoPixels with MakeCode ## 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 add the [stop all animations](https://makecode.adafruit.com/reference/light/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](https://makecode.adafruit.com/reference/light/stop-all-animations) block before the `show animation` block. https://makecode.com/_16ATvs0z2MhW # NeoPixels with MakeCode ## 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. In the example below, we store the `Theater Chase` animation and we show a new frame in a loop [if](https://makecode.adafruit.com/blocks/logic/if) button `A` is pressed. https://makecode.com/_4hmbAk4TYWoz # NeoPixels with MakeCode ## 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](https://makecode.adafruit.com/blocks/loops/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 hue` lets you change the color **hue** from 0 to 255. https://makecode.com/_RqDdECV0rEWU Photon is inspired from [LightLogo](http://joshburker.blogspot.com/2015/08/lightlogo-logo-programming-microworld.html) from Brian Silverman. # NeoPixels with MakeCode ## External Strips MakeCode provides a rich library to more NeoPixel strips (see the [API reference](https://makecode.adafruit.com/reference/light)) 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 strip instance](https://makecode.adafruit.com/reference/light/create-strip) and store it in a variable. You can configure the number and type of LEDs. ``` // mount an external Neopixel strip on pin A1 with 24 RGB pixels let strip = light.createStrip(pins.A1, 24); ``` 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](https://makecode.adafruit.com/reference/light/set-all): ``` // show blue on all pixels strip.setAll(Colors.Blue) ``` You can also use the [set pixel color](https://makecode.adafruit.com/reference/light/set-pixel-color) block to set an individual pixel color. ``` // set colors one by one for(let i = 0; i < strip.length(); ++i) { strip.setPixelColor(i, Colors.Green); } ``` https://makecode.com/_YWPR0FDTkHrY # NeoPixels with MakeCode ## 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](https://makecode.adafruit.com/reference/light/range) allows to create a new NeoPixel strip instance over a subset of the pixels. ``` // mount an external Neopixel strip on pin A1 with 24 RGB pixels let strip = light.createStrip(pins.A1, 24); // 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. ``` // 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 on opposite directions on each of them. https://makecode.com/_5LmVt38j8Y5E # NeoPixels with MakeCode ## 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 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**. ``` ... strip.setBuffered(false) ``` Once buffering is on, you need to call **show** to send the color updates into the NeoPixels. ``` ... some operations on the colors strip.show(); ``` https://makecode.com/_KVs1vsitYX26 # NeoPixels with MakeCode ## Bitmap animations (Beta) Warning: [NeoAnim](https://learn.adafruit.com/circuit-playground-neoanim-using-bitmaps-to-animate-neopixels/) 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](https://github.com/Microsoft/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. * open the converter https://microsoft.github.io/pxt-neoanim/index * paste your image * open https://makecode.adafruit.com * add the **neoanim** package (go to Advanced -> Add Package) * copy/paste the generated code into MakeCode and run! The image below is an example of possible animation and the editor shows the animation once converted. ![](https://cdn-learn.adafruit.com/assets/assets/000/041/947/medium800/adafruit_products_neoanim.png?1495778511) https://makecode.com/_hg2fcbP2HEy1 ## Featured Products ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/3333) **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to... In Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ### Adafruit NeoPixel Digital RGB LED Strip - White 60 LED [Adafruit NeoPixel Digital RGB LED Strip - White 60 LED](https://www.adafruit.com/product/1138) You thought it couldn't get better than [our world-famous 32-LED-per-meter Digital LED strip](http://adafruit.com/products/306) but we will prove you wrong! You wanted **twice the LEDs**? We got it (well, its 1.875 times as many but that's within a margin of... Out of Stock [Buy Now](https://www.adafruit.com/product/1138) [Related Guides to the Product](https://learn.adafruit.com/products/1138/guides) ### Adafruit NeoPixel Digital RGB LED Strip - Black 30 LED 5m [Adafruit NeoPixel Digital RGB LED Strip - Black 30 LED 5m](https://www.adafruit.com/product/1460) You thought it couldn't get better than [our world-famous 32-LED-per-meter Digital LED strip](http://adafruit.com/products/306) but we will prove you wrong! These NeoPixel strips have 30 digitally-addressable pixel LEDs per meter and are very affordable and are only 12.5 mm... In Stock [Buy Now](https://www.adafruit.com/product/1460) [Related Guides to the Product](https://learn.adafruit.com/products/1460/guides) ### Adafruit NeoPixel Digital RGB LED Strip - White 30 LED [Adafruit NeoPixel Digital RGB LED Strip - White 30 LED](https://www.adafruit.com/product/1376) You thought it couldn't get better than [our world-famous 32-LED-per-meter Digital LED strip](http://adafruit.com/products/306) but we will prove you wrong! These NeoPixel strips have 30 digitally-addressable pixel LEDs per meter and are very affordable and are only 12.5 mm... Out of Stock [Buy Now](https://www.adafruit.com/product/1376) [Related Guides to the Product](https://learn.adafruit.com/products/1376/guides) ### Warm white LED weatherproof flexi-strip 60 LED [Warm white LED weatherproof flexi-strip 60 LED](https://www.adafruit.com/product/357) Discontinued - **you can grab** [Adafruit DotStar LED Strip - Addressable Warm White - 60 LED/m](https://www.adafruit.com/product/2436?length=2) **instead! **   These LED strips are fun and glowy. There are **60** warm... No Longer Stocked [Buy Now](https://www.adafruit.com/product/357) [Related Guides to the Product](https://learn.adafruit.com/products/357/guides) ## Related Guides - [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md) - [Illuminated City Skyline with MakeCode](https://learn.adafruit.com/city-skyline-with-makecode-for-cpx.md) - [Infrared Transmit and Receive on Circuit Playground Express in C++](https://learn.adafruit.com/infrared-transmit-and-receive-on-circuit-playground-express-in-c-plus-plus-2.md) - [The MonkMakes Plant Monitor and CircuitPython](https://learn.adafruit.com/monkmakes-plant-monitor-and-circuitpython.md) - [Meeting Time Keeper Stick](https://learn.adafruit.com/meeting-time-keeper-stick-with-cpx.md) - [CircuitPython Sin Complicaciones para la Circuit Playground Express y la Bluefruit](https://learn.adafruit.com/circuitpython-sin-complicaciones-para-la-circuit-playground-express.md) - [FruitBox Sequencer: Musically Delicious Step Pattern Generator ](https://learn.adafruit.com/circuitpython-fruitbox-sequencer-musically-delicious-step-pattern-generator.md) - [Circuit Playground Express TV Zapper](https://learn.adafruit.com/circuitpython-tv-zapper-with-circuit-playground-express.md) - [3D Print Ratcatcher 2 Controller Device](https://learn.adafruit.com/3d-print-ratcatcher-2-controller-device-wand.md) - [Using MCP23008 & MCP23017 with CircuitPython](https://learn.adafruit.com/using-mcp23008-mcp23017-with-circuitpython.md) - [What is Web MIDI & BLE MIDI?](https://learn.adafruit.com/web-ble-midi.md) - [Techno-Tiki RGB LED Torch](https://learn.adafruit.com/techno-tiki-rgb-led-torch.md) - [Make It Switch](https://learn.adafruit.com/make-it-switch.md) - [Perfect Pitch Machine](https://learn.adafruit.com/perfect-pitch-machine.md) - [Halloween Monsters with CRICKIT and Circuit Playground Express](https://learn.adafruit.com/halloween-monsters-with-crickit.md) - [Jellyfish Umbrella with easy WLED WiFi Control](https://learn.adafruit.com/jellyfish-umbrella-with-easy-wled-wifi-control.md)