連載
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う
Canvasの機能をCreateJSで駆使して，「Flashみたいな」表現をつくっていきます。初めにお題となるコンテンツを挙げ，数回にわたってそのスクリプティングを解説していく形式で進めていきます。
本連載で制作したサンプルはjs.do.itにて，すべて公開しています。
※本連載が終了した後の2014年12月12日付でCreateJSがアップデートされました。連載で書いたコードは、新バージョンでは正しく動かないことがあります。「新しいCreateJSで書くコードはどう変わるのか」が著者のサイトで解説されていますのでご参照ください（04「古いコードを新たに書替えてみる」には新バージョンに書替えたjsdo.itのサンプルが掲載されています）。
- 第36回 たくさんのオブジェクトを連結リストで扱う
- 連結リストの使い道
- 連結リストのクラスを実装する
- 連結リストを使ったエレメントの扱い方
- 連結リストを使う意味
2014年12月2日
- 第35回 たくさんのパーティクルに弾けるようなアニメーションをさせる
- たくさんのパーティクルをステージのランダムな位置に置く
- すべてのパーティクルを弾けるように動かす
- 配列の扱いを最適化する
2014年10月29日
- 第34回 パーティクルの弾けるような動きをつくる
- クラスでつくったパーティクルをステージに置く
- パーティクルにバネのような弾む動きを与える
- 吸込まれて弾けるパーティクルのアニメーション
2014年10月7日
- 第33回 弾力のある多角形をドラッグして落とす
- 描画をドラッグするには
- 八角形に中心点を加えて放物線状に落とす
- 図形をドラッグして放る
- 見た目をボールにしてみる
2014年9月18日
- 第32回 弾力のある多角形を放物線状に落とす
- 点と棒で組上げた三角形を落とす
- 4つの点から四角形をつくって落とす
- パラメータを変えて試してみよう
2014年8月27日
- 第31回 位置座標の相互作用で弾力を表す
- クラスでつくった点を放物線状に落とす
- ふたつの点を棒でつなぐ
- 棒でつないだふたつの点を落とす
- 引数のデフォルト値と値の確認
2014年8月19日
- 第30回 Box2Dでたくさんのボールを床に落とし続ける
- ボールをつくり続ける
- ボールのオブジェクトを使い回す
- Box2Dの名前空間の扱い
2014年8月1日
- 第29回 Box2Dで落としたボールを床に弾ませる
- 床をつくる
- すべての剛体を物理シミュレーションする
- かたちを定める
- 材質を定める
2014年7月25日
- 第28回 物理演算エンジンBox2Dでボールを落とす
- Box2dWebを使う
- ボールの画像をBitmapオブジェクトに読み込む
- 物理空間と剛体を定める
- 剛体をつくって落とす ー 物理演算シミュレーションの実行
2014年7月8日
- 第27回 ランダムな楕円軌道を描くパーティクルの仕上げ
- パーティクルの動き始めもランダムにする
- メソッドを動的に切換える
- 等速円運動と速度
2014年6月6日
- 第26回 パーティクルを使い回しながらさまざまな楕円軌道で回す
- 楕円軌道を速度から導く
- 100個のパーティクルを使い回して再設定する
2014年5月9日
- 第25回 楕円軌道に残像を描きながら回るパーティクル
- 楕円軌道を描いて動かす
- 10個のパーティクルをさまざまな大きさの楕円軌道で回す
- 黒い背景に残像の加わった光るパーティクルを回す
2014年4月16日
- 第24回 マウスポインタの動きに弾みがついた曲線を滑らかに描く
- 弾みのついた軌跡を描く
- アニメーションを再描画するタイミング
- バネのような動きを数学の目で確かめる
2014年3月31日
- 第23回 マウスポインタの軌跡を滑らかな線で描きながら消す
- マウスポインタの軌跡を滑らかな曲線で描く
- 値の変化のさせ方を考える
- 描かれた線を後から消してゆく
2014年3月6日
- 第22回 立方体の6面をx軸とy軸で回す
- 立方体に上面と底面を加える
- x軸とy軸の回転を扱う準備
- 立方体をx軸でも回す
2014年2月18日
- 第21回 水平に回す立方体の面を塗る
- 面の塗り順をどう扱うか
- 2次元ベクトルの外積で面の裏表を調べる
- 立方体の表向きの面のみを塗る
- ベクトルの外積とは
2014年2月7日
- 第20回 立方体のワイヤーフレームを水平に回す
- 立方体の頂点をワイヤーフレームで結ぶ
- 立方体の面を頂点番号で定める
2014年1月28日
- 第19回 3次元空間で弾むオブジェクトとz座標による重ね順の並べ替え
- ボールを床で弾ませる
- オブジェクトの重なりをz座標値の順に並べ替える
2014年1月14日
- 第18回 クラスの継承と透視投影
- Shapeクラスを継承する3次元座標のクラス定義
- z軸方向の速さと透視投影のメソッドを加える
2013年12月18日
- 第17回 簡単なクラスを定義する
- 透視投影のメソッドをオブジェクトに定める
- コンストラクタ関数を定める
- コンストラクタのプロトタイプオブジェクトにメソッドを定める
2013年12月5日
著者プロフィール
野中文雄（のなかふみお）
ソフトウェアトレーナー，テクニカルライター，オーサリングエンジニア。上智大学法学部卒，慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で，総務・人事，企画，外資系企業担当営業などに携わる。その後，マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング，コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。
URL：http://www.FumioNonaka.com/