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

      sine, cosine（2）時間をコントロールする はコメントを受け付けていません

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

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

11_13_15__14_34

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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;
}

時間軸をずらしてみる

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

11_14_15__12_49_AM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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を作成しています。

11_13_15__14_26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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;  
}