Seeed K.K.の中井です。

まだまだ暑い日が続いていますがそろそろ秋ですね。そう、今年もMaker Faire Tokyoの時期が近づいてきました。例年通り、Seeed株式会社は今年も出展いたします。

出展にあたりぼちぼち準備を始めようかと思っています。Maker Faireなのでご来場していただいた方々が気軽に電子工作に触れられるようなデモを何か作れないかなと考えていたところ、手元にあったRound Display for XIAOに目が留まりました。

これは使える！

そう考えた私はデジタル万華鏡を作ろうと思い立ちました。

作っていく

今回利用するデバイスは、Round Display for XIAOとXIAO ESP32C3です。まずは表示部分の動作確認。どんな感じで表示できるのか確認していきます。ちなみにライブラリはTFT_eSPIを使います。 Spriteを作ってタイル状に描画すればそれっぽくなるだろうと正三角形を描画したスプライトを60°ずつ回転させてみます。

まずはスプライトに正三角形を描き、描画してみました。

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr = TFT_eSprite(&tft);

void setup() {
  tft.init();
  tft.setRotation(3);
  tft.fillScreen(TFT_BLACK);

  spr.setColorDepth(8);
  spr.createSprite(80, 70);
  spr.fillSprite(TFT_TRANSPARENT);

  spr.fillTriangle(0, 70, 40, 0, 80, 70, TFT_RED);
  tft.setPivot(120, 120);
  spr.pushRotated(0, (uint32_t)TFT_TRANSPARENT);
}

void loop() {
}

ディスプレイ中心(120, 120)に三角形の頂点を配置したいので、スプライト側もsetPivot()で原点をずらしてあげる必要があるようです。ディスプレイ中心(120, 120)を軸に60°回転させたスプライトも描画してみる。

  spr.fillTriangle(0, 70, 40, 0, 80, 70, TFT_RED);
  tft.setPivot(120, 120);
  spr.setPivot(40, 0);  // ←追加
  spr.pushRotated(0, (uint32_t)TFT_TRANSPARENT);
  spr.pushRotated(60, (uint32_t)TFT_TRANSPARENT); // ←追加

うまくいきそう！そう思いながら次の工程に。

続いて模様(絵柄)のテスト。模様はランダムな円を描画するようにしてみます。その際、三角形からはみ出してしまうので、模様を描画後に正三角形となるようにトリミングするようにしてみます。

uint32_t patternColor[4] = {
  TFT_RED, TFT_BLUE, TFT_GREEN, TFT_WHITE
};

void loop() {
  spr.fillCircle(random(80), random(80), random(40), patternColor[random(4)]);
  spr.fillTriangle(0, 0, 0, 70, 40, 0, TFT_TRANSPARENT);
  spr.fillTriangle(80, 0, 80, 70, 40, 0, TFT_TRANSPARENT);

  spr.pushRotated(0, (uint32_t)TFT_TRANSPARENT);
  spr.pushRotated(60, (uint32_t)TFT_TRANSPARENT);
  delay(100);
}

基本的なところはこれでOKとして、ディスプレイ全体にスプライトを描画してみました。バランスをみて正三角形の1辺を60pixに変更。

スプライトを水平反転などできればさらによさそうですが、TFT_eSPIではそのような関数が用意されていないので、これでとりあえずOKとしました。

筐体となる筒

さて、ディスプレイ側はできたので、それを組み込める適度な大きさの筒を探しました。

見つかったのは、ダイソーの「色えんぴつ(24色)」のケース。ディスプレイを重ねてみてもジャストフィット！

DIY感があって非常に気に入りました！

色えんぴつは他の入れ物に入れておくとして、筒の蓋部分にのぞき穴を開けるとそれっぽい雰囲気になりました。

電源はLi-Po

電源も筒の中に収納した方が気持ちが良さそうなので、Li-Poバッテリーを使うことにします。 Round Display for XIAOにはバッテリー接続用のコネクタがあり、充電電流は485mAということなので、500mAh以上の容量のものを使います。

出来上がり

用意した筒にRound Displayとバッテリーを組み込み、蓋を閉めれば完成です。

今回使用したデバイスは下記です。

www.seeedstudio.com

XIAO nRF52840 Senseの加速度センサを使って、動きによって模様を変化させてみても面白いかもしれません。

まとめ

今回、デモ用のデジタル万華鏡を作ってみました。この作品、10月に開催されるMaker Faire Tokyoで展示する予定です。 Maker Faire Tokyoでは、このようなDIY作品がたくさんお披露目されます。興味を持った方はMaker Faire Tokyoに参加して一緒に盛り上がりましょう！

Maker Faire Tokyo 2023

「作ることで楽しむ、学ぶ、つながる」Maker Faire Tokyoは国内最大級のメイカー(モノを作る人)の祭典です。ロボット、自作楽器、乗り物、光るアクセサリや、おもちゃなど、様々なユニークな作品がお披露目されます。

イベント名	Maker Faire Tokyo 2023
日程	2023年10月14日 12:00～18:00 2023年10月15日 10:00〜17:00
会場	東京ビッグサイト西4ホール (東京都江東区有明3-11-1)
出展名	Seeed株式会社