1月15日開催!現年収非公開で企業からスカウトをもらってみませんか?PR

転職ドラフトでリアルな市場価値を測る。レジュメをもとに、企業から年収とミッションが提示されます。

4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Undo/Redoが出来るお絵描きチャット"えんぴつチャット"をWasmで作った

Last updated at Posted at 2021-09-20

スクリーンショット 2021-09-17 132128.png

IMG_0323.PNG

公開先

えんぴつチャットの主な特徴・使い方

  • 高解像度の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の挙動について
ezgif-7-0b0621ae6a0e.gif

他の参加者に上書きされている場所に対するUndoは、
その参加者がUndoを行った後であれば、Undo可能になります。

ezgif-7-7d6a549d45ff.gif

複数の参加者が同じ領域に同時に描画を行った場合は、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()が唯一の武器…

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?