往復運動リストに戻る    印刷する

往復する円運動…同一サイズの円列

複数の円が列になって、円周上を往復運動します。 円周上を往復する動きの計算はひとつの往復する円運動と同じです。
10個の円の位置(角度)angleと速度(角度の変化量)daを保存するの配列を用意し、次のように初期値を設定します。

 da[angle.length-1]=3;  // 配列daの末尾は3
 for(int i=angle.length-2;i>=0;i--){ // 配列のうしろから値を初期化
    angle[i]= angle[i+1] + 10;// 配列末尾は0で、先頭に向かって10ずつ増える
    da[i] = da[i+1];          //後ろの要素と同じ値(全部3)
 }

ひとつの往復する円運動と同様、1周して角度が360以上になった時、または戻って0度になった時に、変化量の正負を反転させます。しかし、これだけだと列が乱れてきます。angle[i]に変化量を加えてきた時、ぴったり360になるとは限りません。たとえば359、362と変化する場合、360を超えた差が列の間隔を乱します。そのため、その差を反転させて、円の間隔を保つ必要があります。

 angle[i] = angle[i] + da[i];
 if (angle[i]>=360) {
   angle[i] = 360 - (angle[i]-360);  //360を越えた差分を折り返す
    da[i] = -da[i];
 } else if (angle[i]<0) {
    angle[i] = - angle[i];   //0を越えた差分を折り返す
    da[i] = -da[i];
 }

【リスト RCircleM1】では、列の運動の向きが変わる様子をはっきりさせるため、円の色を変えています。setup()関数内で、色相を変化させるためcolorMode()関数を使い、カラーモードをHSB(色相、明度、彩度)にしています。

  noStroke(); //線を描かない
  colorMode(HSB, 100); //色相、明度、彩度を0-100で指定

そして、draw()関数のfor文中で、iの値によって色相を0－18に変化させています。

 fill(2*i, 100, 100);  //色相だけ変化させる(赤ー黄)

【リスト RCircleM1】
float[] angle  = new float[10]; // 位置(角度)
float[] da = new float[10]; //  角度の変化量
float x, y;
float d = 10; // 円の直径
float len = 60; // 軌跡の円の半径
float ver=270;  //往復位置の補正　角度 3時位置は0度、右回り

void setup() {
  size(150, 150);   //描画するための画面
  noStroke();
  colorMode(HSB, 100); //色相、明度、彩度を0-100で指定
  da[angle.length-1]=3;  // 配列daの末尾は3
  for(int i=angle.length-2;i>=0;i--){ // 配列のうしろから値を初期化
    angle[i]= angle[i+1] + 10;// 配列末尾は0で、先頭に向かって10ずつ増える
    da[i] = da[i+1];          //後ろの要素と同じ値(全部3)
  }
}

void draw() { 
     background(100);   //画面の背景を白でクリア
     for(int i=0; i<angle.length; i++){
       angle[i] = angle[i] + da[i];
       if (angle[i]>=360) {
           angle[i] = 360 - (angle[i]-360);  ///360を越えた差分を折り返す
           da[i] = -da[i];
       } else if (angle[i]<0) {
           angle[i] = - angle[i];   //0を越えた差分を折り返す
           da[i] = -da[i];
       }
       x = len * cos(radians(angle[i]+ver)) + width/2.0;
       y = len * sin(radians(angle[i]+ver)) + height/2.0;
       fill(2*i, 100, 100);  //色相だけ変化させる(赤ー黄)
       ellipse(x, y, d, d);
     }
}