Particle 3000

clockmaker

2011-04-21 10:52:52

License: MIT License

Fork: 186

Fav: 121

View: 64218

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);  
}

Particle 3000

みんな大好きパーティクル (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; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

clockmaker

URL
http://clockmaker.jp/

FlashやHTML5を中心に活動するテクニカルディレクター / インタラクティブデベロッパー株式会社ICS代表 / 筑波大学非常勤講師

Twitter (JP) : http://twitter.com/clockmaker Twitter (EN) : http://twitter.com/clockmaker_en

Blog (JP) : http://clokcmkaer.jp/blog Blog (EN) : http://clokcmkaer.jp/blog-en

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/pwik/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

Takuro.Wada

_soup

murata_s

moon-waltz

s.perfumed.g

stwindfy

w56t

Riri.Okachim

gaziya

tairashi

chapa0106

phi

baroque_55

Keisuke.Wata

laishin17

alphabet_h

fmsthefifth

suitap

siouxcitizen

okoi

show555

Iwao.Nakatan

postnum

mikiteawww

MohsenReza

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

tuffgong:

3D CSS3 CSS無双 [particle][パーティクル]animation アルゴリズムパーティクルマウス追従 heml5 html5

tsyknsr:

[particle][パーティクル]javascript

79cac4:

[particle][パーティクル]CSS3 HTML5

iku:

パーティクルパーティクル！

tomtoma1025:

canvas html5 パーティクル javascript

パーティクル綺麗！

[particle][パーティクル]canvas アルゴリズム

kunmura:

[particle][パーティクル]heml5

oniginal_pra:

[particle][パーティクル]パーティクル処理 [particle][パーティクル][particle][パーティクル]クールですね

うわ！

[particle][パーティクル]canvas

ethertank:

canvas

centre.knowl:

heml5 javascriptparticle with clear details

3ping.org:

canvas [particle][パーティクル]1点にまとめてパーンみたいな気持ちがいい

suzu_v:

[particle][パーティクル]すごい！

alt:

びゅーてぃふる！ぱーてぃくる！

パーティクル

particles3000 particles

すごい

これはすばらしい。

パーティクルいっぱい

mau:

javascriptパーティクル

paq:

particleそのうち10万パーティクルとかになるんだろうか。

effect particleパーティクル

御見それいたしました！

仕事が速い！

作るのはやい！

particleすごす

Forked

sort by

forked: Particle 3000

Hiroyuki.Kat

139/6/5

forked: Particle 3000

gatchang

139/6/5

forked: Particle 3000

erhan.puskul

139/6/5

Particle 3000

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Tweet

Twitter

Discussion

Tags

Favorite by

Forked