【Processing】cos()関数について【X座標を使って波を描く】

2024年10月16日

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「cos()関数」を理解し、自分なりに使ってみること。

この記事を書いた人

ワタタク

プロフィール

クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
コンセプトは「クリエイティブコーディング1万時間の歩き方」
参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

記事内のProcessingのバージョンは4.3。

【Processing】cos()関数について

cos()関数について

cos()は、英語のcosine（コサイン）の略です。
cos()は、三角形や円を使って、角度とその周りの点の位置を計算する数学の関数
cos()は、単位円（半径1の円）において、角度に対応する点のX座標を表します。具体的には、中心が原点 (0, 0) の単位円上で、角度（ラジアン）に基づいてX座標を計算
波の動きもつくることができる
cos() 関数を使うときの注意点は、角度がラジアン（radian）であること
ラジアンは度数（degree）と違うので、計算するときに変換が必要
- 関連記事：【Processing】radians()関数の使い方【ラジアン数値に変換する】
- 関連記事：【Processing】degrees()関数の使い方【ラジアン（数値）を角度に変化させる】

【Processing】cos()関数の書き方【構文】

cos()関数の書き方【構文】

cos(angle)
- angleは角度という意味
- angleはラジアン（数値）

【Processing】cos()関数の使い方【画像とコード】

float offset = 500.0;  // Y座標の基準となる値（画面中央に近い位置）
float scaleVal = 300.0;  // 波の振幅（波の高さ）
float angleInc = PI/50.0;  // 角度の増加量（波の滑らかさに影響）

void setup() {
  size(1000, 1000);  // ウィンドウサイズを1000x1000に設定
  noStroke();  // 図形のアウトライン（線）を描かない設定
  fill(0);  // 図形を黒色で塗りつぶす設定
}

void draw() {
  background(204);  // 背景を淡いグレーに設定
  float angle = 0.0;  // 角度を0で初期化
  for (int x = 0; x < width; x += 5) {  // X座標を5ピクセルずつ動かしていくループ
    // cos()を使ってY座標を計算（Y座標の基準点に波を重ねる）
    float y = offset + (cos(angle) * scaleVal);  
    rect(x, y, 2, 4);  // X座標と計算したY座標に2x4ピクセルの長方形を描画
    angle += angleInc;  // 角度を増加させて次の波の位置を計算
  }
}