search
LoginSignup
8

More than 1 year has passed since last update.

posted at

updated at

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

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

はじめに

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

var dataSet = [
    "_","_","_","_","_","_","_","_","_","_","_","_","_","","","",
    "_","_","_","_","_","_","","","","","","_","_","","","",
    "_","_","_","_","_","","","","","","","","","","","",
    "_","_","_","_","_","","","","","","","","_","","","",
    "_","_","_","_","","","","","","","","","","","","",
    "_","_","_","_","","","","","","","","","","","","",
    "_","_","_","_","","","","","","","","","","","","_",
    "_","_","_","_","_","_","","","","","","","","","_","_",
    "_","_","","","","","","","","","","","","_","_","_",
    "_","","","","","","","","","","","","","_","_","",
    "","","","","","","","","","","","","","_","_","",
    "","","","_","","","","","","","","","","","","",
    "_","","_","","","","","","","","","","","","","",
    "_","_","","","","","","","","","","","","","","",
    "_","","","","","","","","","","","_","_","_","_","_",
    "_","","_","_","","","","","_","_","_","_","_","_","_","_"
];

サンプル一覧

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

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

おわりに

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

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

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

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
What you can do with signing up
8