タグ

アニメーションとCanvasに関するramda-phiのブックマーク (2)

  • アボガドロ数を実感する

    6×1023個というのがどれほどの大きな数なのか、をアニメーションで見ます。 ちなみに水ならこれだけで約18グラムになります。「18gの水を見ているのだ」と思って以下のアニメを見てください。 2倍ズーム ←どちらかのボタンを押してズームしてください→連続ズーム 1/2倍ズーム←どちらかのボタンを押してズームアウトしてください→連続ズームアウト ここに1モル(6×1023個)の分子があります。 は全体を6×10×10=6×102に分割したものです。 粒子はまだ見えていません。 スピードが遅い場合は、以下のチェックを付けたり外したりして調整してください。 塗りつぶし無しの描画 粒子をグラデーションで表現 ↑機種・ブラウザによってはグラデーションが遅い場合がありますので、その場合はこれを外してください。 リセット プログラムについて御質問、御要望、バグ報告などございましたら、前野[いろもの物理学

  • 注目!Flash CS風のUIでHTML5のタイムラインアニメーション作成·Radi MOONGIFT

    RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。 RadiはMac OSX用のフリーウェア(β版中につき無料)。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタグを駆使することでアニメーションさえ自在に作れる。 メイン画面 とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の動きは自動で補完で

  • 1