こんにちは、AQUARING かに です。

今回は数値の累乗を使った表現のテクニックを紹介します。
p5.js というよりは数学寄りの内容になりますが、数学が苦手な方でもすぐできて、いろんな場面で応用が効くテクニックなのでぜひやってみてください！

累乗とは？

累乗（るいじょう）とは同じ数を何度も掛け合わせることです。
指数は掛け合わせる回数のこと。
Math.pow() （p5.jsでは pow()） や **（べき乗演算子） を使うことで累乗が書けます。

let x = 3;

// ↓以下はすべて同じ意味
let v1 = x * x;         // >> 9
let v2 = Math.pow(x, 2);// >> 9
let v3 = x ** 2;        // >> 9

等間隔に繰り返すスケッチ

円の色と直径が等間隔に繰り返すシンプルなスケッチを例に説明していきます。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  noStroke();
 
  let NUM = 10;
  let diameter = 350;
  for (let i = NUM; i > 0; i--) {// 大きいものから描画したいので逆順
    let d = i * diameter / NUM;// 直径
    fill(i * 255 / NUM);
    circle(width / 2, height / 2, d);
  }
}

等間隔だとちょっとのっぺりした、機械的に配置したような印象がありますね。

パーセントベースに書き換える

一番大きい円を 1 とする 0 ~ 1 の変数 pct （パーセントの略です）を作って、円の直径と明るさを pct を使って算出します。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  noStroke();
  
  let NUM = 10;
  let diameter = 350;
  for (let i = NUM; i > 0; i--) {
    let pct = i / NUM;// 0 ~ 1 のパーセンテージ
    let d = pct * diameter;// pct から算出
    fill(pct * 255);// pct から算出
    circle(width / 2, height / 2, d);
  }
}

この時点ではまだ等間隔のままなので見た目に変化はありませんが、これで下準備が整いました。

パーセンテージを累乗する

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  noStroke();
 
  let NUM = 10;
  let diameter = 350;
  for (let i = NUM; i > 0; i--) {
    let pct = i / NUM;
    pct = pow(pct, 2);// パーセンテージを２乗する
    let d = pct * diameter;
    fill(pct * 255);
    circle(width / 2, height / 2, d);
  }
}

追加したのは以下の１行のみです。

pct = pow(pct, 2);// パーセンテージを二乗する

ひとつ前のステップで作っておいたパーセンテージの変数 pct を二乗しただけですが、直径と明るさが中心に向かって段々と収束するようになって、等間隔の時の機械的に配置したような印象が軽減しました。

以下のようにマウス位置で指数が動的に変わるようにしてみるとインタラクティブに理解できるとおもいます。

let e = map(mouseX, 0, width, 1, 2);// マウス左右移動で累乗の指数を 1 ~ 2 に変化
pct = pow(pct, e);

グラフでみる

等間隔と累乗でどのように数値が変化するかグラフでみてみましょう。

y = x

等間隔の場合は比例のグラフになります。

y = x^2

0 ~ 1 の数値を累乗することで、直線のグラフをイージングのような曲線のグラフにすることができます。
これによって値の増加量を自然に変化させることができます。

y = x^3

累乗の指数を大きくするごとに曲率が大きくなっていきます。
累乗の指数は作りたい表現にあわせて調整しましょう。

累乗テクニックを使ったスケッチ

ランダムな座標配置に累乗を用いることで意図的に偏りを生み出して、すりガラスのようなザラザラした質感を表現しています。

レーザー１本の中に大量のcyliner()を描画することで擬似的なボリュームレンダリングを実装していて、その半径の大きさに累乗を使うことでレーザー光の収束率を制御しています。

shadowBlur の値に累乗を用いることで自然な光の広がりを表現しています。
累乗テクニックは発光表現と相性がいいですね。

さいごに

ほんとにちょっとコードを変更するだけですが、見た目の印象がガラッと変わるので、ぜひつかってみてください〜！
正規化した数値を累乗するだけなので p5.js だけでなくその他のクリエイティブコーディング環境でもすぐ使えますね！