Show HN: JavaScriptで動くフリップディスクディスプレイの製作記

 (flipdisc.io)
2 ポイント 投稿者 GN⁺ 2024-06-26 | 1件のコメント | WhatsAppで共有
  • 光るLEDの代わりに物理的に反転するディスクを使って、オフィス向けのインタラクティブなウォールアートを制作し、9枚のAlfaZetaパネルを3x3に配置して84x42ディスプレイを構成
  • ハードウェアは24V 10A電源、80/20アルミフレーム、RS485配線、Nvidia Orin Nanoで構成され、高フレームレートを狙うならRS485ライン1本あたり6枚以下のパネルに制限する必要がある
  • ソフトウェアは、RS485フレームとRLE圧縮を処理するNode.jsライブラリflipdisc、シーンキュー・REST API・WebSocket・レンダリングループを担うflipdisc-serverに分かれる
  • レンダリングにはPIXI、Three.js、Matter.js、GSAP、node-canvas、node-glを活用し、MediaPipeのジェスチャ認識はNodeからPythonスクリプトを実行してZeroMQ IPCで結果を受け取る
  • 42x84解像度では、3x5ピクセルフォントやFloyd-Steinberg・Bayerディザリングのような低解像度向けの表現設計が実用性を大きく左右する

なぜフリップディスクなのか

  • フリップディスクは、電磁パルスで小さなディスクを2色の間で反転させるディスプレイで、80年以上前に発明されたが、基本原理は今でもほとんど変わっていない
  • LED画面の明るく滑らかな印象ではなく、物理的な動きと音を持つオフィス向けの大型インタラクティブウォールアートを作るために選択した
  • 高い視認性、長寿命、25〜60fpsの動作、ディスクが反転するときに鳴る雨音のようなサウンドが特徴
  • 以前にコードの可視化のために作ったpixel knitting appや、Atom Editor向けのcrafting toolと同様に、コードと物理メディアを組み合わせる実験として取り組んでいる

ハードウェア構成

  • 9枚のAlfazeta panelsを3x3グリッドで配置し、84x42ディスクディスプレイを作成
    • 各ボードは28x7パネル2枚で構成される
    • PCBには旧式のATMEGA128 microcontroller、数百個のMELFダイオード、DIPスイッチ2個が載っている
    • 1つのDIPスイッチはアドレス、もう1つはボーレートを設定する
    • AlfaZetaボードの詳細はmanualで確認できる
  • フリップディスクのボードや部品は入手が難しく、現在の市場は一般消費者よりも輸送業界のような法人需要に向いている
    • 作り直すなら独自ボード設計を試す価値もある
    • ファームウェアへのアクセス権があれば性能チューニングに有利
    • パネル費用がすぐに膨らむため、より大きなサイズへの拡張は難しい
  • 参考になる供給元と製品

電源、フレーム、配線

  • ディスプレイはボード1枚あたり24V 1Aが必要で、9枚の全ボードですべてのドットを反転させるには合計9Aが必要
  • フレームは80/20 aluminum extrusionsで作り、PCBスタンドオフをフレームに直接固定
    • ボードとディスクは非常に壊れやすく、組み立て中にディスクを失ったり割ったりしやすい
    • ディスクは蝶の羽にたとえられるほど脆弱で、端を持ってボードを1枚ずつ慎重に取り付ける必要がある
    • 完成写真はphotos of the final buildにある
  • 使用した80/20部品
  • 配線は各列を直列接続し、その全体をチェーン化
    • データラインはRS485ブロックターミナルの+/-を使用
    • 電源ラインは18AWG、データは22AWG shielded cableを使用
    • 高フレームレートを狙うならRS485ライン1本に6枚以下のパネルを接続すべき
    • ディスプレイ全体ではUSB RS485 devicesを3台使用
    • 外部サーバーからコンテンツを配信するならRS485 to ethernet serversも選択肢になる

処理装置と入出力

  • 音声、映像、画像の処理に機械学習を使うため、一般的なシングルボードコンピュータやマイクロコントローラより多くの処理性能が必要
  • 実際の構成ではNvidia Orin Nanoを使用
  • Jetson 6.0向けにデプロイするためのDockerfileを作成し、MediaPipeのGPU有効化のためソースからコンパイルする必要がある
  • より簡単な選択肢としてはM2 Mac Miniを勧めており、インタラクションを省くならRaspberry Piのようなより安価な方法でも可能

ボード通信とNode.jsドライバ

  • ボード通信にはRS485を使い、フレームフォーマットは0x80 0x83 0x01 imageData 0x8F構造
    • 各フレームは開始バイト0x80で始まる
    • 続いてflush 0x83またはbuffer 0x84、ボードアドレス、画像データ、終了バイト0x8Fが入る
    • 画像データは2状態0、1のみを使う
    • 転送フレームの圧縮にはRLEを使用
  • Node.js向けの基本ライブラリflipdiscを作成し、現在はUSBとethernet経由でAlfaZetaおよびHanoverボードで動作する
  • canvasインスタンスのctx.getImageData(0, 0, width, height)データを直接送信でき、ピクセルデータはluminanceに応じて1または0に変換される
  • インストールとドキュメント

レンダリング、インタラクション、サーバー構成

  • 目標は、事前レンダリングしたアセットを低消費電力デバイスに表示することではなく、ユーザーのフィードバックを直接受けるリアルタイム可視化を作ること
  • レンダリングには既存のWeb技術を活用
    • PIXI: 一般的な2Dレンダリング
    • Three.js: 3Dレンダリング
    • Matter.js: 物理エンジン
    • GSAP: アニメーション
    • node-canvasとnode-gl: サーバーサイドレンダリング
  • インタラクションにはGoogleのMediaPipe librariesとモデルを使用
    • ジェスチャ認識デモはGesture Recognizingを参照
    • 多くのMLライブラリはPythonを使うため、NodeからPythonスクリプトを実行し、ZeroMQ IPCでデータを受け取る
    • 将来的にはPython WASMを使う可能性もある
  • 可視化はそれぞれ**シーン(scene)**として表現され、キューに追加できる
    • シーン再生とキュー管理にはREST APIでアクセスする
    • リアルタイム再生データはWebSocketで送信
    • useLoop functionでイベントを購読したりレンダリングキューに追加したりできる
    • 各sceneファイルはsceneとschemaを返す必要があり、任意でbackground taskを持てる
    • background taskは指定間隔で実行され、成功すると再生キューにsceneを追加する
  • サーバーパッケージと例
  • flipdisc-serverが処理する機能
    • ディレクトリからsceneを読み込む
    • sceneファイルのlive reload
    • キューにsceneを追加するbackground task
    • テキスト、画像、リスト用UIコンポーネント
    • Yogaベースのflex layout
    • pixi/three/matterの基本getterとセットアップ、追加モジュールの接続
    • RESTサーバーとリアルタイムデータ用WebSocket
    • レンダリングループとGLSL shaderの使用

操作用アプリ

  • 時間が経つとどのコマンドを実行すべきか忘れてしまい、プロジェクトを再び使うのが難しくなる問題を避けるため、安定したインターフェースを別途作成
  • 高速なプロトタイピングのためにexpoアプリを選択
  • アプリからディスプレイのpause、start、skip、previousを操作できる
    • scene変数を設定して体験をパーソナライズできる
    • 画面に直接自由に描ける
    • App StoreからFlipdiscを入手可能
  • アプリ機能
    • sceneの一時停止/再生
    • キューへの追加または削除
    • キュー内で次/前へ移動
    • 現在ディスプレイに表示中の画面をリアルタイム確認
    • 画面に自由に描画
    • 各sceneにconfiguration variableを送信

低解像度でのデザイン

次のステップと参考プロジェクト

  • 次の目標は、新しいマルチモーダル入出力を活用して、AIのための透明なエージェントインターフェースを作ること
  • この機能は次世代モデルの公開を待ってから進める予定
  • フリップディスクがホビイストにとってもっと身近になることを願っており、低価格なフリップディスクハードウェアの協業に興味があれば連絡してほしいとしている
  • インスピレーションを受けたプロジェクトと資料

関連記事

1件のコメント

 
GN⁺ 2024-06-26
Hacker News のコメント

  • 「ほぼ無限の寿命」と言うには、期待するほど無限ではないかもしれない。ディスクが外れたり引っかかったりすることがかなりあるが、きちんと動作しているときは本当に見事で、特に音が良い
    以前フリップドットディスプレイのあるオフィスにいて、その後そのディスプレイを分解した。引っかかったディスクがどんな見た目か撮っておいた写真がある: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • たしかにそう。蝶の羽に似ていて、ディスクは簡単に外れたり折れたりする。作っている最中、子どもたちが触るのを気に入っていたので、外れたディスクを何度も付け直さなければならなかった
    • ほこりはどうやって取り除くのだろう。そのときに破損が起きそうだ

  • 面白い事実: Texas Instruments DLP（Digital Light Processing）は、フリップディスクディスプレイを小型化した版に似ている
    ただしフリップディスクは180°回転するが、DLPピクセルは光をヒートシンク側へ向けるために少し傾くだけで、フリップディスクは両面で色が異なる一方、DLPはミラーピクセルである。フリップディスクの寿命は有限である可能性が高いが、DLPは数兆回のサイクルにも耐え、DLPはマイクロ秒単位で非常に高速に応答するため、グレースケールを**デューティサイクル変調（PWM）**で実現している

  • Breakfast Studio がフリップディスクモジュールで素晴らしいアート作品を作っている
    https://breakfaststudio.com/flip-discs

    • 溶ける極地の氷を見せる作品があるが、エネルギー効率がどの程度なのか気になる。何も反転しないときは電力を使わない気もするが、それでも気になる
    • 片面を銀色、もう片面を抽象的で中立的なデザインにした効果がとても良い
    • このスタジオの作品は本当に素晴らしい。こういうものが好きなら、ラスベガスの新しい Fontainebleu Hotel のために作られた Ocean のような「brixels」作品も見る価値がある

  • 作者がパネルを正確にどうやって入手したのか気になる。以前これを調べたことがあるが、eBay のような場所を除けば、実際には入手不可能に近かった
    産業用数量を産業用価格で買うつもりがない限り、という話だ。どこで買っていくらだったのか知りたい

    • 私のものは eBay で買ったが、同じパネルは AlfaZeta でも買える。もっと安い選択肢もある: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      記事でも、この種のパネルがホビイストにとってもっと安くなってほしいと書いた。この方面で協力したい人がいれば連絡してほしい
    • 最近同じパネルを買ったが、記事の第2段落に出てくる購入先も読んだところ、AlfaZeta の製品だった
      ポーランドで製造して発送しており公開価格表はないが、7x28 パネル1枚でだいたい 220ユーロ くらいだ。高価ではあるが、まだこうしたものを製造しているところは多くない。さらに記事を読むと、AliExpress 系を含めてもっと安そうな別のメーカーへのリンクも出てくる
    • eBay の何が問題なのかわからない

  • 本当にすごい。こういうところで JavaScript が使われているのを見るのは良い
    James Webb Telescope が搭載機能のかなりの部分でカスタム JavaScript ランタイムを使っていると知って驚いた

    • SpaceX Dragon カプセルのタッチスクリーンも、Web Components（Polymer）で作られた HTML/JS アプリで動いている :D
    • あまりに驚いて調べてみた
      https://news.ycombinator.com/item?id=19739454
      それでも、なぜ JavaScript を選んだのかはまだよくわからない。論文によれば商用 JavaScript エンジンとのこと: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • 特定の言語がある用途に使われているのを、なぜ好ましく思うのか気になる。鋼鉄や木材ではなくアルミニウムで何かを作っているのを見て興奮するのに近いように思える
    • それはひどい。JavaScript はウェブページ以外には近づくべきではないし、ウェブページであっても正直疑問だ

  • これは NOC モニター として役立ちそうだ。ほとんどは静的表示だが、何か問題が起きたときに画面が更新され、その音が自然に注意を引いてくれる。別個の「アラーム」は不要だ

    • このアイデアは良い。アドレナリン急上昇なしで通知できる

  • この白黒ディスプレイで、当然あるべき Touhou Bad Apple アニメーションはどこにある？

  • いいね。私もフリップドットが好き。Hanoverのバスディスプレイ用JavaScriptコントローラーから始めて（https://engineer.john-whittington.co.uk/2017/11/adventures-f...）、その後256x56、つまり24パネル規模のコントローラー制作依頼をきっかけに、Alfa-Zetaモジュールまで発展した。
    そのときはPythonモジュール（https://github.com/tuna-f1sh/flipdot）と、Python Flask/Reactベースの管理画面、SQLite DBのシーケンス情報を使っていた。出来上がったものは、事前に読み込まれたトランジション効果や、もちろんライフゲームまで含めて、このアプリに似ていた: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Alfa-Zetaモジュール向けのFPGAベース直接HDMIコントローラーを作るのが、私のプロジェクトTODOリストに入っている。内蔵ファームウェアのリフレッシュ速度が少し物足りない

  • デモ動画の冒頭部分でYe Olde Wooden Mirrorを思い出した。
    https://www.smoothware.com/danny/woodenmirror.html
    あるいは、もっと最近のこれも思い出す: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • すごい。木のピクセルが回転しながら光をより多く、または少なく反射して、複数段階の「グレー」を作っているように見える。巧妙だ

  • 「フリップディスクディスプレイはやや珍しい技術」というより、ニッチ技術という表現のほうが合っている気がする。そのニッチは、日光の下での視認性だった。
    数年前までは、フリップディスクディスプレイはバスや列車などでごく普通に使われていた。だがLEDが良くなるにつれて、そのニッチは消えた

    • 結局、そうなるのは避けられなかった。こうした可動部品のあるフリップディスプレイは、保守が必要だった可能性が高い。消費電力もより多かっただろうし、騒音もあった。昔、駅や空港で聞こえていたあの音を今でも覚えている