【Processing】ambient()関数の使い方【3D表現の周囲の光の色を設定する】

2024年10月2日

URLをコピーしました！

ワタタク

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

この記事を書いた人

ワタタク

当ブログがはじめての方へ

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

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

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

ambient()関数について

ambientは「周囲の」という意味
ambient()関数は、3D表現で使われる関数で、物体に当たる周囲の光の色を設定します。これにより、物体がどのように見えるかが変わる。
主にlights()関数と一緒に使う。lights()関数を使わずにコードを書くと色が塗りつぶされた図形になった（少し先に例あり）
- 関連記事：【Processing】lights()関数の使い方【図形などに光を当てる】

【Processing】ambient()関数の主な書き方

以下のように書きます。

ambient(r, g, b);

r、g、bはそれぞれ赤、緑、青の色の値。

ambient(255, 0, 0);と書くと、赤い光を設定します。

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

1 図形の周囲に光が当たっている感じ

lights()関数と一緒に使うことで、図形の周囲に光が当たっているように感じる。

void setup() {
  size(400, 400, P3D);
  background(0);
  noStroke();
}

void draw() {
  background(0);
  lights();
  // 赤い周囲光と赤い物体の色
  ambient(255, 0, 0);
  fill(255, 0, 0);
  translate(100, 200, 0);
  sphere(60);

  // 緑の周囲光と緑の物体の色
  ambient(0, 255, 0);
  fill(0, 255, 0);
  translate(200, 0, 0);
  sphere(60);

}

2 ambient()単体で使うと塗りつぶした図形になった

void setup() {
  size(400, 400, P3D);
  background(0);
  noStroke();
}

void draw() {
  background(0);

  // 赤い周囲光と赤い物体の色
  ambient(255, 0, 0);
  fill(255, 0, 0);
  translate(100, 200, 0);
  sphere(60);

  // 緑の周囲光と緑の物体の色
  ambient(0, 255, 0);
  fill(0, 255, 0);
  translate(200, 0, 0);
  sphere(60);

}

【Processing】ambient()関数でマウスの位置によって光が変わるようにする【画像とコードの解説】

void setup() {
  size(400, 400, P3D);
  background(0);
  noStroke();
}

void draw() {
  background(0);
  lights();
  
  // マウスの位置に基づいて赤と緑の光の強さを設定
  //map()関数を使ってマウスのX座標とY座標を0から255の範囲に変換し、それをambient()関数の引数として使用しています。その結果マウスの位置に応じて赤と緑の光の強さが変化
  // 記事の先にコードの解説あり
  int redValue = (int) map(mouseX, 0, width, 0, 255);
  int greenValue = (int) map(mouseY, 0, height, 0, 255);

  // 赤い周囲光と赤い物体の色
  //pushMatrix()とpopMatrix()を使って座標系を保存・復元し、各球体の位置を独立して設定
  ambient(redValue, 0, 0);
  fill(255, 0, 0);
  pushMatrix();
  translate(100, 200, 0);
  sphere(60);
  popMatrix();

  // 緑の周囲光と緑の物体の色
  //pushMatrix()とpopMatrix()を使って座標系を保存・復元し、各球体の位置を独立して設定
  ambient(0, greenValue, 0);
  fill(0, 255, 0);
  pushMatrix();
  translate(300, 200, 0);
  sphere(60);
  popMatrix();
}

14行目と15行目の解説

14行目のコード。15行目も同じ考え方。

int redValue = (int) map(mouseX, 0, width, 0, 255);

map()関数は、ある範囲の数値を別の範囲の数値に変換するための関数。0から100までの数値を0から255までの数値に変換するようなこと
mouseXの値を0からwidth（画面の幅）の範囲で取得。
その値を0から255の範囲に変換
マウスが画面の左端にあるとき、mouseXは0です。このとき、redValueも0になる
マウスが画面の右端にあるとき、mouseXはwidthと同じ値になります。このとき、redValueは255になる

`map()`関数と`(int)`キャストについて

int redValue = (int) map(mouseY, 0, height, 0, 255);の(int)の部分は何をしているのかについて。

(int)はキャストと呼ばれていて、数値を整数に変換するために使う
- キャストの意味：英語のcastで変えるという意味がある
- Processingでは、データ型を変えることを表現することをキャストという
map()関数は小数点を含む数値を返すことがありますが、色の値は整数の必要がある。なので、(int)を使って小数点以下を切り捨てて整数に変換
map(mouseY, 0, height, 0, 255)の部分
- mouseYはマウスのY座標
- mouseYが200の場合、画面の高さが400だとすると、map()関数は200を0から255の範囲に変換します。この場合、結果は127.5に
- map()関数の結果は127.5ですが、色の値は整数でなければならない
- (int)を使って127.5を整数に変換。この場合、127になる
なぜ色の値は整数なのか
- Processingで使われるRGBの値は整数
- RGBは赤（Red）、緑（Green）、青（Blue）の3つの成分で色を表現
- それぞれの成分は0から255の範囲の整数値で指定