創って学ぼうプログラミング(36) マイクロビットでフルカラーLEDを使ってみよう

フルカラーLEDを使ってみよう

　今回はKeyestudioのフルカラーLEDモジュール(Keyestudio SK6812 4X8 LED Matrix Shield for BBC micro bit)を使ってみます。LEDは4×8で合計32個あります。LEDはNeoPixelを使用しておりマイクロビットで拡張機能を利用することで手軽に扱うことができます。なお、このフルカラーLEDは5V〜9V必要と書かれています。このため、LEDシールド横にあるコネクタから電力を供給しないと期待通りに光りません。電力が不足しているとまったく光らないか、よくて赤色だけが表示されることになります。
　5V以上の電力を供給する際、前回までに使用したKeyestudioのシールドを利用する方法があります。Keyestudioのシールドでは3.3Vを出力するか5Vを出力するかをジャンパーで変更できるようになっています。出荷時はV1ラインに5Vが供給されているので、このV1ラインからフルカラーLEDに電力を供給することができます。（本記事でもKeyestudioのシールドから5Vの電力を供給しています。V2から供給してしまうと3.3Vなので青色LEDが光りません）

　今回使用するフルカラーLEDは以下の製品です。

Keyestudio SK6812 4X8 LED Matrix Shield for BBC micro bit https://www.keyestudio.com/keyestudio-sk6812-4x8-32-bit-led-dot-matrix-shield-for-micro-bit-p0487-p0487.html

詳しい資料は以下のサイトにあります。

https://wiki.keyestudio.com/Ks0315_Keyestudio_SK6812_4x8_LED_Matrix_Shield_for_BBC_micro_bit
https://drive.google.com/file/d/1JWK7-ZZGWbOVsMISmqLJVuAssszcW4W_/view

　マイクロビットとは以下のように接続します。また、フルカラーLEDには直接5V電源を供給します。なお、フルカラーLEDは常にマイクロビットのP3端子に接続され、変更することはできません。

フルカラーLEDモジュールを読み込む

　フルカラーLEDモジュールを使うためには拡張機能を読み込む必要があります。「拡張機能」の項目が表示されていない場合は「高度なブロック」の項目をクリックします。

「拡張機能」の項目をクリックします。

拡張機能一覧が表示されます。一覧に「neopixel」の項目があれば、それをクリックします。

「neopixel」の項目が見当たらない場合は、画面上部にある検索ボックスにneopixelの文字を入力して検索ボタン（虫眼鏡）をクリックします。

「neopixel」の項目が表示されるのでクリックします。

するとneopixelモジュールの拡張機能が読み込まれます。

LCDモジュールで使えるブロックは以下のようになっています。

これでフルカラーLEDモジュールを使う準備ができました。なお、プログラムを転送する前にフルカラーLEDに電力を供給しておいてください。後からでも動作しますが、電源投入時に誤動作することがあります。

特定の色を点灯させる

　それでは最初にLED全体に特定の色を点灯させてみます。電力不足でも赤色は何とか点灯しますので、最初に赤色を点灯するだけのプログラムを作成します。
　フルカラーLEDは最初に使用するLEDの数や接続端子を設定する必要があります。まず、Neopixelのカテゴリをクリックします。矢印で示すブロックを「最初だけ」のブロックにはめこみます。

　次に端子をP3に、接続しているLEDの数を32に変更します。

　次に点灯させる色を指定します。Neopixelのカテゴリにある矢印で示すブロックを「ずっと」のブロック内に配置します。

　これでできあがりです。実際のブロックは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

let strip: neopixel.Strip = null
strip = neopixel.create(DigitalPin.P3, 32, NeoPixelMode.RGB)
basic.forever(function () {
    strip.showColor(neopixel.colors(NeoPixelColors.Red))
})

　プログラムをダウンロードしマイクロビットに転送して動作を確認します。LEDが赤色に点灯したでしょうか。かなり明るいLEDのため赤色というよりも紫や白っぽい感じになってしまっているかもしれません。他の色に変えてどうなるか確認してみてください。

指定した位置にあるLEDを点灯させる

　それでは次に指定した位置にあるLEDを点灯させてみましょう。Neopixelのブロックには座標を指定して表示するものがありますが、残念ながらKeyestudioのフルカラーLEDでは使えません。このフルカラーLEDはNeopixelブロックをすべて利用できるわけでなく一部の機能しか対応していないためです。
　このため、特定の位置にあるLEDを点灯させるには範囲を指定して、その後点灯させるという手順になります。　範囲を指定するブロックは図で示す矢印のものになります。

　LEDの位置はマイクロビットのマイクロUSB端子が上にある場合、右下が0で左上が31になります。XY座標ではなく右下からの順番になります。

　ブロックで位置と個数を指定します。ここでは4の位置から（5番目）1個目にあるLEDを赤色に点灯させてみます。　プログラムは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

let range: neopixel.Strip = null
let strip: neopixel.Strip = null
strip = neopixel.create(DigitalPin.P3, 32, NeoPixelMode.RGB)
strip.showColor(neopixel.colors(NeoPixelColors.Black))
range = strip.range(4, 1)
basic.forever(function () {
    range.showColor(neopixel.colors(NeoPixelColors.Red))
})

　プログラムをダウンロードしマイクロビットに転送して動作を確認します。指定した位置のLEDが点灯します。

＊右下のLEDが緑色に点灯していますが気にしないでください。（モジュールが壊れてしまった可能性もあります）

　それでは次にLEDの点を移動させてみましょう。LEDの点を移動させるには変数を作成します。ここではpointerという名前にしています。このpointerに1を足していきます。LEDの点灯範囲をpointerから1個だけにします。pointerの値が32になったら0に戻します。これはLEDの数が32個だからです。　実際のプログラムは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

let pointer = 0
let range: neopixel.Strip = null
let strip: neopixel.Strip = null
strip = neopixel.create(DigitalPin.P3, 32, NeoPixelMode.RGB)
pointer = 0
basic.forever(function () {
    range = strip.range(pointer, 1)
    strip.showColor(neopixel.colors(NeoPixelColors.Black))
    range.showColor(neopixel.colors(NeoPixelColors.Red))
    pointer += 1
    if (pointer == 32) {
        pointer = 0
    }
    basic.pause(200)
})

　プログラムをダウンロードしマイクロビットに転送して動作を確認します。LEDの点灯場所が変わっていきます。

カラフルなLED表示にする

　Neopixelのブロックには表示されているLEDの色をスライドさせていくものがあります。これを利用すると簡単にカラフルなLED表示ができます。

　また、フルカラーを指定するためのブロックがあります。

　これらのブロックと乱数を組み合わせます。輝度は0〜255ですが、あまりに明るいようであれば0〜128など値を調整してください。数値が大きいほど明るくなります。　実際のプログラムは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

let range: neopixel.Strip = null
let strip: neopixel.Strip = null
strip = neopixel.create(DigitalPin.P3, 32, NeoPixelMode.RGB)
range = strip.range(0, 1)
basic.forever(function () {
    range.showColor(neopixel.rgb(Math.randomRange(0, 255), Math.randomRange(0, 255), Math.randomRange(0, 255)))
    strip.shift(1)
    basic.pause(100)
})

　プログラムをダウンロードしマイクロビットに転送して動作を確認します。右下に点灯したLEDの色が1つずつずれていきます。

RGBではなく色相だけを変化させるブロックを使うとレインボーカラーでアニメーションさせることができます。なお、明るすぎて色がわかりにくいため、輝度を指定するブロックを配置します。　実際のプログラムは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

let Hue = 0
let range: neopixel.Strip = null
let strip: neopixel.Strip = null
strip = neopixel.create(DigitalPin.P3, 32, NeoPixelMode.RGB)
range = strip.range(0, 1)
Hue = 0
range.setBrightness(50)
basic.forever(function () {
    range.showColor(neopixel.hsl(Hue, 100, 25))
    strip.shift(1)
    Hue += 10
    if (Hue > 360) {
        Hue = 0
    }
    basic.pause(50)
})

　プログラムをダウンロードしマイクロビットに転送して動作を確認します。レインボーカラーのアニメーションが表示されます。

マイクロビットには明るさを検知するセンサーがあるので、これを利用して部屋が暗くなったらフルカラーLEDを点灯したり、部屋の明るさに応じてLEDの明るさを変化させてみるとよいでしょう。

著者古籏一浩
プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム（mz-700版 SPACE HARRIER）の話などを書いたりしています。
著者サイト：http://www.openspc2.org/