http://www.ip.kyusan-u.ac.jp/J/inoue.ko/OpenSquare/index.php?p5.js
のプログラムを変更しました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js" type="text/javascript">
</script><script language="javascript" type="text/javascript">
var N = 0;
var r = new Array(200); var c = new Array(200);
var x = new Array(200); var y = new Array(200);
var vx= new Array(200); var vy= new Array(200);
var ang;
function setup(){
createCanvas(1000,600); // windowWidth, windowHeight);
colorMode(HSB,50);
noStroke();
frameRate(60);
for (N = 1; N < 150; N++) {
x[N] = 500;
y[N] = 300;
vx[N] = random(5)-5;
vy[N] = random(5)-5;
r[N] = random(5,20);
c[N] = random(100);
N++;
}
}
function draw(){
fill(0,0,0,10);
rect(0,0,width,height);
for(i=0; i<N; i++){
x[i] += vx[i];
y[i] += vy[i];
if(abs(x[i]-mouseX) + abs(y[i]-mouseY) < 200) {
ang = 2 * atan((mouseY-y[i])/(x[i]-mouseX))-atan(vy[i]/vx[i]);
var len = sqrt(vx[i]*vx[i]+vy[i]*vy[i]);
vx[i] = len*cos(ang);
vy[i] = -1*len*sin(ang);
}
if(x[i] < 0 || x[i] > width) vx[i] *= -1;
if(y[i] < 0 || y[i] > height) vy[i] *= -1;
fill(c[i],50,100);
ellipse(x[i],y[i],r[i],r[i]);
fill(150);
ellipse(mouseX, mouseY, 10, 30); ellipse(mouseX, mouseY-20, 10, 10);
ellipse(mouseX-2, mouseY+25, 5, 30); ellipse(mouseX+5, mouseY+25, 5, 30);
ellipse(mouseX+7, mouseY-2, 3, 15); ellipse(mouseX-7, mouseY-10, 20, 3);
ellipse(mouseX-20, mouseY+5, 5); ellipse(mouseX-25, mouseY+10, 5);
}
}
</script>