Basics \ Processing.orgの、
Distance2D \ Learning \ Processing.orgより。
20ピクセルずつ均等に描画された白い円の半径が、
マウスポインタの位置にあわせて、
大きくなったり小さくなったりするサンプル。
円の大きさはマウスポインタに近い程、
小さくなるように設定されている。
float max_distance; void setup() { size(200, 200); smooth(); noStroke(); max_distance = dist(0, 0, width, height); //(0,0)座標から(200,200)座標までの距離を計算。 } void draw() { background(51); for(int i = 0; i <= width; i += 20) { //iは円のx座標 for(int j = 0; j <= height; j += 20) { //jは円のy座標 float size = dist(mouseX, mouseY, i, j); //*1.円とマウスポインタの距離を計算。 size = size/max_distance * 66; //*2.ウインドウの大きさに合わせてさらに計算して、大きさを調整。 ellipse(i, j, size, size); } } }
1の計算で得られた数値を適当に割るなりして調整する代わりに、2のようにさらに計算するのは、円の大きさをウインドウの大きさに関係させるためだ と思う。