振動運動リストに戻る    印刷する

拡大収縮…大きさの変化

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

Your browser does not support the canvas tag.

クリックで停止⇔再開
【リスト 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);
}

arigat アットマーク acm.org / copyright © info