JavaScriptを使えば画面内の要素を動かすことができます。とはいえ、それを素のJavaScriptだけで自力で実装するのは現実的ではありません。特に物理的な動きと組み合わせるのは大変です。 今回はインタラクティブなコンテンツを作るのに特化したJavaScriptフレームワーク、CindyJSを紹介します。

CindyJSの使い方

ボールが飛び跳ねるデモ。線はマウスで移動させられます。

グラフィカルに描かれるデモ。

ツリーの継ぎ目を移動させると描かれる図も変わります。

2Dと3Dの組み合わせ。グラフを動かせます。

動かしたところです。

オブジェクトの中にオブジェクトを埋め込むデモです。

CindyJSを使えばマウスなどの操作を用いたインタラクティブなコンテンツが作成できるでしょう。もちろん使い方を覚える必要はありますが、それでも一から作るのに比べれば大幅に工数は下がりそうです。覚えておくとピンポイントで使える場面がありそうです。

CindyJSはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

CindyJS CindyJS/CindyJS: A JavaScript framework for interactive (mathematical) content.