42
31

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 1 year has passed since last update.

WebAssemblyでお絵描きチャット"8bitpaint chat"を作った

Last updated at Posted at 2019-09-15

IMG_0066.PNG

公開先

https://minordaimyo.net/pencilchat/
(2022/09/16 現在「えんぴつチャット」に名称変更の上、機能も強化されています)

8bitpaint chatの主な特徴・使い方

  • 高解像度のキャンバス(A4 600dpi相当)で軽快な描き味
  • 筆圧と傾き検知に対応
  • 参加人数は8人まで(ROMは現状16人まで)
  • 使える色は黒1色のみ
  • 任意の参加者を非表示にできる機能
  • 2本指のタッチ操作でキャンバスのスクロール・拡縮
  • 2本指タップでUndo、3本指タップでRedo
  • キャンバスのダウンロード機能

動作環境

Windows上のChromeとペンタブレット・液晶タブレット
iPad上のSafariとApple-pencil
Android上のChrome
等々

#ぎじゅつてきなこと
クライアントサイドはjs+WebAssembly(主にc言語)
サーバーサイドはnode.js+WebAssembly(クライアントと共通のコード)
で作成。

キャンバスサイズは、7016x4961pixel(A4 600dpiと同じ)。
クライアント側の消費メモリは250MBくらい、
サーバー側の消費メモリは一部屋当たり300MBくらい。
サーバー側にもキャンバスを保持しているため、メモリ消費が大きくなっています。

ユーザーインターフェース周りを中心にjsを使用。
お絵描き機能部分はほぼc言語で記述(WebAssembly)。

#苦労したこと
c言語は割と得意だけどWebプログラミングは全くの素人。
そのためjsでの記述部分はかなりの糞コードになってしまった…

#その他
初めてQiitaで発信しました。
必要なことは後から書き足す予定です。

42
31
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
42
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?