DIR : /home/kozerus/public_html/jkwii/js/jsdoit/forked_f/forked_particle3000/index.js
/home/kozerus/public_html/jkwii/js/jsdoit/forked_f/forked_particle3000
/*===================================================
面白法人カヤックに'11新卒で
入社予定のぽんた(calmbooks)です。
clockmakerさんの
http://jsdo.it/clockmaker/particleを
Forkしてみました。
====================================================*/
// forked from clockmaker's "Particle 3000" http://jsdo.it/clockmaker/particle
/**
* みんな大好きパーティクル
* (JavaSript, HTML5バージョン)
*
* @author clockmaker
* @see http://clockmaker.jp/blog/
*
* wonderflのパーティクル祭りを参考
* http://wonderfl.net/c/436W/
*/
// -----------------------------------------
// 定数
// -----------------------------------------
var MAX_NUM = 500; // パーティクルの個数【変えたよ!(`・ω・)】
var FRAMERATE = 1000 / 60 >> 0; // フレームレート
// -----------------------------------------
// クラス定義
// -----------------------------------------
/**
* パーティクル
*/
function Particle() {
this.initialize.apply(this, arguments);
}
Particle.prototype = {
initialize: function(x, y) {
this.x = x;
this.y = y;
},
x : 0,
y : 0,
vx : 0,
vy : 0,
next : null
};
// -----------------------------------------
// 初期化
// -----------------------------------------
// 変数の初期化
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, FRAMERATE);
// -----------------------------------------
// イベントハンドラ
// -----------------------------------------
/**
* マウスが動いたとき
*/
function mouseMoveHandler(e) {
var rect = e.target.getBoundingClientRect();
// マウス座標の更新(もっとスマートな方法ある?)
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
}
/**
* タイマー
*/
function enterFrameHandler() {
// 描画をリセット
ctx.fillStyle = "rgb(255, 255, 255)"; //【変えたよ!(`・ω・)】
ctx.fillRect(0, 0, 465, 465);
ctx.fillStyle = "rgb(200, 0, 0)"; //【変えたよ!(`・ω・)】
var gravityX = mouseX;
var gravityY = mouseY;
var n = first;
// Linked Listによる高速イテレーション
do {
var diffX = gravityX - n.x;
var diffY = gravityY - n.y;
var acc = -10 / (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;
// 点描
ctx.fillRect(n.x, n.y, 5, 5); //【変えたよ!(`・ω・)】
}
while (n = n.next);
}
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer