p5.js 乱数
ランダムな色で線を引く
random01.jsfunction setup() {
createCanvas(400, 400);
}
function draw() {
randomSeed(0); //乱数を固定する
for (let i = 0; i < width; i++) {
let r = random(0, 255); // 0-255で乱数を発生させる
stroke(r);
line(i, 0, i, height);
}
}ランダムな位置で線を引く
random02.jsfunction setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
stroke(100);
randomSeed(0);
for (let i = 20; i < width; i+=20) {
let r = random(-10, 10);
line(i + r, 10, i - r, height-10);
}
}ガウス分布(正規分布)をもとに線を引く
random03a.jsfunction setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
randomSeed(0);
for (let x = 0; x < width; x++) {
let y = randomGaussian(200, 50); //平均, 標準偏差
stroke(255);
strokeWeight(1);
line(x, height/2, x, y);
stroke(0);
strokeWeight(5);
point(x,y);
}
}random03b.jsfunction setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background(200);
randomSeed(0);
let x_old;
let y_old;
for(let x = 10; x <= width-10; x += 10) {
let y = randomGaussian(200, 50);
stroke(0);
strokeWeight(10);
point(x, y);
stroke(255);
strokeWeight(2);
line(x, y, x_old, y_old);
x_old = x;
y_old = y;
}
}ノイズ(パーリンノイズ)をもとに四角を描く
noise.jslet v = 0;
let inc = 0.1;
function setup() {
createCanvas(400, 400);
noStroke();
fill(0);
frameRate(10);
//noLoop();
}
function draw() {
background(200);
for(let x = 10; x < width - 10; x += 10){
let n = noise(v) * 70.0;
rect(x, 10+n, 8, 300);
v = v + inc;
}
}ノイズを使って雲模様を書く
combo.jslet x_noise = 0.0;
let y_noise = 0.0;
let inc = 0.01;
function setup() {
createCanvas(400, 400);
strokeWeight(10);
noLoop();
}
function draw() {
background(0);
for (let y = 0; y < height; y+=5){
for (let x = 0; x < width; x+=5){
let gray = noise(x_noise, y_noise)*255;
stroke(gray);
point(x,y);
x_noise = x_noise + inc;
}
x_noise = 0;
y_noise = y_noise + inc;
}
}参考文献
p5.js Reference
「Processingをはじめよう 第2版」
『Processing ビジュアルデザイナーとアーティストのためのプログラミング入門』
