パーティクル

code:particle.js

// 引力・斥力モデル

var num = 1000;

var vx = new Array(num);

var vy = new Array(num);

var x = new Array(num);

var y = new Array(num);

var ax = new Array(num);

var ay = new Array(num);

var magnetism = 10.0; //引力の強さマイナスにすると斥力になる。

var radius = 1 ; //描画する円の半径

var gensoku = 0.95; // 粒子の移動を減速させる

function setup(){

createCanvas(600,600);

noStroke();

fill(0);

ellipseMode(RADIUS);

background(0);

blendMode(ADD);

for(var i =0; i< num; i++){

xi = random(width);

yi = random(height);

vxi = 0;

vyi = 0;

axi = 0;

ayi = 0;

}

function draw(){

fill(0,0,0);

rect(0,0,width,height);

for(var i=0; i<num; i++){

var distance = dist(touchX, touchY, xi, yi); //dist(x1,y1,x2,y2) ２点間の距離を求める関数

//加速度は引力の中心からの距離の二乗に反比例する。

if(distance > 3){ //あまりマウスに近すぎる場合は加速度を更新しない

axi = magnetism * (touchX - xi) / (distance * distance);

ayi = magnetism * (touchY - yi) / (distance * distance);

}

vxi += axi; // 1フレームあたりaxだけ速度vxを増加する。

vyi += ayi; // 1フレームあたりayだけ速度vyを増加する.

vxi = vxi*gensoku;

vyi = vyi*gensoku;

xi += vxi; // 1フレームあたりvyピクセル進ませる。

yi += vyi; // 1フレームあたりvyピクセル進ませる。

var sokudo = dist(0,0,vxi,vyi); // 速度のX,Y成分から速度を求める

var r = map(sokudo, 0, 5, 0, 255); //速度に応じた色を計算

var g = map(sokudo, 0,5, 64, 255);

var b = map(sokudo, 0,5, 128, 255);

fill(r, g, b, 32);

ellipse(xi,yi,radius,radius);

}