見出し画像

p5.jsのnoiseで波線を書く - 5

p5.jsを基礎から復習しています。

基礎の基礎です。

noiseは、p5.jsの記事や本を見ていると絶対に出てくるので、慣れておきたいなと思っています。

今回はすごく単純でよく見る波線です。
点(point)をx軸に並べて、y軸の高さをnoiseで作っています。

noiseを使って波線を書く

画像1

let img, y, h;

function setup() {
	let canvas = createCanvas(640, 335, P2D);
	canvas.parent('canvas');

	colorMode(HSB, 360, 100, 100, 100);
	background(198, 54, 30, 100);
	stroke(70, 42, 96, 100);

	h = 0.0;

	for (let i = 0; i < width; i++) {
		h = h + 0.02;
		y = noise(h) * height;
		point(i, y);
	}
}

もっと、おしゃれな作品を作りたいと思ってますが、今はこれが限界です(泣)。

この記事が気に入ったらサポートをしてみませんか?