Particle 3000 clockmaker Follow 2011-04-21 10:52:52 License: MIT License Fork146 Fav104 View42465 みんな大好きパーティクル (JavaSript, HTML5バージョン) @author clockmaker @see http://clockmaker.jp/blog/ wonderflのパーティクル祭りを参考 http://wonderfl.net/c/436W/ Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 138 lines HTML 6 lines CSS 5 lines みんな大好きパーティクル (JavaSript, HTML5バージョン) @author clockmaker @see http://clockmaker.jp/blog/ wonderflのパーティクル祭りを参考 http://wonderfl.net/c/436W/ Particle 3000 /** * みんな大好きパーティクル * (JavaSript, HTML5バージョン) * * @author clockmaker * @see http://clockmaker.jp/blog/ * * wonderflのパーティクル祭りを参考 * http://wonderfl.net/c/436W/ */ // ----------------------------------------- // 定数 // ----------------------------------------- var MAX_NUM = 3000; // パーティクルの個数 var INTERVAL_MSEC = 1000 / 60 >> 0; // 1フレームに相当するミリ秒 // ----------------------------------------- // クラス定義 // ----------------------------------------- /** * パーティクル */ function Particle() { // コンストラクタを呼び出し this.initialize.apply(this, arguments); } Particle.prototype = { /** コンストラクタ */ initialize: function(x, y) { this.x = x; this.y = y; }, x : 0, // X座標 y : 0, // X座標 vx : 0, // X方向の速さ vy : 0, // Y方向の速さ next : null // LinkedListの参照 }; // ----------------------------------------- // 初期化 // ----------------------------------------- // 変数の初期化 var mouseX = 0; var mouseY = 0; var first; var old; // キャンバスの初期化 var canvas = document.getElementById("world"); var ctx = canvas.getContext("2d"); // パーティクルの初期化 for(var i=0; i<MAX_NUM; i++) { var p = new Particle( Math.random() * 465, Math.random() * 465 ); if(first == null) { first = old = p; } else { old.next = p; old = p; } } // イベントハンドラの登録 canvas.onmousemove = mouseMoveHandler; setInterval(enterFrameHandler, INTERVAL_MSEC); // ----------------------------------------- // イベントハンドラ // ----------------------------------------- /** * マウスが動いたとき */ function mouseMoveHandler(e) { var rect = e.target.getBoundingClientRect(); // マウス座標の更新 mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } /** * タイマー */ function enterFrameHandler() { // 背景を黒く塗りつぶす ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillRect(0, 0, 465, 465); // パーティクルの塗りの色を設定 ctx.fillStyle = "rgb(200, 200, 255)"; var gravityX = mouseX; var gravityY = mouseY; var n = first; // Linked Listによる高速イテレーション do { var diffX = gravityX - n.x; var diffY = gravityY - n.y; var acc = 50 / (diffX * diffX + diffY * diffY); var accX = acc * diffX; var accY = acc * diffY; n.vx += accX; n.vy += accY; n.x += n.vx; n.y += n.vy; n.vx *= 0.96; n.vy *= 0.96; if (n.x > 465) n.x = 0; else if (n.x < 0) n.x = 465; if (n.y > 465) n.y = 0; else if (n.y < 0) n.y = 465; // 点描 (1×1pxの四角形を描画) ctx.fillRect(n.x, n.y, 1, 1); } while (n = n.next); } <canvas id='world' width="465" height="465"> </canvas> Particle 3000 body { margin:0; padding:0; overflow:hidden; } みんな大好きパーティクル (JavaSript, HTML5バージョン) @author clockmaker @see http://clockmaker.jp/blog/ wonderflのパーティクル祭りを参考 http://wonderfl.net/c/436W/ /** * みんな大好きパーティクル * (JavaSript, HTML5バージョン) * * @author clockmaker * @see http://clockmaker.jp/blog/ * * wonderflのパーティクル祭りを参考 * http://wonderfl.net/c/436W/ */ // ----------------------------------------- // 定数 // ----------------------------------------- var MAX_NUM = 3000; // パーティクルの個数 var INTERVAL_MSEC = 1000 / 60 >> 0; // 1フレームに相当するミリ秒 // ----------------------------------------- // クラス定義 // ----------------------------------------- /** * パーティクル */ function Particle() { // コンストラクタを呼び出し this.initialize.apply(this, arguments); } Particle.prototype = { /** コンストラクタ */ initialize: function(x, y) { this.x = x; this.y = y; }, x : 0, // X座標 y : 0, // X座標 vx : 0, // X方向の速さ vy : 0, // Y方向の速さ next : null // LinkedListの参照 }; // ----------------------------------------- // 初期化 // ----------------------------------------- // 変数の初期化 var mouseX = 0; var mouseY = 0; var first; var old; // キャンバスの初期化 var canvas = document.getElementById("world"); var ctx = canvas.getContext("2d"); // パーティクルの初期化 for(var i=0; i<MAX_NUM; i++) { var p = new Particle( Math.random() * 465, Math.random() * 465 ); if(first == null) { first = old = p; } else { old.next = p; old = p; } } // イベントハンドラの登録 canvas.onmousemove = mouseMoveHandler; setInterval(enterFrameHandler, INTERVAL_MSEC); // ----------------------------------------- // イベントハンドラ // ----------------------------------------- /** * マウスが動いたとき */ function mouseMoveHandler(e) { var rect = e.target.getBoundingClientRect(); // マウス座標の更新 mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } /** * タイマー */ function enterFrameHandler() { // 背景を黒く塗りつぶす ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillRect(0, 0, 465, 465); // パーティクルの塗りの色を設定 ctx.fillStyle = "rgb(200, 200, 255)"; var gravityX = mouseX; var gravityY = mouseY; var n = first; // Linked Listによる高速イテレーション do { var diffX = gravityX - n.x; var diffY = gravityY - n.y; var acc = 50 / (diffX * diffX + diffY * diffY); var accX = acc * diffX; var accY = acc * diffY; n.vx += accX; n.vy += accY; n.x += n.vx; n.y += n.vy; n.vx *= 0.96; n.vy *= 0.96; if (n.x > 465) n.x = 0; else if (n.x < 0) n.x = 465; if (n.y > 465) n.y = 0; else if (n.y < 0) n.y = 465; // 点描 (1×1pxの四角形を描画) ctx.fillRect(n.x, n.y, 1, 1); } while (n = n.next); } <canvas id='world' width="465" height="465"> </canvas> body { margin:0; padding:0; overflow:hidden; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/pwik/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/clockmaker/particle" title="Particle 3000">Particle 3000 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Tags 3D CSS無双 [particle][パーティクル] canvas effect heml5 html5 javascript line particle particles perticle three.js typed-array アルゴリズム パーティクル パーティクル処理 マウス追従 Favorite by laishin17 alphabet_h fmsthefifth suitap siouxcitizen.. okoi show555 sabotenbroth.. mikiteawww Mohsen_Reza edoc hdemon pypupypa cuddlephish masahiroh zendenmushi nehahelo takishiki stv_tribute hoPPen aaharu seeker sv_junic Nibbles fingaholic NavinS yoshimax kaminogoya rhythmred cue asahimurasor.. demouth 36t nyamogera sanesashi osamX ueueueueue ayuzak tkinjo acrecord jason_fp stephen.will.. yutakam80 cjcat2266 os0x keyJS suttang matsumos gryng02 a_24 vesperworks masamasa22 motikawa 31103: パーティクル ebiallergy: 1 chimanaco: particles fallen: 3D breakmonkey: 3dparticles iku: パーティクルパーティクル! tomtoma1025: canvashtml5パーティクルjavascript rintaro2039: マウス追従パーティクル ye117: パーティクル whitech0c0: パーティクル綺麗! is_tks: 3DcanvasCSS無双effectheml5javascriptlineparticleparticlesparticlesperticlethree.jsthree.jstyped-array[particle][パーティクル][particle][パーティクル]アルゴリズムパーティクルパーティクル処理パーティクル nejires: [particle][パーティクル]canvasアルゴリズム kunmura: [particle][パーティクル]heml5 oniginal_pra..: [particle][パーティクル]パーティクル処理[particle][パーティクル][particle][パーティクル]クールですね isimiya: パーティクル flytataki: うわ! Ryz310: パーティクルcanvaseffect kodaigo: [particle][パーティクル]canvas ethertank: canvas centre.knowl..: heml5javascriptparticle with clear details 3ping.org: canvas[particle][パーティクル]1点にまとめてパーンみたいな気持ちがいい suzu_v: [particle][パーティクル]すごい! memememomo: [particle][パーティクル] kclip: パーティクル alt: particle sonk: particlescanvas kumamoo0329: びゅーてぃふる!ぱーてぃくる! alphathings: パーティクル lzanol: particles3000 particles hiloki: canvas ikeryou: すごい rokujyouhito..: これはすばらしい。 iida: パーティクルいっぱい thayashi: particle mau: particle HapHands: [particle][パーティクル] kamem: javascriptパーティクル black: particles xxxYukihirox..: particle paq: particleそのうち10万パーティクルとかになるんだろうか。 rintarock: particle OGTY: パーティクル snowin: particle tadanori: effectparticleパーティクル hokaccha: canvas rettuce: particle chomeconic: 御見それいたしました! narutohyper: 仕事が速い! coppieee: 作るのはやい! bkzen: perticle highhi: particleすごす Forked sort new page view favorite forked forked: Particle 3000 doridori 00 10views 139/6/5 forked: Particle 3000 ne_ko_ 00 4views 139/6/5 forked: Particle 3000 yamaadc 00 9views 139/6/5 forked: Particle 3000 Toshihiro.In.. 00 22views 139/6/5 1 2 3 4 5 6 7 8 9 10NEXT>>