アニメーションしたい

@hoto17296

アニメは好きですか？

今期イチオシアニメ

アニメつくってますか？

┓( ´ー｀)┏

プログラミング × アニメーション

• 地味な UI がリッチに感じる

• センサーの値を可視化

• 数学的なあれこれ

• アートとして

Processing

• 電子アートとビジュアルデザインのための

プログラミング言語 (Wikipedia)

• Java っぽくて Java よりとっつきやすい

• 簡単にアニメーションが作れる

Web でも アニメーションが したい！

HTML5 Canvas

• JavaScript から画像を制御できる

• 繰り返し描画し続けることでアニメーションもできる

JavaScript でのフレーム制御

JavaScript でのフレーム制御

• setTimeout / setInterval はアニメーションのフレーム制御には使うべきではない

• と、言われている

• 画面が非アクティブのときは fps を落とす

requestAnimationFrame

requestAnimationFrame

• ブラウザの画面リフレッシュと同じ

タイミングで呼び出される ( 60 fps くらい )

• 画面が非アクティブのときは実行されない

• ブラウザに優しい

だいたいのブラウザで使える

使い方は setTimeout と同じ

fps を調整する方法

実演

ライフゲーム

• 生命の誕生、進化、淘汰などのプロセスを簡易的なモデルで再現したシミュレーションゲーム

• ルールが単純で簡単に実装できるためエンジニアの遊びに最適

• チューリング完全 (割愛)

ライフゲーム

• ライフゲーム - Wikipedia

• ライフゲームの世界 - 人工知能に関する断創録

まとめ

• プログラミングとアニメーションは相性が良い

• HTML5 Canvas + JavaScript で簡単にアニメーションできるのでやろう

• ライフゲーム面白すぎるのでやろう