RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
[CreateJS] Bitmapクラスを使って画像の描画を自由自在に - YoheiM .NET
こんにちは、@yoheiMuneです。 CreateJSを用いたWebゲームアニメーションを作って2ヶ月。色々と学んだ事をブログに書こうと思い、今日が第2弾。 今日は、CreateJSのうちEaselJSのBitmapクラスを用いて、画像の描画を自由自在に行う方法をブログに書きます。 CreateJSとは CreateJSとは、HTML5 Canvasに描画したり、Canvas上でアニメーションを行う為のJavaScriptライブラリです。 CreateJSについて、以下の記事を書いておりますので、ご覧頂けると幸いです。 - Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - Bitmapクラスを使って画像の描画を自由自在に（今回ここ） Bitmapクラスを使って、画像を自由自在に描画する createjs.Bitmapクラスを使うと、PNG
![[CreateJS] Bitmapクラスを使って画像の描画を自由自在に - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c82a9b183c0f98e8af2ff76581c585d34566aaa4/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F175.jpg)
CreateJS 日本語リファレンス
CreateJSとは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリです。 EaselJS EaselJSはcanvas向けに保持されたグラフィックスモードを提供するJavascriptライブラリであり、完全な階層構造の表示リスト、 コアインタラクションモデル、canvasでの2Dグラフィックスを簡易にするヘルパークラスを含みます。 EaselJSはリッチなHTML5Canvasにおけるリッチなグラフィックスやインタラクションに役立つソリューションを提供します。
CreateJSでHTML5 Canvasを操る | 第1回 CreateJSとは
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
第34回 パーティクルの弾けるような動きをつくる | gihyo.jp
この連載を始めてから、はや1年半が過ぎた。実は、今回のお題が連載の締めとなる。そこで最近の解説のおさらいも兼ねて、つぎのjsdo.itのようなパーティクルを選んだ。先頃大ヒットしたディズニーアニメの雪（サウンドあり）を想い起こさせる表現だ。池田泰延（clockmaker）氏による「Particle 3000」を下敷きにした。このコードがCanvas APIを使っているのに対し、本解説ではもちろんCreateJSを用いる。今回を含めた都合3回で仕上げるつもりだ。 クラスでつくったパーティクルをステージに置く まず、アニメーションは後に回して、パーティクルをひとつステージの真ん中に置こう（図1）。CreateJSのライブラリは、EaselJSを使う。そして、body要素からonload属性で、script要素に定めた初期設定の関数（initialize()）を呼び出すのは毎度おなじみのとお
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 canvas bench: particle 30000 - latest log