公開先
えんぴつチャットの主な特徴・使い方
- 高解像度の256色キャンバス(A3 600dpi、9921x7016pixel)で軽快な描き味
- 多人数参加でもUndo/Redo可能
- 筆圧と傾き検知に対応
- 参加人数は8人まで(見学参加は現状40人まで)
- 2本指のタッチ操作でキャンバスのスクロール・拡縮
- 2本指タップでUndo、3本指タップでRedo
- キャンバスを原寸サイズで保存可能
動作環境
Windows上のChromeと板タブレット又は液晶ペンタブレット
iPad上のSafariとApple-pencil
Android上のChrome
等、大体のモダンブラウザで動作します。
注意：FireFoxで使用する場合
「about:config」で設定画面を開いて
「dom.w3c_pointer_events.dispatch_by_pointer_messages」を「true」に変更してください
多人数での描画とUndoの挙動について
他の参加者に上書きされている場所に対するUndoは、
その参加者がUndoを行った後であれば、Undo可能になります。
複数の参加者が同じ領域に同時に描画を行った場合は、Undo不可能になります。
その他ぎじゅつてきなこと
クライアントサイドはjs+WebAssembly(主にc言語)
サーバーサイドはnode.js+WebAssembly(クライアントと共通のコード)
で作成。
キャンバスは、9921x7016pixel(A3 600dpiと同じ)で8bit/pixel(256色)
クライアント側の消費メモリは300MBくらい、
サーバー側の消費メモリは一部屋当たり250MBくらい。
サーバー側にもBMPでキャンバスを保持しているため、メモリ消費が大きくなっています。
ユーザーインターフェース周りを中心にjsを使用。
お絵描き機能部分はほぼc言語で記述(WebAssembly)。
Wasmを選択した理由
以前にWindows用のペイントツールを作成しており、そのc言語で書かれたソースを流用できるから。
Wasmのメリット
高速で省メモリ。
libpngやzlib等のライブラリをリンクした上でもバイナリサイズが小さい。
Wasmのデメリット
デバッグがつらい。
printf()が唯一の武器…