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

この記事は[Web グラフィックス Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webgraphics)の1日目の記事です。

### はじめに

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

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

### サンプル一覧

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

|No|使用したAPIやライブラリ|URL|イメージ|
|:--:|:--|:--|:--:|
|1|Canvas2D                                   |https://codepen.io/cx20/pen/qvijm |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/b17eb1b0-5f6b-30ae-8ff4-1c6d1cfa98f7.png)](https://codepen.io/cx20/pen/qvijm)|
|2|Google マップ API                          |https://codepen.io/cx20/pen/hsDdt |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/6b24e3b4-1304-64f3-759f-9cb45af54ba2.png)](https://codepen.io/cx20/pen/hsDdt)|
|3|Google Chart API                           |https://codepen.io/cx20/pen/awvAb |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/af84f8b6-467b-2d91-0b7d-7aae148e81fb.png)](https://codepen.io/cx20/pen/awvAb)|
|4|Canvas + 2D物理演算(Box2dweb.js)           |https://codepen.io/cx20/pen/Bodel |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/83cb6cbb-c1a8-b456-d35e-ee32dda2add5.png)](https://codepen.io/cx20/pen/Bodel)|
|5|Canvas2D + 2D物理演算(Matter.js)           |https://codepen.io/cx20/pen/CzHgo |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/04372521-7eec-fc4b-34df-054aab4d97b1.png)](https://codepen.io/cx20/pen/CzHgo)|
|6|Canvas2D + 布シミュレーション(Verlet-JS)   |https://codepen.io/cx20/pen/wHkLd |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/2d010ef8-decd-d3bd-1a4a-bf64215c41d6.png)](https://codepen.io/cx20/pen/wHkLd)|
|7|Canvas2D + LCD エフェクト                  |https://codepen.io/cx20/pen/nbLgA |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/126d3a44-c8fc-500d-1263-f84a32cd7aa5.png)](https://codepen.io/cx20/pen/nbLgA)|
|8|WebGL(Three.js) + 3D物理演算(Oimo.js)      |https://codepen.io/cx20/pen/nxelj |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/1c2bb73b-8b9a-91d7-fd8c-10cbb5a30951.png)](https://codepen.io/cx20/pen/nxelj)|
|9|WebGL(Three.js) + 波動方程式               |https://codepen.io/cx20/pen/mhEHF |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/b82212c8-637c-8e11-ff43-d44a47de3bb3.png)](https://codepen.io/cx20/pen/mhEHF)|
|10|Canvas2D + 群れシミュレーション           |https://codepen.io/cx20/pen/uAixw |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/55373f93-6b05-dc82-a360-38462fac9570.png)](https://codepen.io/cx20/pen/uAixw)|
|11|Canvas2D + アニメーション(TweenMax.js)    |https://codepen.io/cx20/pen/bpgBH |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/189fc44e-7f3d-3623-4127-4250b8e6fea0.png)](https://codepen.io/cx20/pen/bpgBH)|
|12|SVGライブラリ (Snap.svg)                  |https://codepen.io/cx20/pen/rmbJi |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/d3dc0f73-6987-be90-0658-778d131a21e2.png)](https://codepen.io/cx20/pen/rmbJi)|
|13|Canvas2D + 振り子                         |https://codepen.io/cx20/pen/BCyvE |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/80556057-2c70-1d73-35b4-d5034f88fc95.png)](https://codepen.io/cx20/pen/BCyvE)|
|14|WebGL(Three.js + ShaderMaterial)          |https://codepen.io/cx20/pen/wnFkr |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/c956ba0e-0346-de14-0fa4-beb62379e0f0.png)](https://codepen.io/cx20/pen/wnFkr)|
|15|WebGL(Three.js + BufferGeometry)          |https://codepen.io/cx20/pen/vhpmx |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/fd9dbdbf-7b9d-c0f5-5d14-0090ceb0764e.png)](https://codepen.io/cx20/pen/vhpmx)|
|16|WebGL(pixi.js)                            |https://codepen.io/cx20/pen/MwwwZW|[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/637b4e6e-e8bf-ae8f-ebd7-310c40496ecd.png)](https://codepen.io/cx20/pen/MwwwZW)|
|17|WebGL(Three.js) + 2D物理演算(Matter.js)   |https://codepen.io/cx20/pen/VYWWeY|[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/ca33b74b-e339-adf4-9a3c-4a484fce329e.png)](https://codepen.io/cx20/pen/VYWWeY)|
|18|2.5D描画ライブラリ(Obelisk.js)            |https://codepen.io/cx20/pen/FhcAj |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/9105e2c3-14a6-2c31-12c7-0fd626223cac.png)](https://codepen.io/cx20/pen/FhcAj)|
|19|WebGL(Three.js + ParticleSystem)          |https://codepen.io/cx20/pen/qEibr |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/622bcabc-bcd5-9a59-0ffc-f83c6c9c817f.png)](https://codepen.io/cx20/pen/qEibr)|
|20|WebGL(Three.js) + アニメーション(Tween.js)|https://codepen.io/cx20/pen/rcDbl |[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26094/d459dc12-db11-9a85-7ad1-ba04c5c2b693.png)](https://codepen.io/cx20/pen/rcDbl)|

### おわりに

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

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

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