Processing

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

Processingの三角関数で作品を作れるようになる5ステップ
妄想の彼女
妄想の彼女
Processingでsin関数とcos関数を使った表現をしたいんだけど分からない。

自分で工夫して表現できるようになるためになった理解の仕方を教えて欲しい。

わたたく
わたたく
そんな悩みにお答えするね。

 

今回の記事では、

  • Processingの三角関数で作品を作れるようになる5ステップ
  • Processingの三角関数の3つの応用例
  • Processingの三角関数を自分で使えるようになった結果
  • まとめ | 実際に色々と作って三角関数を使いこなす

について書いています。

 

この記事を書いている僕

思いっきり文系の人間。

高校は工業系だが理数系やC言語の授業もさっぱり分からず低い点数ばかりで苦しんでプログラミングや理数系は避けてきた人生。

2020年12月25日の31歳。プログラマーと話をしてやってみようと思い始め、2020年12月26日22時頃からプログラミングを開始。本当の完全な初心者。

Processingを中心に勉強を始めました。

 

Processingの三角関数。

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

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

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

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

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

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

Processingの三角関数で作品を作れるようになる5ステップ最後の方の項目でコピペできる作品

 

Processingの三角関数(sin関数、cos関数を理解)

  1. 円の範囲とx軸とy軸について
  2. 円の範囲の円周率の数値と動きの向き【覚えなくてOK】
  3. sin関数とcos関数を組み合わせて円を周回させる【コードの書き方の例と意味の解説】
  4. sin関数の縦の範囲だけで動かす方法
  5. cos関数の横の範囲だけで動かす方法

 

わたたく
わたたく
順番に解説をしていくね。

 

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

わたたく
わたたく
まずこの内容を知っておかないとコードの中で(なんでこんな動き方をするんだろう?)って疑問に思います。

 

1 円の範囲とx軸とy軸について横がx軸 縦がy軸 下に解説

 

円について

  • 円には範囲がある
  • コードを工夫することによっ様々な動きがつく

 

縦の線について

  • 縦の線がy軸でsin関数を使う時に関係してきます
  • 線の上に1と線の下に-1の数値がある

 

横の線について

  • 横の線がx軸でcos関数を使う時に関係してきます
  • 線の右に1、左に-1の数値があります

 

妄想の彼女
妄想の彼女
なるほど。そういうのがあるのね。
わたたく
わたたく
もう1つ知っておいて欲しい知識を紹介するね。

 

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

わたたく
わたたく
さっきの円の周りには数値がたくさんあるの。覚えなくていいから何となく分かっていて。

 

2 円の範囲の円周率の数値と動きの向き【覚えなくてOK】0の位置から時計回りに0.01ずつ数値が増えていく。

 

円の範囲の円周率について

  • xの線で右側。円と重なっている所が0
  • 0の位置から時計回りに1.57→3.14→4.71→0の位置に戻ってきて、2周目も基本は同じ動きをする
  • それぞれの数値の間にも数値はある。0→0.01→0.02と増えていって1.57や3.14になっている。この数値の増やし方によって表現が変わってくる

 

妄想の彼女
妄想の彼女
了解。

時計回りに動いて、2周目や3周目も何周でも可能ってことね。

わたたく
わたたく
1周目で0の所に戻って360度。2周目は0の所に戻ると720度。

次は円を周回させるコードを書いて解説。コピペしてみてね。

 

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

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とyを統一するのがおすすめ */
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関数は縦の範囲

4 sin関数は縦の範囲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関数の縦に動かしてみる。

 

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

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関数は横の範囲

5 cos関数は横の範囲cos関数だけを機能させると縦軸の上に表示される 向かい側にある数値を入力したら同じ位置で表示

 

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

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

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

 

 

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

 

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

 

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つの応用例

Processingで三角関数の応用例

 

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

  1. 回す形を変える
  2. 開始位置を変えてみる
  3. スピードを変える

 

わたたく
わたたく
もっとありますがとりあえず5つのみを。

たくさん作ったら追加していくね。

 

1 回す形を変えてみる

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 開始位置を変えてみる

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 スピードを変える

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の三角関数で作品を作れるようになった結果

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

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

  • 難しいを乗り越えれて嬉しい
  • Processingの表現の幅が広がる
  • 他の表現と組み合わせると絶対に楽しい
  • Processingがさらに好きになった
  • もっと勉強する意欲が湧く
  • AIの分野の数学も頑張ろうと思えた
  • 自信になる

 

わたたく
わたたく
僕は文系でね。数学が苦手で三角関数って聞いた瞬間に嫌だなって思ったけどさ。

どうしても三角関数を使った表現したい気持ちの方が強かった。

なんか1つ限界超えた感じがある。

妄想の彼女
妄想の彼女
苦手なことを調べてやり遂げたって自信になるよね。

あたしも頑張るぞ!!

 

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

まとめ | 実際に色々と作って三角関数を使いこなす
妄想の彼女
妄想の彼女
自分なりに作って練習してみるね。
わたたく
わたたく
僕もたくさん作るよ。

色とかもつけたいし。

 

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

 

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

ABOUT ME
わたたく
わたたく
『わたたくわくわく』はワクワクして挑戦したことや気づきを書いて、ブログと一緒に自分を成長させることが目的で運営をしています。海外経験/読書/漫画/アニメ/映画/音楽/ゲームからの気づきなど、成長すると感じたことを何でも書いています。興味があるものをお読み頂ければ嬉しいです。