![見出し画像](https://assets.st-note.com/production/uploads/images/30054418/rectangle_large_type_2_b4a14ea90fec292f963372641d34fa74.png?width=800)
p5.jsのnoiseで波線を書く - 5
p5.jsを基礎から復習しています。
基礎の基礎です。
noiseは、p5.jsの記事や本を見ていると絶対に出てくるので、慣れておきたいなと思っています。
今回はすごく単純でよく見る波線です。
点(point)をx軸に並べて、y軸の高さをnoiseで作っています。
noiseを使って波線を書く
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);
}
}
もっと、おしゃれな作品を作りたいと思ってますが、今はこれが限界です(泣)。
この記事が気に入ったらサポートをしてみませんか?