ブラウザで作って動かせるハロウィンプロジェクト7選

毎年10月になると、Hackster、Instructables、そしてelement14のハロウィンハッカソンに同じようないくつかの作品が戻ってきます。人が通りかかると叫ぶサーボ式の顎を備えた頭蓋骨、丸いディスプレイに映って人を追いかける目、近づくと反応する絵画、NeoPixelを詰め込んだかぼちゃ、手を差し出したときだけお菓子をくれるキャンディボウル。

私たちはそのうち7つをVelxioギャラリーの作例として、ボードファミリーごとに1つずつ再構築しました。Arduinoの部品と、パートナーであるSeeed Studio、DFRobot、M5Stack、Pimoroniのモジュールを使っています。どれも回路が配線済みでスケッチも書き終わった状態でエディタに開きます。Runを押せばコンパイルされてブラウザ上で動き出すので、配線を1本切る前にタイミングや色、しきい値を調整できます。

作例ページでhalloweenを検索すると、7つすべてが一覧表示されます。

いくつかのセクションの冒頭にある写真は、完成した小道具がどんな見た目になるかをAIで生成したイメージ図です。この記事のそれ以外の画像はすべて、Velxio上で動いている作例のキャプチャです。

開いて動かす方法

1. 表のプロジェクトリンクをクリックします。ボード、部品、配線、スケッチが揃った状態でエディタが開きます。
2. ツールバーの緑色のRunボタンを押します。スケッチは私たちのサーバーでコンパイルされ（ボードによっては初回ビルドに1分ほどかかることがあります）、その後ブラウザ上で実行されます。
3. 下部のシリアルモニターを開きます。どのスケッチも動作内容を出力するので、音を消していても小道具の反応が確認できます。
4. シミュレーション実行中にキャンバス上のセンサーをクリックすると、そのパネルが開きます。距離、明るさ、在室のスライダーはそこにあります。

1. ジャンプスケア頭蓋骨（Arduino Uno）

完成した小道具のイメージ図で、AIで生成しました。以下の回路がVelxioで動くものです。

定番のポーチ小道具です。D2のPIR人感センサーが玄関先を監視します。誰かが通りかかると、D5とD6の赤いLEDの目が最大輝度で光り、D9のサーボが顎を4回カタカタ動かし、D8のブザーが1.8 kHzからうなり声まで下がるサイレンで叫びます。来訪者のいない間は目が炭火のようにくすぶり、4秒のクールダウンで同じ人を二度驚かせないようにしています。

試すには、キャンバス上のPIRセンサーをクリックします。出力が3秒間HIGHになります。これは実際のHC-SR501で遅延ポテンショメーターを最小にしたときの動作です。

驚かせる処理全体は短い関数です。Unoのtone()はTimer2を、ServoライブラリはTimer1を使うので、叫び声と顎がタイマーを取り合うことはありません。

void scare() {
  eyes(255);
  for (int i = 0; i < 4; i++) {          // the jaw chatters four times
    jaw.write(JAW_OPEN);
    if (i == 0) scream(); else delay(160);
    jaw.write(JAW_CLOSED);
    delay(140);
  }
  eyes(40);
  lastScare = millis();
}

2. トリック・オア・トリート用キャンディディスペンサー（Arduino Uno）

完成した小道具のイメージ図で、AIで生成しました。以下の回路がVelxioで動くものです。

タッチ不要のキャンディボウルです。HC-SR04超音波センサーがシュートの下から上を向いて、10 cm以内に近づいた手を探します。見つけるとサーボがゲートを開け、キャンディを1つ落として再び閉じ、ブザーが短いジングルを鳴らし、SSD1306 OLEDが残り個数をカウントダウンします。隅には小さなジャック・オー・ランタンが描かれています。在庫が切れると画面にTRICKと表示され、代わりにブザーがあなたを嘲笑います。

HC-SR04をクリックして距離スライダーを10 cm未満にドラッグすると、手を差し出した状態になります。スケッチは手が引っ込むまで待つので、1回の手振りでキャンディ1つ、手を置きっぱなしにしてボウルを空にされることはありません。

3. 人を追いかける目（XIAO用Seeed Round Display）

完成した一対の目のイメージ図で、AIで生成しました。Velxioの作例はディスプレイ1枚で動きます。一対にするなら2枚です。

丸いTFTディスプレイの目は、昨年のelement14ハロウィンハッカソンでどこにでもありました。3Dプリントの頭蓋骨からレーダーで反応する小道具までさまざまです。これはXIAO用Seeed Round Displayを使い、背面にXIAO ESP32-S3を載せています。1.28インチのGC9A01に、オレンジの虹彩を持つ充血した眼球を表示します。

ガラスを押すと、瞳孔がポインターを追いかけます。押し続けると猫のような縦長のスリットになります。離すと再び部屋の中をひとりで見回し、数秒ごとにまばたきします。

タッチコントローラーはシールド上のCHSC6Xで、Seeed自身のドライバーと同じ方法で読み取ります。D7の立ち下がりエッジで指が触れたことを検知し、0x2Eへの5バイトのI2C読み取りで位置を取得します。各フレームはオフスクリーンのスプライトに描画してから一度にガラスへ転送するので、パネルに描きかけの目が見えることはありません。虹彩が届く範囲の174ピクセル四方だけを再描画します。血管のある縁は一度だけ描画し、まばたきのたびに描き直します。

static void drawEye() {
  frame.fillScreen(TFT_BLACK);
  drawSclera(frame, BX, BY);           // the part of the sclera inside the box
  ...                                  // iris, streaks, pupil, glint, eyelids
  frame.pushSprite(BX, BY);
}

ピンはシールド自身のものなので、同じスケッチが実機のスタックでも動きます。

一対の目にするなら2つ作ります。頭蓋骨や彫り抜きのかぼちゃの眼窩にRound Displayを2枚入れ、それぞれにこのスケッチを動かすXIAOを載せます。それぞれが独立して見回し、まばたきするので、2つの目が完全に同期しているより生きているように見えます。

4. 夕暮れに目覚めるGroveジャック・オー・ランタン（Seeed XIAO ESP32-S3）

完成した小道具のイラスト（AI生成）。以下の回路がVelxioで動くものです。

XIAO ESP32-S3にGroveモジュールを4つつなぐと、彫り抜いたかぼちゃに入れるインサートができます。 Grove光センサーは、42 LEDのUltimate RGB LED Ringを昼間は暗いままに保ちます。 暗くなるとリングはろうそくのようにオレンジと黄色に揺らめき、各LEDがそれぞれの炎を持ちます。Grove PIRが人を感知すると、かぼちゃは憑依されます。 緑と紫の渦がリングを回り、Groveパッシブブザーが不気味な曲を数小節奏でます。

試すには、光センサーをクリックしてスライダーを下げて夜にし、次にPIRをクリックしてトリガーします。

実機では、リングをXIAOの5 Vパッドから給電し（作例はそのように配線されています）、明るさを低く保ってください。42個のWS2813 LEDをフルホワイトで点灯すると、USBポートが好んで供給する量をはるかに超える電流を消費します。

5. 呪われた肖像画（DFRobot C4001 mmWaveレーダー）

完成した小道具のイラスト（AI生成）。以下の回路がVelxioで動くものです。

目が部屋を追いかける絵画は昔の縁日のトリックですが、レーダーを使えばもっと良いものになります。DFRobot C4001（SEN0610）は 人の距離を測る24 GHz mmWaveセンサーで、その信号はキャンバスや木製の額縁をそのまま通り抜けます。絵の裏に隠せば、何も気づかれません。

スケッチはレーダーをスピードモードにし、そこでは存在だけでなく距離も報告します。近づくほど肖像画の2つのLEDの目は明るく燃え、ブザーの心臓の鼓動も速くなります。6メートルで1.5秒に1回の鼓動から、近くではほぼ1秒に3回まで。1メートル以内に入ると悲鳴を上げます。

レーダーをクリックして距離スライダーをドラッグし、絵に近づいてみてください。

// 6 m away: a dim glow. Right in front: full blaze.
float closeness = constrain((FAR_M - range) / (FAR_M - SHRIEK_M), 0.0f, 1.0f);
eyes(10 + (int)(closeness * 245));

6. お化け探知機（M5Stack Core）

小道具というよりゲームで、配線が一切不要な唯一のものです。M5Stack Core Basicは、部屋の「スペクトルフィールド」を読み取る針メーターを描きます。 針は勝手にさまよい、ときどき赤いHAUNTゾーンまで跳ね上がります。そのときお化けが画面に浮かび、スピーカーがパチパチ鳴り始めます。

前面の3つのボタンが操作です。

• A は3秒間より強くスキャンするので、お化けがより頻繁に現れます。
• B は写真を撮ります。お化けが画面にいる間に捕まえると、隅のカウンターが増えます。
• C はサウンドのオンとオフを切り替えます。

メーターは8ビットのM5Canvasスプライトに描画して一度に転送するので、針のちらつきを防げます。フルスクリーンの16ビットスプライトは収まりません。 Core BasicにはPSRAMがないからです。

7. LEDマトリクスかぼちゃ（Pimoroni Stellar Unicorn）

最後の1つは純粋な飾りです。Pimoroni Stellar Unicornの16x16 RGB マトリクスが、内側のろうそくで目、鼻、ギザギザの口が光る、筋の入ったジャック・オー・ランタンになります。Aを押すと稲妻が走ってHAPPY HALLOWEENがスクロールし、Bでお化けが顔の上を漂い、LUXの+と-で明るさを設定できます。

顔はスケッチ内の16×16の文字グリッドで、LED1つにつき1文字なので、表情を変えるのはテキストを編集するだけです。

実機で動かすには

スケッチは、ベンチで使うのと同じライブラリとピンに合わせて書かれているので、シミュレーターから実機の製作へ移るのは、主に電源と機構の問題です。

• サーボはUnoの5 Vレギュレーターが嫌う電流スパイクを引き起こします。ドクロとディスペンサーでは、サーボに専用の5 V電源を与え、グラウンドを共通にしてください。
• 実際のPIRは電源投入後、落ち着くまで約1分かかり、その間には勝手に数回発火します。
• LEDリングは5 Vから給電し、それに見合った電源を用意しない限りsetBrightness()を低く保ってください。
• C4001は薄い木材、段ボール、布は透過しますが金属は透過しないので、額縁の吊り金具に注意してください。

制限事項

• レーダー、光センサー、超音波センサーはスライダーで駆動されます。実際のセンサーが与える数値をスケッチに渡すのであって、物理的なシーンを再現するわけではありません。
• サウンドはブラウザを通して再生されます。ブザーの部分はピンが生成する周波数に従いますが、実際のピエゾの音量や音色をモデル化しているわけではありません。

1つ開いて、変更して、自分の玄関を怖がらせるバージョンを作ってみてください。 ハッピーハロウィン。