様々な関数の使い方をおさらいし、作例コードを書くことで、自分の知識の定着を図っています。
今回は、randomGaussian() 関数の解説を行い、サンプルコードを書くことで、その使い方を学びます。p5.js は、安定版のバージョン 1.11.11 を使用しています。
内容については正確を期していますが、お気づきの点があればご指摘いただけると幸いです。
randomGaussian() 関数の説明と使い方
randomGaussian() | p5.js 公式リファレンス
説明
ガウス分布（正規分布）に適合する値の乱数を返す関数です。
正規分布 | Wikipedia
正規分布曲線をグラフで表すと、釣鐘状の曲線（ベル・カーブ）に見えます。正規分布の値は平均値の周りに集まります。標準偏差は正規分布の値の広がりを表します。
デフォルトでは、randomGaussian() はスケッチを実行するたびに異なる結果を生成します。randomSeed() 関数を使用すると、スケッチを実行するたびに同じ数列を生成できます。
randomGaussian() が返す値に最小値や最大値はありません。平均から遠い値が返る可能性は非常に低く、近い値が返る可能性は非常に高くなります。
書き方
randomGaussian([平均値], [標準偏差])
パラメータ
- 平均値： 平均値を数値で指定します。指定は任意です。
- 標準偏差： 標準偏差を数値で指定します。指定は任意です。
パラメータなしの randomGaussian() は、平均が 0、標準偏差が 1 の値を返します。
パラメータを 1 つ指定した randomGaussian() は、渡された引数を平均と解釈します。標準偏差は 1 です。
パラメータを 2 つ指定した randomGaussian() は、渡された最初の引数を平均と解釈し、2 番目の引数を標準偏差と解釈します。
返り値
数値： 乱数
前述のとおり、ここで返る乱数値に最小値や最大値はありませんが、ガウス分布の特性として高い確率で平均値付近の値が返ります。
- 「平均値 - 標準偏差」から「平均値 + 標準偏差」の間の値になる確率が 68.27%
- 「平均値 - 標準偏差 * 2」から「平均値 + 標準偏差 * 2」の間の値になる確率が 95.45%
- 「平均値 - 標準偏差 * 3」から「平均値 + 標準偏差 * 3」の間の値になる確率が 99.73%
p5.js 公式リファレンスのコード例の補足
function setup() {
createCanvas(100, 100);
background(200);
}
function draw() {
// Style the circles.
noStroke();
fill(0, 10);
// Uniform distribution between 0 and 100.
let x = random(100);
let y = 25;
circle(x, y, 5);
// Gaussian distribution with a mean of 50 and sd of 1.
x = randomGaussian(50);
y = 50;
circle(x, y, 5);
// Gaussian distribution with a mean of 50 and sd of 10.
x = randomGaussian(50, 10);
y = 75;
circle(x, y, 5);
}
x 方向にランダムな位置をとる点を複数個描画して、その分布を見せるものです。
- 上段が普通の random()
- 真ん中は randomGaussian(50) 「平均値 = 50 標準偏差 = 1」、パラメータが 1つなので標準偏差はデフォルト値の 1 になります。
- 下段は randomGaussian(50, 10) 「平均値 = 50 標準偏差 = 10」
点には fill(0, 10) で透明度を持たせ、ある位置に描画される確率の高低を濃度の濃淡で表しています。
randomGaussian() を使った作例
螺旋を点描する際の座標を randomGaussian() を使ってずらし、ぼんやりとした渦を描いてみました。
/**
* p5.js randomGaussian() 関数の作例
* 螺旋を正規分布でボンヤリ描画し、標準偏差を変化させてアニメーション
*
* @author @deconbatch
* @version 0.1
* @license CC0
* p5.js 1.11.11
* created 2025.10.23
*/
const CANVAS_SIZE = 360;
const ANIM_SEC = 6;
const FRAME_RATE = 24;
const FRAME_NUM_MAX = FRAME_RATE * ANIM_SEC;
const THETA_DIV_NUM = 100;
const SAMPLE_NUM = 40;
const STD_RATIO_MAX = 0.3;
const THETA_RND_FACTOR = 0.5;
const SPIRAL_TURNS_BASE = 5;
const SPIRAL_SIZE_RATIO = 0.7;
function setup() {
createCanvas(CANVAS_SIZE, CANVAS_SIZE);
frameRate(FRAME_RATE);
stroke("MidnightBlue");
strokeWeight(2);
}
function draw() {
const frameCnt = frameCount % FRAME_NUM_MAX;
const thetaMax = PI * (SPIRAL_TURNS_BASE + frameCnt / FRAME_RATE);
const thetaStep = thetaMax / THETA_DIV_NUM;
const stdRatio = STD_RATIO_MAX * (1.0 - frameCnt / FRAME_NUM_MAX);
background(255);
translate(CANVAS_SIZE * 0.5, CANVAS_SIZE * 0.5);
rotate(-10 * PI * frameCnt / FRAME_NUM_MAX);
for (let t = 0; t < thetaMax; t += thetaStep) {
let r = SPIRAL_SIZE_RATIO * CANVAS_SIZE * t / thetaMax;
for (let i = 0; i < SAMPLE_NUM; i++) {
let tRG = t + thetaStep * random(THETA_RND_FACTOR);
let rRG = randomGaussian(r, r * stdRatio);
point(rRG * cos(tRG), rRG * sin(tRG));
}
}
}
螺旋の弧に沿った側のズレ（角度のズレ）は random() で、弧と直角方向のズレ（半径のズレ）を randomGaussian() で実装しました。時間経過に従って標準偏差を小さくして「ぼんやり」→「くっきり」描画しています。
let tRG = t + thetaStep * random(THETA_RND_FACTOR);
let rRG = randomGaussian(r, r * stdRatio);
装飾として、時間経過に従って螺旋の巻き数を増やし、
const thetaMax = PI * (SPIRAL_TURNS_BASE + frameCnt / FRAME_RATE);
全体に回転を加えてみました。
rotate(-10 * PI * frameCnt / FRAME_NUM_MAX);
弧方向のズレ具合を調整すると表情の違った絵になります。
const THETA_RND_FACTOR = 0.1;
const THETA_RND_FACTOR = 1.0;
描画する点を増やしてみると、より正規分布らしさが出るでしょう。
const THETA_DIV_NUM = 500;
const SAMPLE_NUM = 100;
strokeWeight(0.5)
