拡大収縮…大きさの変化
ひとつの円のサイズが拡大収縮します。円の直径が最大値(width)になった時、または最小値(0)になった時に、大きさの変化量ddの正負を反転させます。この変化量を直径dに加えて、円を描画すれば、大きさは等速で、繰返し変化します。
dd = 2; //2ピクセルずつ変化 if (d>width || d<0) { dd = -dd; } d = d + dd; ellipse(width/2, height/2, d, d);【リスト ExpandReduce】では、スピードが変化するように、 イージングの処理を加えて、最大値に向けて最初は大きく変化し、だんだんゆっくり近づくようにしました。
dd = 0.05; //差の5%ずつ変化 if(dd>=0){ //増加している時 d = d + (width - d) * dd; //最大値widthとの差のdd分変化 }else{ //減少している時 d = d + (d - 0) * dd; //最小値0との差のdd分変化 }
クリックで停止⇔再開
【リスト ExpandReduce】 float d; // 円の直径 float dd = 0.05; //直径の変化の割合(イージング係数) void setup() { size(150, 150); // 描画するための画面 fill(100); //塗りつぶす noStroke(); //線なし } void draw() { background(255); //モニタ画面の背景を白でクリア if (d>=width-1 || d<1) { //ぴったりwidth,あるいは0にならないので //s1ピクセルまで近づいたら反転 dd = -dd; } if(dd>=0){ //増加している時 d = d + (width - d) * dd; //最大値widthとの差のdd分変化 }else{ //減少している時 d = d + (d - 0) * dd; //最小値0との差のdd分変化 } ellipse(width/2, height/2, d, d); }