結論と対象読者

DotLCD Cameraは、カメラまたは画像ファイルを、低解像度、4階調、均一な液晶セル、限定的な時間応答へ変換する端末内処理型のWebツールです。最初は画像ファイルとClean Four-Toneプリセットから試し、その後にカメラ、残像、露出、故障表現、書き出しへ進むと違いを理解しやすくなります。

30秒要約

  1. 画像ファイルを選ぶか、カメラを許可します。
  2. 論理解像度を選びます。
  3. 4階調、ブライトネス、コントラストを調整します。
  4. 4色パレットとセル表示を選びます。
  5. 必要に応じて残像、自動露出、故障表現を加えます。
  6. 変換前後を比較します。
  7. PNG、WebP、プリセットJSONを保存します。

カメラを使わなくても、画像ファイルだけで主要な変換を試せる設計が基本です。

概要と背景

DotLCD Cameraの表現は、1つのフィルターではなく、複数の処理層から構成されます。

1. 入力

  • カメラ
  • 画像ファイル
  • ドラッグ&ドロップ
  • クリップボード画像

2. 空間表現

  • 論理解像度
  • 整数倍拡大
  • 均一セル
  • 高DPI対応

3. 階調と色

  • 4階調
  • Bayer 4x4ディザー
  • 16段階ブライトネス
  • 16段階コントラスト
  • 4色パレット
  • sRGB基準

4. 時間表現

  • 短期残像
  • 不器用な自動露出
  • 露出固定
  • FPS表示

5. 状態・劣化表現

  • Used LCD
  • Memory Ghost
  • Faulty Panel
  • 固定シード

6. 出力

  • PNG
  • WebP
  • プリセットJSON
  • 将来候補としての動画録画

特徴・できること

画像ファイルから安全に試す

カメラ権限を許可しなくても、利用者が明示的に選んだ画像ファイルから変換できます。最初の確認にはこの方法が向いています。

低解像度と4階調を分けて調整する

論理解像度は細部の量を決め、4階調は明暗の段数を決めます。両者を別々に変えると、DotLCD表現の中心が分かります。

プリセットから始める

  • Clean Four-Tone: 基準となる4階調
  • Stubborn Auto: 段階的で不器用な自動露出
  • Used LCD: 穏やかな経年変化
  • Memory Ghost: 過去セルの短期保持
  • Faulty Panel: 固定された欠陥

プリセット名は特定製品の再現を示すものではなく、設定の性質を表します。

端末内処理を確認する

画像変換をブラウザ内で行う実装は可能です。ただし、「端末内処理」はAPIが自動保証する性質ではありません。Networkログ、公開コード、通信設定で確認します。

現在の位置付けと利用上の前提

DotLCD Cameraは、特定の実機、製品、液晶方式を完全再現するものではありません。一般化した低解像度LCD表現を、Web標準のCanvas、WebGL、MediaDevices、File APIなどで構築する企画です。

現在利用できる機能と、将来候補を分けて確認します。

基本機能として成立しやすい範囲

  • 画像ファイル入力
  • Canvas 2D描画
  • 低解像度化
  • 4階調化
  • 4色パレット
  • PNG出力
  • プリセットJSON

環境確認が必要な範囲

  • カメラ
  • WebGL2
  • WebP
  • OffscreenCanvas
  • PWA
  • MediaRecorder

実験・将来候補

  • WebGPU
  • WebCodecs
  • 高度な動画書き出し
  • 実機測定に基づくパネルモデル

実際の公開版で何が実装済みかは、アプリ画面、更新履歴、公開ソースで確認してください。

近い対象との比較

対象DotLCD Cameraとの違い
写真フィルター色だけでなく論理解像度と階調を制限する
ピクセルアート変換時間応答や液晶セル表現も扱う
CRTフィルター走査線や発光より均一LCDセルを重視する
カメラアプリ撮影よりリアルタイム変換と観察を重視する
特定製品エミュレーター特定製品の完全再現や互換を目的にしない

確認/試行の条件と注意点

最初の試し方

  1. Clean Four-Toneを選びます。
  2. 画像ファイルを1枚読み込みます。
  3. 論理解像度を低、中、高で比較します。
  4. ディザーをオン、オフします。
  5. ブライトネスとコントラストを中央から1段ずつ動かします。
  6. 4色パレットを変更します。
  7. 変換前後比較を開きます。
  8. PNGとプリセットJSONを保存します。

カメラを使う場合

  1. HTTPSで開いていることを確認します。
  2. カメラ開始を自分で押します。
  3. ブラウザの許可画面を確認します。
  4. 拒否した場合は画像ファイルへ切り替えます。
  5. 終了時はカメラ停止を押します。
  6. ブラウザのカメラ使用表示が消えたことを確認します。

安全・権利上の注意

  • 画像やカメラ映像の外部送信がないかNetworkで確認します。
  • 他人の写真を加工して公開する場合は、元画像と被写体の権利を確認します。
  • 特定製品のロゴ、名称、外観、公式素材を完全再現しません。
  • 点滅や残像を弱める設定を用意します。
  • スマートフォンが熱い、動作が不安定な場合は停止または省電力モードへ切り替えます。

参考リンク

  • MDN: Canvas API
  • https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
  • MDN: MediaDevices getUserMedia
  • https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
  • MDN: File API
  • https://developer.mozilla.org/en-US/docs/Web/API/File_API
  • MDN: WebGL API
  • https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
  • MDN: HTMLCanvasElement toBlob
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob