ParticleEmitterJS を使ってみちゃうよ。 :boy: 詳しくは「HTML5 Canvasでパーティクル表現!パーティクルエンジンParticleEmitterJS | ClockMaker Blog」 :check: 「ParticleEmitterJS | Purple Monkey Studios」 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>炎のパーティクル | CreateJS</title> <script src="js/easeljs-0.8.1.min.js"></script> <script src="js/tweenjs-0.6.1.min.js"></script> <script src="js/movieclip-0.8.1.min.js"></sc
This example shows how to use a VertexShader to change vertex position in Starling display object. We can use it to create bones, ropes, soft bodies and any kind of objects with variable vertices position at runtime. Of course we can recreate mesh every frame but upload new data to VertexBuffer will be necessary. With few objects that should be not a problem with performance, but with dozens of th
Flash Player 11 から採用された Stage3D を学習するよ。 :bouzu: Starling Framework を試しちゃうんだからね。 :girl: package { import flash.display.Sprite; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.events.Event; import starling.core.Starling; [SWF(backgroundColor="#000000", width="600", height="400", frameRate="60")] public class Main extends Sprite { // プロパティ private var starling:Starl
2013年5月12日 HTML, JavaScript, Webサイト制作, 便利ツール Adobe社のEdge Animateというツールを聞いたことはありますか?クリエイティブ クラウドのメンバー登録をしている人は、「聞いたことあるけど、何するツール?」という方もいるかと思います(私もそうでした…)。Edge AnimateはアニメーションやインタラクティブなコンテンツをFlash感覚で作成できるツールです。簡単な使い方を、サンプルも交えて紹介します! ↑私が10年以上利用している会計ソフト! Adobe Edge Animateとは? Flashで作っていたようなアニメーションを作成し、HTMLとJavaScriptで書きだすツール。タイムラインを使って直感的に動きのあるHTMLコンテンツを作成できます。Adobe クリエイティブクラウドにメンバー登録すると使えます。HTMLの基礎知
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成&GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ(transform3d: scale(1,1)とか)で強制的にGPUアクセラレーションを効かせたCanvasア
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
今日のスケッチ蝶蝶がいっぱい。 processing.js だいたい理解した。 蝶の群れだけど、boidというよりは、perlin noiseによるフォースフィールドの復習。 定番ですがperlin noiseで作った雲状bitpmapのR値とG値を、XY方向の気流の力として適用する・・・ってアレです。 リハビリリハビリ。 ここ数年こういうコード書いてなかったので、すごい腕が落ち込んでる。 スムーズな方向転換系アルゴリズムを作れないうちに時間切れ。 昔は2〜3時間あれば作れたのに・・・ジジイになったってことか。 ところで、processing.jsの現行バージョン、tint()関数が壊れてませんかね? フォグでZ-Depth的表現しようとしたら、どうにも動かない。 1日1〜2時間、プライベートの時間にちょこちょこ作って一気にリハビリしたい。 Daniel Shiffman師父の、インタラク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く