プログラミング

【Arduino】WS2812C搭載ネコユニットをグラデーションで光らせるコードの紹介

今回はスイッチサイエンスさんの「WS2812C搭載ネコユニット」を好きな2色でグラデーションを作り光らせるコードを作成したので紹介します。

👆実際にこのコードを使用してWS2812C搭載ネコユニットを光らせている様子。字幕にもある通り、色と点灯速度、色が切り替わる速度、LEDを消灯させる個数を変更することができます。また、今回はボタンによるモード切り替えについても少し解説します。

使用するライブラリについて

今回は Adafruit_NeoPixel.h というライブラリを使用します。WS2812C搭載ネコユニットを制御するのに使用し、Arduino IDEのライブラリマネージャーからインストール可能です。また、NeoPixelに互換のあるLEDでも今回のコードは使用できます。
M5AtomS3.hというライブラリも使用していますが、AtomS3モジュールを使用しない場合は、このライブラリは不要です。

コード全体の紹介

まずは、コード全体の大まかな説明をします。詳細な解説は「コードのゆる解説」でするため、まずはこちらで全体の処理をふんわりと理解してください。

こちらが今回紹介するコードの全体像です。

  1. #include <M5AtomS3.h>
  2. #include <Adafruit_NeoPixel.h>
  4. // 変数の宣言
  5. volatile int mode_now = 0; // モードの切り替え
  6. // mode 0:動作A　RoyalBlue & Snow
  7. // mode 1:動作B DarkGrean & PureGrean
  8. // mode 2:動作C Red & Gold
  10. // モードの設定
  11. const int LED_colorsA[3][3] = {{55,90,225},{0,128,0},{255,0,0}};
  12. const int LED_colorsB[3][3] = {{230,230,250},{152,251,152},{255,215,0}};
  13. // LED制御用の変数
  14. #define DELAYVAL 5 // ループに使用するディレイ
  15. float LED_lv = 0; // 点灯させる場所
  16. float LED_color_lv = 0; // 色変化率
  17. const float d_LED_lv[3] = {0.5, 0.7, 1}; // 点灯速度, 1を超えると飛び飛びに
  18. const float d_LED_color_lv[3] = {0.03, 0.09, 0.22}; // 色の切り替え速度
  19. const int off_LED_nums[] = {10, 5, 0}; // 消灯させるLEDの数
  21. // ネコミミPIN, インスタンス作成
  22. #define PIN 2 // ネコ耳LEDに接続するピン
  23. #define NUMPIXELS 70 // ネコ耳モジュールは左右合わせて35 * 2 の 70LED
  24. Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
  26. void setup() {
  27.   // AtomS3モジュールを初期化
  28.   AtomS3.begin();
  30.   // ネコ耳用モジュールの初期化
  31.   pixels.setBrightness(20);
  32.   pixels.begin();
  33. }
  35. void loop(void) {
  36.   // ボタンでのモード切り替え
  37.   AtomS3.update();
  38.   if (AtomS3.BtnA.wasPressed()) {
  39.     // 押したらモード切り替え : 0, 1, 2, 0, 1, 2...
  40.     if (mode_now < 2){
  41.       mode_now++;
  42.     } else if (mode_now == 2){
  43.       mode_now = 0;
  44.     }
  45.   }
  46.   
  47.   delayWithLED(50);
  48. }
  50. void delayWithLED (int delay_time){ // delay_timeは5msの倍数で指定
  51.   for (int i = 0; i < delay_time; i += DELAYVAL){
  52.     // LEDの処理
  53.     // 点灯箇所, 色の切り替えのための変数の処理
  54.     LED_lv += d_LED_lv[mode_now];
  55.     LED_color_lv += d_LED_color_lv[mode_now];
  56.     if ((int)LED_lv >= NUMPIXELS) { // 一番端まで行ったらスタートへ
  57.       LED_lv = 0;
  58.     }
  59.     if (LED_color_lv > 2.0 * PI) { // LED_color_lvがオーバーフローしないよう調節
  60.       LED_color_lv -= 2.0 * PI;
  61.     }
  63.     // 点灯する箇所のRGBを計算
  64.     int color[3];
  65.     for(int i = 0; i < 3; i++){
  66.       color[i] = (int)( (float)LED_colorsA[mode_now][i] * (sin(LED_color_lv) + 1) / 2
  67.                       + (float)LED_colorsB[mode_now][i] * (1.0 - (sin(LED_color_lv) + 1) / 2));
  68.     }
  70.     // 少し先を消すことで点灯を強調
  71.     if ((int)LED_lv + off_LED_nums[mode_now] < NUMPIXELS){
  72.       pixels.setPixelColor((int)LED_lv + off_LED_nums[mode_now], pixels.Color(0, 0, 0));
  73.     } else {
  74.       pixels.setPixelColor((int)LED_lv + off_LED_nums[mode_now] - NUMPIXELS, pixels.Color(0, 0, 0));
  75.     }
  76.     // 現在光らせたい箇所を点灯
  77.     pixels.setPixelColor((int)LED_lv, pixels.Color(color[0], color[1], color[2]));
  79.     pixels.show();
  80.     delay(DELAYVAL);
  81.   }
  82. }

このコードでは、初めに宣言した変数を元に、delayWithLED関数によって、点灯箇所、色を計算しそれを反映させます。delayWithLED()関数はLED_lv, LED_color_lvというfloat型の変数を計算、それを元にLEDを光らせる場所、色の配合割合を計算します。

LED_lvは0〜69の値を取り、d_LED_lvずつ増加し、点灯させる位置を少しずつ変えます。
一方、LED_color_lvは0〜2πの値を取り、d_LED_color_lvずつ増加し、色の配合割合を変えます。
色の配合は色Aに (sin(LED_color_lv) + 1) / 2 、色Bに 1 - (sin(LED_color_lv) + 1) / 2 を掛けたものを合計することで行います。

また、int型の変数mode_nowの値によって、配列から取り出す変数を変えることで使用する色や速度のモードを変更しています。今回はM5AtomS3のボタンを使用したため、loop関数内ではボタンを押したらモードを切り替える処理があります。この処理は、時間で切り替え、もしくは他のボタンやセンサーで切り替えてもいいと思います。WS2812C搭載ネコユニットにもボタンがついているためそちらで処理をしてもいいと思います。

コードのゆる解説

ここからはゆるくコード全体の解説をしていきます。コード全体の紹介でわからない箇所があればこちらをご確認ください。

ライブラリの呼び出し部分です。M5AtomS3.h はM5STACKさんのAtomS3のボタンを使用するために呼び出していますが、他のマイコンを使う方は不要です。
Adafruit_NeoPixel.h はWS2812C搭載ネコユニットを動かすのに使用するために使用します。Arduino IDEのライブラリマネージャーでインストール可能です。

  1. #include <M5AtomS3.h>
  2. #include <Adafruit_NeoPixel.h>

ここでは、delayWithLED()関数で使用する変数を宣言します。今回は3つのモードを切り替えられるよう、長さ3の配列を色々準備していますが、用意したいモードの数に応じて配列の長さを変えてください。

  1. // 変数の宣言
  2. volatile int mode_now = 0; // モードの切り替え
  3. // mode 0:動作A　RoyalBlue & Snow
  4. // mode 1:動作B DarkGrean & PureGrean
  5. // mode 2:動作C Red & Gold
  7. // モードの設定
  8. const int LED_colorsA[3][3] = {{55,90,225},{0,128,0},{255,0,0}};
  9. const int LED_colorsB[3][3] = {{230,230,250},{152,251,152},{255,215,0}};
  10. // LED制御用の変数
  11. #define DELAYVAL 5 // ループに使用するディレイ
  12. float LED_lv = 0; // 点灯させる場所
  13. float LED_color_lv = 0; // 色変化率
  14. const float d_LED_lv[3] = {0.5, 0.7, 1}; // 点灯速度, 1を超えると飛び飛びに
  15. const float d_LED_color_lv[3] = {0.03, 0.09, 0.22}; // 色の切り替え速度
  16. const int off_LED_nums[] = {10, 5, 0}; // 消灯させるLEDの数

LED_colorA と LED_colorB は モードの数 ✖️ RGB の長さのint型の配列です。RGBの値は各モードで表示させたい色をAとBの同じ配列番号に入れてください。RGBの値は「RGB カラーコード 一覧」などでお好みの色を見つけてください。

d_LED_lv と d_LED_color_lv 、off_LED_nums はコメントアウトにあるように、それぞれ点灯速度、色の切り替え速度、消灯させるLEDの数になります。こちらも配列番号がモードの番号と一致するように入力してください。

♦︎ 小話 Arduinoでは配列の長さを書かなくても良い？ ♦︎
今回、記事を書いていて気づいたのですが、Arduinoではoff_LED_nums[] のように配列の長さを指定せずに記述することでできるようです。コンパイル時に配列の長さが自動的に決められるとのことですが...私が、最初に勉強したプログラム言語と異なる仕様なので少し恐ろしいです。
予期しないミスや動作に繋がると思うので、なるべく配列の長さは記述することを推奨します。

ここでは、Adafruit_NeoPixelのインスタンスをpixelsという名前で宣言しています。
PIN番号は適宜変更する必要があります。また、ネコユニットを半分しか使わない場合やよりたくさんのネコユニットを繋げる場合はNUMPIXELの数を変更する必要があります。
（今回のコードはユニットを連結させることを前提としたコードのため、別々のピンに接続する場合などはインスタンスを複数宣言し、delayWithLED()関数でインスタンスの切り替え処理などを追加する必要があります。）

  1. // ネコミミPIN, インスタンス作成
  2. #define PIN 2 // ネコ耳LEDに接続するピン
  3. #define NUMPIXELS 70 // ネコ耳モジュールは左右合わせて35 * 2 の 70LED
  4. Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

setup()関数ではAtomS3のモジュールの初期化とネコ耳用のモジュールの初期を行います。AtomS3でないデバイスの場合やAtomS3のボタンを使わない場合は27, 28行目は不要です。
また、pixels.Brightness(20); ではネコユニットの明るさを指定しています。スイッチサイエンスさんのネコユニットの販売ページでは"長時間輝度を最大にするとLEDが焼き切れる恐れがあるので、輝度は256段階中20程度に設定することをお勧めします"とあるので20、もしくはそれ以下にした方がいいでしょう。

  1. void setup() {
  2.   // AtomS3モジュールを初期化
  3.   AtomS3.begin();
  5.   // ネコ耳用モジュールの初期化
  6.   pixels.setBrightness(20);
  7.   pixels.begin();
  8. }

loop()関数ではボタンでのモード切り替えとdelayWithLED関数の呼びだしをしています。今回はAtomS3ボタンを押すことでモードの切り替えを行なっていますが、時間や他のセンサーなどで切り替えてもいいと思います（下に10秒ごとにモードを切り替えるVerを載せています）。ネコユニット自体にもボタンがあるので少し押しづらいですがそちらもご検討ください。

  1. void loop(void) {
  2.   // ボタンでのモード切り替え
  3.   AtomS3.update();
  4.   if (AtomS3.BtnA.wasPressed()) {
  5.     // 押したらモード切り替え : 0, 1, 2, 0, 1, 2...
  6.     if (mode_now < 2){
  7.       mode_now++;
  8.     } else if (mode_now == 2){
  9.       mode_now = 0;
  10.     }
  11.   }
  12.   
  13.   delayWithLED(50);
  14. }

10秒（10,000ミリ秒）でコードを切り替える場合、loop()関数はこのようなコードになります。上記のボタンで切り替えるコードのボタンの更新, ボタンが押されているかの条件をなくし、delayWithLED()関数に渡す時間を変更しました。こちらもご活用ください。

  1. void loop(void) {
  2.   delayWithLED(10000);
  4.   // 10秒ごとにモード切り替え : 0, 1, 2, 0, 1, 2...
  5.   if (mode_now < 2){
  6.     mode_now++;
  7.   } else if (mode_now == 2){
  8.     mode_now = 0;
  9.   }
  10. }

delayWithLED()関数では与えられた時間 delay_time を短い時間 DELAYVAL に区切り、光らせる色・場所の計算、LEDの消灯、LEDの点灯、待機を繰り返します。少し長いコードですが、してること一つ一つは非常にシンプルです。

  1. void delayWithLED (int delay_time){ // delay_timeは5msの倍数で指定
  2.   for (int i = 0; i < delay_time; i += DELAYVAL){
  3.     // LEDの処理
  4.     // 点灯箇所, 色の切り替えのための変数の処理
  5.     LED_lv += d_LED_lv[mode_now];
  6.     LED_color_lv += d_LED_color_lv[mode_now];
  7.     if ((int)LED_lv >= NUMPIXELS) { // 一番端まで行ったらスタートへ
  8.       LED_lv = 0;
  9.     }
  10.     if (LED_color_lv > 2.0 * PI) { // LED_color_lvがオーバーフローしないよう調節
  11.       LED_color_lv -= 2.0 * PI;
  12.     }
  14.     // 点灯する箇所のRGBを計算
  15.     int color[3];
  16.     for(int i = 0; i < 3; i++){
  17.       color[i] = (int)( (float)LED_colorsA[mode_now][i] * (sin(LED_color_lv) + 1) / 2
  18.                       + (float)LED_colorsB[mode_now][i] * (1.0 - (sin(LED_color_lv) + 1) / 2));
  19.     }
  21.     // 少し先を消すことで点灯を強調
  22.     if ((int)LED_lv + off_LED_nums[mode_now] < NUMPIXELS){
  23.       pixels.setPixelColor((int)LED_lv + off_LED_nums[mode_now], pixels.Color(0, 0, 0));
  24.     } else {
  25.       pixels.setPixelColor((int)LED_lv + off_LED_nums[mode_now] - NUMPIXELS, pixels.Color(0, 0, 0));
  26.     }
  27.     // 現在光らせたい箇所を点灯
  28.     pixels.setPixelColor((int)LED_lv, pixels.Color(color[0], color[1], color[2]));
  30.     pixels.show();
  31.     delay(DELAYVAL);
  32.   }
  33. }

// 点灯箇所, 色の切り替えのための変数 では、点灯箇所 LED_lv と色の切り替え度合い LED_color_lv を計算します。
点灯させる箇所である LED_lv にそのモードの点灯速度である d_LED_lv を加算し、色の切り替え度合い LED_color_lv にそのモードの色の切り替え速度 d_LED_color_lv を加算します。
また、点灯箇所 LED_lv はLEDの存在する範囲である必要があるため、NUMPIXELSを超えたら左端の0へ移動させています。色の切り替え度合い LED_color_lv はサイン関数に入れるため、範囲の制限は内容に思えますがオーバーフローといいfloat型の変数の上限を超えてしまう可能性を考えて、2πを超えたら2πを引くようにしています。

// 点灯する箇所のRGBを計算 では、色の切り替え度合い LED_color_lv と各モードの色が指定されている LED_colorsA, LED_colorsB をもとに点灯箇所の色を計算します。
片方の色Aに (sin(LED_color_lv) + 1) / 2 を もう片方の色Bに (1.0 - (sin(LED_color_lv) + 1) / 2)) を掛け足し合わせることで 色A→中間色→色B→中間色→色A→... のように滑らかに色を変化させています。
計算結果を格納するためのint型の配列 color[3] の配列番号0に赤R、配列番号1に緑G、配列番号2に青Bの計算結果を格納しています。この計算はfloat型で行いましたが、色を指定する際は0〜255の整数値で指定する必要があるため、(int)( /* float型の計算結果 */ ) のようにint型に変更しています（このような型変換をキャストと言います）。

// 少し先を消すことで点灯を強調 と // 現在光らせたい箇所を点灯 ではNeoPixelの setPixelColor()メソッド によって消灯と点灯を行なっています。setPixelColor()メソッド は第1引数に光らせたい位置、第2引数に点灯させたい色を入れることで好きな位置を好きな色で点灯することができます。ここで、今回使用するNeoPixelのメソッドを軽く紹介します。

計算した場所、色をもとに光らせたいため、77行目では③setPixelColor()メソッドを第一引数をint型にキャストした LED_lv、第二引数を color[3] をもとに④Color()メソッドで作成した色で呼び出しています。また、点灯を強調するために off_nums[mode_now] 分先のピクセルを消す（RGBを0, 0, 0にセット）する処理を71〜75行目で行なっています。セットするだけでは反映されないため、show()メソッドを最後に呼び出しています。

少し長くなりましたが、これで今回のコードの説明は以上です。是非、お試しください。

まとめ

今回は「WS2812C搭載ネコユニット」を好きな2色でグラデーションを作り光らせるコードを紹介しました。ネコユニットに限らず、NeoPixelを使うものなら同様に使用できます。
それでは、良きネコ耳ライフをお過ごしください！

謝辞

このコードはTechSeeker Hackathon 2024の成果物の一部です。このような学習の機会を用意してくださった方々、同じチームとして支えてくださったデジもく会のみなさんに感謝します。本当にありがとうございました。

-プログラミング
-, ,