JavaScript、p5.js プログラム このページの左下の窓で動きます

金魚に餌: 近くにいる金魚がマウスカーソルの位置に集まってきます。

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>