拡大収縮…大きさの変化
ひとつの円のサイズが拡大収縮します。円の直径が最大値(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);
}