sine, cosine（2）時間をコントロールする

配列を使って様々なオブジェクトを作成する

sine, cosineで描くことができる代表的なグラフィックを勉強しましたが、もっと複雑なグラフィックを作るために配列を使ってみます。

float[] x = new float[10];
float[] y = new float[10];
int num = 10;
float A = 150.0;  //振幅
float w = 1.0;  //各周波数
float p = 0.2;  //位相差
float t = 0.0;  //経過時間
float speed = 0.05;  //スピード

void setup() {
  //画面のサイズを決定
  size(400, 400);  
  smooth();
  stroke(170);
  fill(0);
}

void draw() {
  background(255);

  for (int i = 0; i < num; i ++) {

    x[i] = A*cos(w*t - p*i);
    y[i] = -A*sin(w*t - p*i);    //processingは数学の座標とはy方向が反対になるので、-にする
    ellipse(x[i] + width/2, y[i] + height/2, 10, 10);  //画面中央を中心にして円上に点を描画
  }
  t += speed;
}

時間軸をずらしてみる

それでは、サイン波を使って時間の流れを変化させてみましょう。

float[] x = new float[10];
float[] y = new float[10];
int num = 10;
float A1 = 2.3;  //振幅
float A2 = 4.1;
float w1 = 1.0;  //各周波数
float w2 = 0.33;
float p1 = 0.2;  //位相差
float p2 = 0.01;
float t1 = 0.0;  //経過時間
float t2;

void setup() {
  //画面のサイズを決定
  size(400, 400);  
  smooth();
  stroke(170);
  fill(0);
}

void draw() {
  background(255);

  for (int i = 0; i < num; i ++) {

    t2 = A1*sin(w1*t1 - p1*i);

    x[i] = 150*cos(w2*t2 - p2*i);
    y[i] = -150*sin(w2*t2 - p2*i);
    ellipse(x[i] + width/2, y[i] + height/2, 10, 10);  //画面中央を中心にして円上に点を描画

    //line(x[i] + width/2, y[i] + height/2, width/2, height/2);
  }
  t1 += 0.05;
}

さらに複雑な時間の流れを作る

上記のサンプルでオブジェクトを複製することに成功しましたが、t1, t2などの時間をもう少し複雑な変化にしてみましょう。以下のサンプルでは、t1, t2を合成して新しくt3を作成しています。

float[] x = new float[10];
float[] y = new float[10];
int num = 10;
float A1 = 7.3;  //振幅
float A2 = 4.1;
float w1 = 1.0;  //各周波数
float w2 = 0.33;
float p1 = 0.2;  //位相差
float p2 = 0.01;
float t1 = 0.0;  //経過時間
float t2 = 0.0;
float t3;
float speed = 0.003;

void setup() {
  //画面のサイズを決定
  size(400, 400);  
  smooth();
  stroke(170);
  fill(0);
}

void draw() {
  background(255);

  for (int i = 0; i < num; i ++) {

    t3 = A1*sin(w1*t1 - p1*i) + A2*sin(w2*t2 - p2*i); 

    x[i] = 150*cos(t3);
    y[i] = -150*sin(t3);    //processingは数学の座標とはy方向が反対になるので、-にする
    ellipse(x[i] + width/2, y[i] + height/2, 10, 10);  //画面中央を中心にして円上に点を描画

    //line(x[i] + width/2, y[i] + height/2, width/2, height/2);
  }
  t1 += 0.01;
  t2 += 0.07;  
}