CX's Hatena Blog

はてなブログを使ってみるテスト

Canvas

Matter.js でゴゴゴとドドドを物理演算してみるテスト

ここ数日、2D 物理演算がマイブームです。 JavaScript の 2D 物理演算ライブラリとして「box2dweb」をサンプルをよく見かけますが、 シェイプと剛体を個別に作成する必要があり、個人的には、ちょっと使いにくい印象です。 そこで、比較的、最近登場した物理…

こいのぼりをBOIDシミュレーションで泳がせてみるテスト

GWということで、こいのぼりを題材にした作品を jsdo.it で作ってみました。 と、言っても、元の作品の絵柄を差し替えただけですが。。。 1種類では少し寂しいので、いろいろ放流してみました。 以下は、Three.js を利用した 3D バージョンです。 (CanvasR…

jsdo.it で試してみたライブラリの一覧

昨日の記事の続きです。 jsdo.it を1年間続けて分かったこと - CX's Hatena Blog jsdo.it で試してみたライブラリをカテゴリ別にまとめてみました。 「→」にあるリンクは各ライブラリに対するサンプルになります。 2D(Canvas 系) Pixi.js https://github.…

jsdo.it を1年間続けて分かったこと

ドット絵は進化するようです。 「2次元」→「2次元+物理演算」→「2.5次元」→「3次元」→「3次元+物理演算」 2次元 2次元+物理演算 2.5次元 3次元 3次元+物理演算 その他の次元(0次元とか1次元とか) まとめ ということで、1年を通して jsdo.it で色々な…

SVG で某試験の解答を描いてみるテスト

春の某試験に向けて勉強をしているのですが、息抜きに、SVG を使って、問題の解答を描いて見ました。 1.素の SVG で図を描いてみる 2.ライブラリ+JavaScript を用いてアニメーションさせてみる なお、ライブラリとして Snap.svg - Home を使用してみました…

はてなブログで JavaScript を使ってみるテスト(その2)

はてなブログ内で HTML5 + Canvas が使えるかのテスト。 ソース <canvas id="world-20130911-001" width="440" height="440"></canvas> <script type="text/javascript"> var X_MAX = 440; var Y_MAX = 440; var R = 220; function draw() { var canvas = document.getElementById("Canvas"); var ctx = canvas.getContext("2d"); drawScreen( ct…