Processingの三角関数で作品を作れるようになる5ステップ

 

 

 

Processingの三角関数。

sin関数とcos関数を理解するのは本当に大変でした。

プログラミングを始めて1ヶ月目くらいで調べたことです。

細かい計算などはなく、理解しやすくなる知識とコードの数値を変えることで作品を作れるようになっていきましょう。

分からなかった頃の自分のための解決策のために、勉強内容の定着のためのアウトプットとして記事にさせて頂きました。

参考にして頂ける部分があれば嬉しいです。

Processingの三角関数で作品を作れるようになる5ステップ

 

 

 

1 円の範囲とx軸とy軸について【知っておく】

 

 

 

 

2 円の範囲の円周率の数値と動きの向き【知っておく】

 

 

 

 

3 sin関数とcos関数を組み合わせて円を周回させる【コードの意味と書き方】

 

円の範囲の0, 1.57, 3.14→などの決まっていた数値がありますね。

0．01を足して繰り返すコードを書くとぐるぐる回ります。

0.03や1.15とかも足せて数値が大きくなると移動の幅が大きくなるのでスピードが上がります。表現も変わります。

解説付きのコードと解説のないコードを載せているので、数値を触ってみるのが1番理解が早いです。

 

 

解説付きのコード

// sin, cos関数で形を丸く周回させる【詳しい解説ver】 //

/* 【position 下記の変数名1】
   この設定の円の場合
   size（x, y）のx軸の半分の値にするとキャンバスの真ん中が中心になる
   size(1000, 1000)など、xとｙを統一するのがおすすめ */
float position = 500; 

/* 【angle 下記の変数名2】
円の動きが始まる場所 */
float angle = 0; 

/* 【range 下記の変数名3】
円の範囲。数を増やすと増える */ 
float range = 300; 

/* 【speed 下記の変数名4】
   時計周りに動いていく数値の増加
   数値を大きくすると移動範囲が大きくなって速度が上がるように感じる */
float speed = 0.03;

//キャンバスの大きさの設定
void setup() {
  size(1000, 1000);
}

/*【sin, cos関数で形を丸く周回させたい時の構文】
   y軸のsin関数は変数名1 + sin（変数名2）*　変数名3
   x軸のcos関数は変数名1 + cos（変数名2）*　変数名3 */   
void draw(){
  float x = position + cos(angle) * range; 
  float y = position + sin(angle) * range;
  ellipse(x, y, 100, 100);
  angle += speed; //【変数名4】のspeedで決めた数値の幅で時計回りに円が回っていく
}

 

解説なしのコード

// sin, cos関数で形を周回させる【解説なしver】 //

float position = 500; 
float angle = 0; 
float range = 300; 
float speed = 0.03;

void setup() {
  size(1000, 1000);
}

void draw(){
  float x = position + cos(angle) * range; 
  float y = position + sin(angle) * range;
  ellipse(x, y, 100, 100);
  angle += speed; 
}

 

 

4 sin関数は縦の範囲

 

真ん中を中心にして線を引いた場合、0と3．14と書くと真ん中に表示されます。

下の図でもう1回確認してもらうのと、実際にsin()の中の数値を変えて感覚をつかんで下さい。

 

 

3.15や3.16など細かく刻んだ数値でも表示されます。

 

sin関数の表示位置を理解するためのコード

//sin()の()の中の数字の変化に注目

//キャンバスのサイズを設定
size(1000, 1000);

//真ん中が中心の横と縦に直径700の円
ellipse(
  width / 2, height / 2, 
  700, 700
);

//真ん中の円
ellipse(
  width / 2,
  height / 2 + sin(0) * 350,
  100, 100
);

// 真ん中から1つ上の円
ellipse(
  width / 2,
  height / 2 + sin(5.65) * 350,
  100, 100
  );
  
// 1番上の円
ellipse(
  width / 2,
  height / 2 + sin(4.71) * 350,
  100, 100
  );

//真ん中から1つ下の円
ellipse(width / 2,
  height / 2 + sin(0.47) * 350,
  100, 100
 ); 

//1番下の円　図の1．57の位置にある
ellipse(
  width / 2,
  height / 2 + sin(1.57) * 350,
  100, 100
 );


  
//y軸の線(sinの基準線)
  line(width / 2, 0, width / 2, 1000);

 

 

 

sin関数で特定の数値を増やしながら連続させると一定の縦の範囲で動く

 

さっきの項目の3のコードをほんの少し変えるだけで動きます。

変数にfloat range1 = 0とfloat range2 = 300を追加。

void drawのsin関数とcos関数の最後の部分をrange1とrange2に変えてます。

 

sin関数のみを機能させるコード

// sinのy軸だけを動かすコード【range1の部分を0にする】//

float position = 500; 
float angle = 0; 
float range1 = 0; //range1を0にする
float range2 = 300; 
float speed = 0.03;

//キャンバスの大きさの設定
void setup() {
  size(1000, 1000);
}

// cosのy軸だけを動かしたいのでcosのrange1の部分をを0にする

void draw(){
  float x = position + cos(angle) * range1; //rangeの部分が0なら機能しない
  float y = position + sin(angle) * range2;
  ellipse(x, y, 100, 100);
  angle += speed; 
}

 

 

 

5 cos関数は横の範囲

 

1.57の反対側には4.71があるから同じ位置で表示される。

下の図でもう1回確認してもらうのと、実際にcos()の中の数値を変えて感覚をつかんで下さい。

cos関数は横のｘ軸の線の上で表示されます。

 

 

cos関数の表示位置を理解するためのコード

//cos()の()の中の数字の変化に注目

// キャンバスの大きさ
size(1000, 1000);

//真ん中が中心の横と縦に直径700の円
  ellipse(
    width / 2, height / 2,
    700, 700
  );
 

//1番右の円　
  ellipse(
    width / 2 + cos(0) * 350,
    height / 2,
    100, 100
  );

//右から2番目の円
  ellipse(
    width / 2 + cos(0.94) * 350,
    height / 2,
    100, 100
  );
 
//真ん中の円
  ellipse(
    width / 2 + cos(1.57) * 350,
    height / 2,
    100, 100
  );
  
//左から2番目の円
  ellipse(
    width / 2 + cos(4.08) * 350,
    height / 2,
    100, 100
  );

// 1番左の円
  ellipse(
    width / 2 + cos(3.14) * 350,
    height / 2,
    100, 100
  );
  
  
//x軸の線(cosの基準線)
  line( 0, height / 2, 1000, height /2);

 

上記のｘ軸のcos関数を動かしましょう。

 

cos関数で特定の数値を増やしながら連続させると一定の横の範囲で動く

こちらも同じくさっきの項目の3のコードをほんの少し変えるだけで動きます。

変数にfloat range1 = 0とfloat range2 = 300を追加。

void drawのsin関数とcos関数の最後の部分をrange1とrange2に変えてます。

コピペして試してくださいね。

 

cos関数のみ機能させるコード

// cosのx軸だけを動かすコード【range2の部分を0にする】//

float position = 500; 
float angle = 0; 
float range1 = 300; 
float range2 = 000; //range2を0にする
float speed = 0.03;

//キャンバスの大きさの設定
void setup() {
  size(1000, 1000);
}

// cosのx軸だけを動かしたいのでsinのrange2をの部分を0にする

void draw(){
  float x = position + cos(angle) * range1; 
  float y = position + sin(angle) * range2; //rangeの部分が0なら機能しない
  ellipse(x, y, 100, 100);
  angle += speed;
}

 

 

 

応用のアイデアと僕が実際に作ったものをご紹介します。

オブジェクト指向とか配列とかはまだ使いこなせてないレベルです。中・上級者の方はいらつかせるかもしれませんがご理解して頂けると助かります。

 

Processingで三角関数の3つの応用例

 

 

 

1 回す形を変えてみる

// sin, cos関数で形を周回させる //

float position = 455; //★中心の位置を調整するために変更。微調整して下さい。
float angle = 0; 
float range = 300; 
float speed = 0.03;

void setup() {
  size(1000, 1000);
}

void draw(){
  float x = position + cos(angle) * range; 
  float y = position + sin(angle) * range;
  rect(x, y, 100, 100); //★ここを変更しています
  angle += speed; 
}

 

2 開始位置を変えてみる

// sin, cos関数で形を周回させる //

float position = 455; //★中心の位置を調整するために変更
float angle1 = 0; // angle1を追加
float angle2 = 3.14; // angle2を追加
float range = 300; 
float speed = 0.03;

void setup() {
  size(1000, 1000);
}

void draw(){
  // 0の位置から四角形が時計回りに動き始める
  float x1 = position + cos(angle1) * range; // x1に変更
  float y2 = position + sin(angle1) * range; // x2に変更
  rect(x1, y2, 100, 100); //x1とx2に変更しています
  angle1 += speed; //

// 3.14の位置から四角形が時計回りに動き始める
  float x3 = position + cos(angle2) * range; // x3を追加
  float y4 = position + sin(angle2) * range; // x4を追加
  rect(x3, y4, 100, 100); // x3とx4に変更しています
  angle2 += speed; //

}

 

3 スピードを変える

// sin, cos関数で形を周回させる //

float position = 455; //★中心の位置を調整するために変更
float angle1 = 0; 
float angle2 = 3.14; 
float range = 300; 
float speed1 = 0.03; //speed1を追加 
float speed2 = 1.00; //speed2を追加　数値を1.00に

void setup() {
  size(1000, 1000);
}

void draw(){
  // 0の位置から四角形が時計回りに動き始める
  float x1 = position + cos(angle1) * range; 
  float y2 = position + sin(angle1) * range; 
  rect(x1, y2, 100, 100); 
  angle1 += speed1; // speed1に

// 3.14の位置から四角形が時計回りに動き始める
  float x3 = position + cos(angle2) * range; // x3を追加
  float y4 = position + sin(angle2) * range; // x4を追加
  rect(x3, y4, 100, 100); // x3とx4に変更しています
  angle2 += speed2; // speed2に。とても動きが早くなる

}

 

Processingの三角関数で作品を作れるようになった結果

 

 

まとめ　｜　実際に色々と作って三角関数を使いこなす

 

他の表現方法と組み合わせると無限に色々なアートが作れるようになりますね。

 

それでは今日もハッピーコーディング。