フリップディスクス投影プロジェクト

フリップディスク（またはフリップドット）とは、電磁パルスを用いて微小な円盤を 2 つの色間で切り替える表示技術です。この技術は 80 年以上前に発明されましたが、基本的な仕組みは現在でもほとんど変わっていません。私はこれらを選定した理由は、オフィス用に大きなインタラクティブな壁画を設計したいと考えていたことに加え、従来のスクリーンが発する LED の光沢が好きではなかったためです。フリップディスプレイは興味深い代替手段であり、高い読みやすさ、長い寿命、そして 25〜60 フレーム per セカンド（fps）の表示周波数を達成します。また、追加のメリットとして、円盤が切り替わるたびに窓に雨が降るような音が鳴ります。私はそれを非常に心地よいと感じています。コードを視覚化する独自の方法を探求するのはずっとやりたいと思っていたものであり、電気くニット編機向けの「ピクセルニット」アプリや、Atom Editor（残念ながら既に利用不能）向けの創作ツール設計の際にも同様の思いを抱いていました。フリップドットもそのような魅力的な挑戦のようだと感じたのです。私はパートナーと協力し、コード编写および盤面のデザインを担当しました。仕事仲間とは一緒にハッキングを楽しむことができる誰よりも素晴らしいことではないでしょうか！フラップディスクディスプレイが一種のニッチ技術であり、このプロジェクトが役立つと感じる方がどれほどいるかはわかりませんが、さあ始めましょう！

目次

• 組み立て
• ソフトウェア
• デザイン
• 次のステップ
• 結論

---

パネル

私たちが使用したのは、3x3 のグリッド（合計 84x42 の円盤）で配置された 9 つの「Alfazeta」パネルです。各ボードには 2 枚ずつ、つまり計 56x28 のパネルが使われています。全体の設計寸法はこの図にて確認できます。PCB に搭載されているのは比較的古式の ATMEGA128 マイクロコントローラーであり、数百個の MELF ダイオード（これらは紛失しやすいので余分なものも購入することをお勧めします）がチャーリープレックス接続されており、さらに 2 つの DIP スイッチも装備されています。一方のスイッチでボードアドレスを設定し、もう一方ではビットレートを設定します。AlfaZeta ボードに関する詳細情報については こちら のマニュアルをご覧ください。

フラップディスクボードやコンポーネントを入手するのは比較的困難であり、選択肢に限界があります。もしこのプロジェクトを再度行うのであれば、独自の PCB を設計することを検討してみたいと思います。7 セグメント型のフリップディスクも非常に魅力的です。ファームウェアへのアクセスがあれば、パフォーマンスチューニングに役立ちます。また、より大きなサイズが理想でしたが、パネルの費用が高騰するため実現できませんでした。残念ながら現状では、フラップディスクは主に輸送業界などの企業向けであり、一般消費者向けというわけにはいきません。この状況が変わることを願っています。

互換性のあるボード:

• Alfazeta
• Hanover
• Flipo

---

電源

ボードへの給電には、ボードあたり合計 24V、1A を必要とし、すべての円盤を駆動させるためには合計 9A の電力供給が必要です。私たちは Mean Well の 24V/10A パワースープライユニット（型番：HLG-240H-24）を採用しました。

---

フレーム

フレームは 80/20 アルミニウムエキスードを用いて製作し、PCB スタンオフを直接ネジ止めしています。注意： ボードと円盤は極めて脆弱であり（私の子供たちがいじくり回すのが大好きです！）、フリップディスクは蝶々の翼のように壊れやすいという表現が適切だとどこかで読んだことがあります。実際に組立中に円盤を見失ったり割れたりするのは非常に容易です。必ず端から持ち、ボードを 1 つずつ注意深く取り付けましょう。

80/20 パーツリスト:

• (7) サイズ 1010：25.2 インチに切断
• (2) サイズ 1010：49.65 インチに切断
• (12) コーナーコネクター（型番 33460）
• M3x16mm ネジ: 72 本
• M3x10mm スパサ: 72 本

80/20 アルミプロファイルの組立は非常に容易です。また、取付穴を掘るには 10 シリーズのジグとビットを推奨します。我々は additionally にベーク材製の木製フレームも製作しましたが、このステップを省略して 80/20 フレームのみを取り付けることも可能です。木工については本記事の範囲外です。完成品の写真はこちらです。

---

ケーブリング

各列をシリアル接続し、それら全てをチェーン状に接続しました。データラインは RS485 ブロック端子の +/- を使用します。電源線には 18AWG のワイヤ、データ線には 22AWG のシールドケーブルを採用しました。ワイヤの端部でのスパイシングやターミナルのクリンプ作業には、Wago Wire Lever Nuts が役立ちます。高いフレームレートを達成する場合は、RS485 ラインに使用できるパネル数を 6 つ以内に制限してください。表示には合計 3 つの USB RS485 デバイスを使用しました。コンテンツを外部サーバーから配信したい場合は、RS485 からイーサネットへの変換アダプターも優れた選択肢です。

推奨されるツールと部材:

• (18) ピッチ 5.08mm メス・メス PCB スクリューターミナルブロック
• (4) Wago 221 ワイヤーレバーナット
• (72) ワイヤーフェルール
• フェルールクランプツール
• ワイヤーstripper

---

プロセッシング

音声、映像、画像の処理には機械学習を使用しており、単一ボードコンピュータやマイクロコントローラーでは不十分な計算能力が必要でした。そこで Nvidia Orin Nano を採用しました。Raspberry Pi でも動作する可能性がありますが、フレームレートの低下が生じる可能性があります。Nvidia ボードには IMX708 カメラと Waveshare オーディオボードを組み合わせ、音声入出力に使用しました。Jetson 6.0 へのデプロイ用 Dockerfile を作成しました。GPU の利用には Mediapipe をソースからコンパイルする必要があります。もし簡単な方法を探しているなら、M2 Mac Mini がお勧めです。インタラクションなしの簡易的なソリューションとして Raspberry Pi も選択肢の一つです。

---

ソフトウェア

ボード

通信は RS485 経由で行われます。各フレームは開始バイト [0x80] で始まり、次にフラッシュコマンド [0x83] またはバッファリングコマンド [0x84]、次いでボードのアドレス、そして画像データが続きます。最後に終了バイト [0x8F] が置かれます。画像データは非常にシンプルで、2 つの状態 [0, 1] のみを使用します。また、ワイヤ上を送信する各フレームには RLE（ラン長符号化）による圧縮も施されています。

フリップディスクスクリーンのための Node.js ベースの基本的なライブラリを作成しました。現在、Alfazeta および Hanover ボードを USB またはイーサネット経由で動作させています。（Github リポジトリ参照）。キャンバスインスタンスから直接データを送信でき、

ctx.getImageData(0, 0, width, height)

を使用することで画素データを輝度に基づいて 1 または 0 にマッピングできます。

使用例:

import { createDisplay } from 'flipdisc'

const path = '/dev/tty0'
const display = createDisplay([[1], [2]], path) 

display.send(frameData)

ドライバードキュメント:

npm install flipdisc

サーバーアーキテクチャ

リアルタイムの可視化と直接ユーザフィードバックに対応できるシステムを構築しました。これは、Pixlet（tidbyt 製品）などの低画素ディスプレイが低電力デバイス上でプリレンダされたアセットを表示するのと対照的です。我々は WebGL/Canvas の利用を希望しており、レンダリングライブラリを再発明する必要はありませんでした。これまでに有効であることが確認された既存のウェブ技術を活用しています——2D レンダリングには PIXI、3D レンダリングには Three.js、物理エンジンには Matter.js、アニメーションには GSAP を使用しています。さらにサーバーサイドレンダリングには node-canvas および node-gl も利用しています。

インタラクションについては、Google の優秀な MediaPipe ライブラリとモデルを使用しています。簡単なデモをご覧になりたい方は、Gesture Recognizing のサンプルをご覧ください。多くの ML ライブラリが Python を使用するため、Node.js から Python スクリプトを起動し、ML 固有のコードを実行した後に ZeroMQ IPC を経由してデータを返す方法をとっています。将来は Python WASM も検討するかもしれません。

シーン例（ジェスチャー認識器）:

const e = new GestureEmitter()
scene.add(e)

e.on('move', data => {
  if (data.gesture[0] == 'Open_Palm') {
    ball.position = data.position;
  }
})

我々は多数の異なる可視化を作成し、オンデマンドで切り替えたりカスタマイズしたりすることができます。各可視化はシーンとして表現され、キューに追加可能です。シーンの再生やキューの管理は REST API を介してアクセスできます。ライブプレイヤーデータは WebSocket 経由で送信されます。シーンの構築は簡単です。

useLoop

関数を通じてイベントを購読するか、レンダリングキューにアイテムを追加することができます。各シーンファイルにはシーンとスキーマ、オプションでバックグラウンドタスクを返す必要があります。バックグラウンドタスクは一定間隔で実行され、成功するとキューに再生対象のシーンを追加します。

サーバードキュメント: こちらを見る | シーン例: こちらを見る

npm install flipdisc-server

サンプルシーンコード:

import { createScene, ImageView } from 'flipdisc-server'

const schema = {
  title: 'Image',
  properties: {
    url: {
      type: 'string',
      default: 'image.png',
    },
  }
}

const image = function(opts) {
  const scene = createScene()
  scene.once('loaded', () => {
    const img = new ImageView(opts.url)
    scene.add(img)
  })

  return scene;
}

export { image as scene, schema }

ライブラリ機能:

• ディレクトリからシーンをインポートする機能
• シーンファイルのライブリロード
• キューにシーンを追加するバックグラウンドタスク
• テキスト、画像、リストなどの簡単 UI コンポーネント
• Yoga を基盤とした Flex レイアウト
• PIXI/Three/Matter に対する基本的な Getter とセットアップ機能、および追加モジュールを追加できる柔軟性
• リアルタイムデータのための REST サーバーと WebSocket
• レンダリングループや GLSL シェーダーを簡単に使用する機能

---

インタフェース

過去には、コマンドを忘れたり操作方法を知っていなかったりして利用できなくなったプロジェクトをいくつも作成してきました。そのため、表示デバイスの信頼性の高い操作インターフェースを提供することにしました。Expo アプリを採用した理由は、プロトタイピングの速度が速かったためです。ネイティブアプリは大好きですが、Xcode を開くたびに寒々としてしまいます（笑）。

このアプリを通じて、表示のあらゆる側面を制御できます——一時停止、再生、スキップ、前へ戻すなど。シーンの変数を設定することで体験を個別化することも可能です。また、画面に自由ペイントもできます。App Store でダウンロードしてください。

アプリ機能:

• シーンの一時停止/再生
• キューへの追加または削除
• キー内のスキップまたは前へ戻る
• 表示されているライブ画面の監視
• 画面への自由描画
• 各シーンへの設定変数の送信

---

デザイン

Subspace は私が子供時代からプレイしたマルチプレイヤーゲームの一つでした。このゲームでは、船のすぐ横に表示される 12x8 の小さなバナーをデザインすることができ、その限られた空間で何が可能なのかに圧倒されました。すぐに自分でデザインすることに夢中になりました。画素数の厳格な制限には、創造性をさらに推し進める特性がありました。どの程度までこのメディアの限界を押し広げられるかを試してみたくなるのです。ウェブ開発において私たちが利用可能な膨大な画素数について当然のことだと思っているのは、そのような制約の中にいると気づきにくいかもしれません。情報を最も簡潔なものに凝縮することこそが、時には祝福となり得ます。なぜなら、あなたが下す決定について非常に意識的で慎重である必要があるからです。フリップディスク表示の 42x84 のサイズも、同様の制約練習のように感じられました。

私たちが使用している基本的な読みやすいフォントは 3x5 ピクセルサイズのものです。また、4x5 やモノスペースバリアンもあります。さらに小型にする場合は 3x3 フォントや 3x4 ナノフォントがありますが、実際の利用において可読性が損なわれすぎるため不向きだと感じています。12 ピクセル以上であれば、いくつかのフォントを使用してある程度の可読性を維持できます。ビットマップフォントはこのようなディスプレイに最適です——特にアンチエイリアシングが描画されないためです。インテリジェントなビットマップデザインフォントのアカイブも非常に興味深いです。

画像については、Floyd-Steinberg ダーニングと Bayer 4x4 オーダーリーダースの両方を混合して使用しています。以下の図例は这两种技術の違いを示しています。私は画像には Floyd-Steinberg が自然な画素分布を生むため好ましく、UI 要素には均一なパターンを生成する Bayer を好みます。詳しく知りたい方は、ダーニングに関する素晴らしい記事 Ditherpunk — モノクロ画像ダーニングについての私が持っていたかった記事 を参照してください。

最後に、以下のシーン是我たちのオフィス用に設計したものです。ニューヨークタイムズ RSS リーダー、Spotify クライアント、天気アプリなどを含まれています。作業中にふと見たいものを見つけたらリストをさらに拡張するでしょう。

---

次のステップ：AI ワール

透明なエージェントインターフェースとして AI を利用し、新しいマルチモーダル入出力を活用することを目標としています。これらの能力はすぐそこまで迫っていますが、次世代モデルのリリースを待つことでこの機能の実装を開始する予定です。

---

結論

このプロジェクトとの共同作業はとても楽しく行われました。フリップディスクがホビー愛好家にとってさらにアクセスしやすくなることを願っています。もし新しい安価なフリップディスクハードウェアの開発に興味がある方や、ご協力いただける方がいればご連絡ください。また、自作方法に関する質問がある場合はお気軽にお問い合わせください。

インスピレーション

• Pico-8
• Pixlet
• Shunsuke Takawo
• FlipPyDot
• Flipdigits Monitor: Algorithms
• Ditherpunk
• Atkinson Dithering
• Subspace Banner Emporium