各種Web技術を使ってドット絵を描いてみるテスト

この記事はWeb グラフィックス Advent Calendar 2020の1日目の記事です。

はじめに

レイ・トレーシングやフォトリアルな PBR も良いですが、たまには息抜きにドット絵なんかも良いですね。
今回は以下のような16x16ドットのデータを用意してドット絵を描いてみたいと思います。

var dataSet = [
    "＿","＿","＿","＿","＿","＿","＿","＿","＿","＿","＿","＿","＿","肌","肌","肌",
    "＿","＿","＿","＿","＿","＿","赤","赤","赤","赤","赤","＿","＿","肌","肌","肌",
    "＿","＿","＿","＿","＿","赤","赤","赤","赤","赤","赤","赤","赤","赤","肌","肌",
    "＿","＿","＿","＿","＿","茶","茶","茶","肌","肌","茶","肌","＿","赤","赤","赤",
    "＿","＿","＿","＿","茶","肌","茶","肌","肌","肌","茶","肌","肌","赤","赤","赤",
    "＿","＿","＿","＿","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","肌","赤",
    "＿","＿","＿","＿","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","赤","＿",
    "＿","＿","＿","＿","＿","＿","肌","肌","肌","肌","肌","肌","肌","赤","＿","＿",
    "＿","＿","赤","赤","赤","赤","赤","青","赤","赤","赤","青","赤","＿","＿","＿",
    "＿","赤","赤","赤","赤","赤","赤","赤","青","赤","赤","赤","青","＿","＿","茶",
    "肌","肌","赤","赤","赤","赤","赤","赤","青","青","青","青","青","＿","＿","茶",
    "肌","肌","肌","＿","青","青","赤","青","青","黄","青","青","黄","青","茶","茶",
    "＿","肌","＿","茶","青","青","青","青","青","青","青","青","青","青","茶","茶",
    "＿","＿","茶","茶","茶","青","青","青","青","青","青","青","青","青","茶","茶",
    "＿","茶","茶","茶","青","青","青","青","青","青","青","＿","＿","＿","＿","＿",
    "＿","茶","＿","＿","青","青","青","青","＿","＿","＿","＿","＿","＿","＿","＿"
];

サンプル一覧

以下、作ったサンプルの一覧になります。実際に動くコードは下表の URL を参照ください。

No	使用したAPIやライブラリ	URL	イメージ
1	Canvas2D	https://codepen.io/cx20/pen/qvijm
2	Google マップ API	https://codepen.io/cx20/pen/hsDdt
3	Google Chart API	https://codepen.io/cx20/pen/awvAb
4	Canvas + 2D物理演算(Box2dweb.js)	https://codepen.io/cx20/pen/Bodel
5	Canvas2D + 2D物理演算(Matter.js)	https://codepen.io/cx20/pen/CzHgo
6	Canvas2D + 布シミュレーション(Verlet-JS)	https://codepen.io/cx20/pen/wHkLd
7	Canvas2D + LCD エフェクト	https://codepen.io/cx20/pen/nbLgA
8	WebGL(Three.js) + 3D物理演算(Oimo.js)	https://codepen.io/cx20/pen/nxelj
9	WebGL(Three.js) + 波動方程式	https://codepen.io/cx20/pen/mhEHF
10	Canvas2D + 群れシミュレーション	https://codepen.io/cx20/pen/uAixw
11	Canvas2D + アニメーション(TweenMax.js)	https://codepen.io/cx20/pen/bpgBH
12	SVGライブラリ (Snap.svg)	https://codepen.io/cx20/pen/rmbJi
13	Canvas2D + 振り子	https://codepen.io/cx20/pen/BCyvE
14	WebGL(Three.js + ShaderMaterial)	https://codepen.io/cx20/pen/wnFkr
15	WebGL(Three.js + BufferGeometry)	https://codepen.io/cx20/pen/vhpmx
16	WebGL(pixi.js)	https://codepen.io/cx20/pen/MwwwZW
17	WebGL(Three.js) + 2D物理演算(Matter.js)	https://codepen.io/cx20/pen/VYWWeY
18	2.5D描画ライブラリ(Obelisk.js)	https://codepen.io/cx20/pen/FhcAj
19	WebGL(Three.js + ParticleSystem)	https://codepen.io/cx20/pen/qEibr
20	WebGL(Three.js) + アニメーション(Tween.js)	https://codepen.io/cx20/pen/rcDbl

おわりに

ここにあるサンプルはほとんど同じデータ配列を用いているため、説明がなくても、ソースを見たら、なんとなくライブラリの使い方が理解が出来るのではないでしょうか。
個人的にドット絵はグラフィックスプログラミングにおける「Hello, World!」のようなものだと思っています。
例えば、データ配列を今流行りの市松模様に変えてみるだけでも面白いかも知れません。

これらのサンプルは CodePen.io や jsdo.it（残念ながら2019年にサービス終了してしまいました）で投稿してきたサンプルからの抜粋になります。新しい表現のアイデア出しやライブラリ探しの参考になれば、と思います。

その他のサンプルにも興味ある方は下記を参照ください。
https://github.com/cx20/jsdo.it-archives/tree/master/tag/pixelart