p5.js 有提供一些隨機參數供我們在創作的時候可以利用，分別是

• randomGaussian
• random
• noise

但等等，隨機參數有什麼作用呢?什麼情況會用到隨機阿?

如果我們今天的作品需要加入一點不規則，而且要可以定義不規則的範圍，就可以使用到上面三個參數，像下圖我們想要做出大小不同，裡面留白也不一樣大的滿版方形，就可以帶入使用

let colors= "072448/54d2d2/ffcb00/f8aa4b/ff6150".split("/").map(a=>"#"+a)

let margin = 10;
function setup() {
 createCanvas(displayWidth, displayHeight);
  frameRate(2);
 	background(220);
	rectMode(CENTER)
	for(let x = margin; x < width; x +=  100){
        for(let y = margin; y <= height; y += 100){
			r = random(colors);
			let rectSize = random(30,100)
			noStroke();
			fill(r);
			rect(x+50,y, rectSize);
			fill(220)
			rect(x+50,y, random(6,28));
 	 	}
	}
 

}

function draw() {
}

random()

上面例子就是使用到了 random()，參數會返回一個隨機浮點數，最多可以塞兩個API，也可以都不給(會返回0-1之間的浮點數)

random() //return 0-1

random(1,20) //return 1-20之間

let code = ['java', 'js', 'ruby', 'golan'];
let result = random(code);

result 會出現陣列中隨機一名

randomGaussian()

正常來說random 只會返回設定的最大與最小值之間，不會超過，也不會小於設定值，但如果我們需要一種浮動的常態分佈，我們就會用到randomGaussian()，它模擬高斯或一般分佈的隨機數，與random()不同的是，它大部分會浮動在第一個參數(標準值)上下，至於上下的範圍多少呢?我們可以用第二個參數設定(浮動值)，返回偏離平均值的概率非常低，若不給與參數也是可以的，標準值會預設為0，而浮動值會自動落在1，來看看範例吧

randomGaussian(100,20)

100 + 20 ,100-20
結果大部分會在120,80之間，
少數會超出120或少於80

範例

let circle1 = new Array(360); //360度
let circle2 = new Array(360); //360度
let hues = [];
let nScl = 0.006;

function setup(){
		frameRate(4);
		createCanvas(windowWidth, windowHeight);
		background('#fff1e6');
		for(let i=0; i<10; i++){
			hues.push(random(360));
		}
		colorMode(HSB, 360, 100, 100, 100);
		for (let i = 0; i < circle1.length; i++) {
			circle1[i] = floor(randomGaussian(120, 180)); //每條線的長度 大部分在120+-180之間
			circle2[i] = floor(randomGaussian(0, 500));
		}
}

function draw(){
	if(frameCount >1) return
		background('#fff1e6');  
		translate(windowWidth / 2, windowHeight / 2);
		// console.log(PI, TAU)
		for (let i = 0; i <  circle1.length; i++) {
			rotate(TAU / circle1.length); 
			//PI 轉半圈 	0.0087
			//TAU 轉一圈 0.0174
			//color
			let h = hues[int(noise(windowWidth*i*nScl , windowHeight*i*nScl ) * 10)];//color
			stroke('green');
			strokeWeight(2)
			let dist1 = abs(circle1[i]);
			let dist2 = abs(circle2[i]);
			line(dist2, 0, dist1, 0);
		}
}

noise()

可以看到前兩個隨機，都是返回完全不固定，沒有規律可言的 真!隨機數列，如果今天我們想要返回有規律的隨機呢?等等，這句話不會太累了嗎，隨機就隨機我還要辦固定勒，到底用在哪阿。像這樣的東西當然就是因為有需求所以產生，想想如果我們今天要畫海浪，自創的地形圖，就會用到noise了。它會返回該個坐標處的 Perlin 噪聲值。Perlin 噪聲是一種隨機序列生成器，它會產生自然有序、諧波的數字序列。

Perlin 噪聲本人長這樣，不要懷疑，它就是一個圖面，而且有Z軸可以塞

通常可以給與x,y,z三個座標，三個坐標之間的差異越小，產生的噪聲序列就越平滑。通常0.005-0.03 最適合大多數應用。

let ranges = 100;
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
		background(0);
    noFill();
    strokeWeight(2);

    for (let i = 0; i < ranges; i++) {
        let paint = float(map(i, 0, ranges, 0, 255));
        stroke(paint);

        beginShape();
        for (let x = -10; x < width + 11; x += 20) {
            let n = float(noise(x * 0.001, i * 0.01, frameCount * 0.02));
            let y = float(map(n, 0, 1, 0, height));
            vertex(x, y);
        }
        endShape();
    }
}

結語

開始累了，才第九天QQ，我要偷討拍一下QQQ