78 lines
1.5 KiB
JavaScript
78 lines
1.5 KiB
JavaScript
function getRandomWave(x, y) {
|
|
return noise.simplex2(x, y);
|
|
}
|
|
|
|
function adjustCanvas(canvasElement) {
|
|
canvasElement.width = window.innerWidth;
|
|
canvasElement.height = window.innerHeight;
|
|
return canvasElement;
|
|
}
|
|
|
|
window.addEventListener('resize', _ => adjustCanvas(canvas));
|
|
|
|
var canvas = adjustCanvas(document.createElement('canvas'));
|
|
var ctx = canvas.getContext('2d');
|
|
document.body.appendChild(canvas);
|
|
canvas.addEventListener('click', reset);
|
|
|
|
var noiseX, noiseY, difference, x, y, thickness, frequency, gap, wavelength, baseY;
|
|
|
|
var colors = [
|
|
'black',
|
|
'hotpink',
|
|
'crimson',
|
|
'#fd5'];
|
|
|
|
|
|
function randomFrom(arr) {
|
|
return arr[Math.floor(Math.random() * arr.length)];
|
|
}
|
|
|
|
reset();
|
|
|
|
function reset() {
|
|
noiseX = noiseY = 0;
|
|
x = y = 0;
|
|
difference = .0125;
|
|
thickness = 5 + Math.round(Math.random() * 5);
|
|
frequency = 1;
|
|
gap = thickness + Math.round(Math.random() * 10);
|
|
wavelength = 100;
|
|
baseY = -wavelength;
|
|
noise.seed(Math.random());
|
|
draw(null, true);
|
|
}
|
|
|
|
function draw(ts, isFirst) {
|
|
if (baseY < window.innerHeight + wavelength) {
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
if (isFirst) {
|
|
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
x = 0;
|
|
baseY += gap;
|
|
noiseX = 0;
|
|
noiseY += difference;
|
|
|
|
while (x < window.innerWidth) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y + baseY);
|
|
|
|
x += frequency;
|
|
|
|
y = getRandomWave(
|
|
noiseX += .004,
|
|
noiseY) *
|
|
wavelength;
|
|
|
|
ctx.lineTo(x, y + baseY);
|
|
ctx.lineWidth = thickness;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = randomFrom(colors);
|
|
ctx.stroke();
|
|
}
|
|
|
|
} |