Coding Color Patterns

Learning, Tutorial

The Bright Board code blocks for patterns are simple but surprisingly powerful tools for generating fun animations and effects on the Bright Board LEDs. This tutorial covers how to use some different pattern blocks to create dynamic, attractive patterns on the Bright Board.

All of the examples below use the MakeCode micro:bit code editor to program the micro:bit. You’ll need to add the Bright Board extension menu to the MakeCode micro:bit code editor before using the Bright Board code blocks. If you’re not sure of how to include the Bright Board extension, this tutorial will explain how.

The Bright Board code blocks for patterns are simple but surprisingly powerful tools for generating fun animations and effects on the Bright Board LEDs. This tutorial will discuss the functions of the different pattern blocks and some ways to use them to create dynamic, attractive patterns on the Bright Board.

Rotating Rainbow Pattern

The rotating rainbow pattern shown below comes from the code at right which uses the “set pattern” block to explicitly set the color of each LED on the Bright Board.

The MakeCode blocks program shown at right uses a “set pattern” block:

and a pattern block of 12 colors, which allows you to set the individual colors of the 12 Bright Board LEDs:

You’ll need to drag the pattern block from the menu, into the “set pattern” block as shown below:

Click on any colored oval to get a color menu and set the color for the corresponding LED.

The “set patttern” block won’t change the colors displayed on the Bright Board. Instead, the changes are written to a buffer – a place data is stored in the computer program. To send the new colors to the Bright Board LEDs requires the “show” block.

After the “show” block displays the colors, the “pause” block makes the program wait for 200 milliseconds (2/10 second) before moving on. Without the “pause” block, the display would change so quickly, it would be hard to observe any specific pattern.

The last block in the forever loop is a “rotate pixels by” block, which shifts each color around the circle by one space.

All code blocks in the “forever” loop repeat indefinitely, creating a rotating rainbow effect.

Theater Chase Pattern

The Theater Chase pattern below uses the “set pattern” code block with a repeating pattern of only two colors. Because only two colors are specified, the pattern is duplicated until all LEDs on the Bright Board are filled.

The rest of the code blocks are the same as those in the Rainbow Rotation pattern. We use the “rotate pixels by 1” code block to make the pattern move, and the “show” block to cause the colors to show up on the LEDs.

Customizing Pattern Blocks

We’ve seen that you can set the colors in a pattern block by clicking each ovals to select a color. You can also change the number of colors in each repeating pattern. For example, if we’d like to make a repeating pattern that has four colors, we can start with the “set pattern” block, and click the “+” sign to add more colors in the pattern, up to a maximum of 12 color elements.

Clicking the “+” sign once, changes the block to a three color pattern:

And clicking the “+” sign again changes it to a 4 color pattern:

By default, any new colors added to the pattern start out black, but you can easily change them by clicking on the ovals

You can even customize the colors beyond the options in the dropdown menu with the “RGB” and “HSL” blocks.

Pattern code blocks are a simple way to generate interesting color displays on the Bright Board with only a single (or a few) code blocks. Can you figure out what code block generated this image?