トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました

【Processing】TWO_PIの使い方

【Processing】TWO_PIの使い方
  • URLをコピーしました!
ワタタク

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

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

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

目次

【Processing】TWO_PIについて

TWO_PIについて
  • TWO_PIとは、英語で「円周率の2倍」という意味
  • TWO_PIは、約6.28の値を持っています
  • ラジアン(角度)では、TWO_PIは、360度
  • 円や円弧、円周を描くのに役に立つ
  • 主にarc()関数やsin()関数と組み合わせて使う

【Processing】TWO_PIを使った場合の位置を画像で確認【重要】

この位置を知っておくことが、TWO_PIを使った表現をするときにとても大事になってきます。

0の位置は右の位置と決まっています。

0を基準にTWO_PI(0と約6.28)と書いてある位置の確認をしてください。

ちなみに0.79がQUARTER_PIで、3.14がPIです。

4.71はPI + HALF_PI。

【Processing】TWO_PIを使った場合の位置を画像で確認【重要】

【Processing】TWO_PIの基本的な書き方

HALF_PIの書き方
  • arc()関数を使った場合の書き方
    • arc(x1, y1, x2, y2, 0, TWO_PI);
      • x1は円弧の横の中心の位置
      • y1は円弧の縦の中心の位置
      • x2は円弧の幅
      • y1は円弧の高さ
      • 0は円弧の開始位置

【Processing】TWO_PIの使い方2つ【画像とコード】

コードを見る前に、もう1度この図で(0、6.28)などの数値の位置を確認しておいてくださいね。

【1】TWO_PIを使って0の位置から、6.28までの位置の円を描く

【1】TWO_PIを使って0の位置から、6.28までの位置の半円を描く
size(500, 500); // ウィンドウサイズを500x500に設定
background(255); // 背景色を白に設定
noStroke(); // 輪郭線を描かないように設定
fill(255, 165, 0); // 塗りつぶしの色をオレンジに設定
arc(250, 250, 300, 300, 0, TWO_PI); // 中心が(250, 250)、幅と高さが300の0からTWO_PIまでの円を描く

【2】6.28の位置から、9.56までの位置の円弧を描く

【2】6.28の位置から、9.56までの位置の円弧を描く
size(500, 500); // ウィンドウサイズを500x500に設定
background(255); // 背景色を白に設定
noStroke(); // 輪郭線を描かないように設定
fill(255, 165, 0); // 塗りつぶしの色をオレンジに設定
arc(250, 250, 300, 300, 6.28, 9.56); // 中心が(250, 250)、幅と高さが300で6.28の位置から、9.56までの円弧を描く

【Processing】TWO_PIはどんな表現で使えそうか

円を使った表現、arc()関数やsin()関数、cos()関数を使った表現をするときに使おうと思います。

TWO_PIとcos()関数を使った表現。

【Processing】TWO_PIはどんな表現で使えそうか
void setup() {
  size(800, 800);
  background(255);
  noFill();
  stroke(0, 50);  // 黒色で少し透明な線を使う
}

void draw() {
  translate(width/2, height/2);  // キャンバスの中心に移動
  float radius = 300;  // 円の半径
  for (float angle = 0; angle < TWO_PI; angle += 0.01) {
    float x = radius * cos(angle);
    float y = radius * sin(angle);
    ellipse(x, y, 50, 50);  // 小さな円を描く
  }
  noLoop();  // 一回だけ描画して終了
}

【Processing】TWO_PIを使ってみた感想

PIの記事で円周率について知っていたので理解が早かったです。

ワタタク

それでは今日もレッツワクワクコーディング。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次