縦横方向に波線を描く

こんにちは．ふじえもんです．

縦横方向に波線を描きたくなったのでやってみました．
藤と川をイメージしてそれぞれの色，縦と横方向にsin関数を使って描いてみました．

縦方向はrotate()とtranslate()を使って描画方向を変えてやります．

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(255);
  strokeWeight(4);
	stroke("#23C4DC");
	drawwaves(20, 40 , 0.05, 40);

	stroke("#A09BD8");
	push();
	translate(0, height);
	rotate(-HALF_PI);
	drawwaves(20, 40 , 0.05, 40);
	pop();
}

function drawwaves(waves, spacing, basefrequency, amplitude){
	for(let v = 0; v < waves; v++){
		for(let h = 0; h <= width; h++){
			let frequency = basefrequency;
			let y = sin(h * frequency) * amplitude + v * spacing;
			point(h, y);
		}
	}
}

で，せっかくなら波らしく動いてほしいので，数秒動くようにしてみました．

let time = 0;
function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(255);
  strokeWeight(4);
	stroke("#23C4DC");
	drawwaves(20, 40 , 0.05, 40, time);

	stroke("#A09BD8");
	push();
	translate(0, height);
	rotate(-HALF_PI);
	drawwaves(20, 40 , 0.05, 40, time);
	pop();
	time += 0.1;
}

function drawwaves(waves, spacing, basefrequency, amplitude, time){
	for(let v = 0; v < waves; v++){
		for(let h = 0; h <= width; h++){
			let frequency = basefrequency;
			let y = sin(h * frequency + time) * amplitude + v * spacing;
			point(h, y);
		}
	}
}

動作している様子はこちらのsketchからご覧いただけます．

以上．ふじえもん．