var simplex = new SimplexNoise(); let noiseScale = 100; let speed = 0.2; let frame = 0; let amount = 200; let data = []; const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); let width = window.innerWidth; let height = window.innerHeight; let angle = 3 * Math.PI / 180; Number.prototype.map = function (in_min, in_max, out_min, out_max) { return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; } canvas.width = width; canvas.height = height; let space = width / amount; let dSpace = 10; let dspacecurrent = 0; let eSpace = 5; let espacecurrent = 0; let s = []; let s2 = []; for (i = 0; i < 10; i++) { s.push(dspacecurrent); dspacecurrent = dspacecurrent + dSpace; s2.push(espacecurrent); espacecurrent = espacecurrent + eSpace; } let rh = 0.2, rl = 1.8; let engine = function () { context.fillStyle = 'rgba(0,0,0,0.03)'; context.fillRect(0, 0, canvas.width, canvas.height); context.beginPath(); let current = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; for (i = s[0]; i < (amount + s[0]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[0]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === 0) { context.moveTo(current[0], (height / 2) * sNoise); } else { context.lineTo(current[0], (height / 2) * sNoise); } current[0] = current[0] + space; } for (i = s[1]; i < (amount + s[1]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[1]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[1]) { context.moveTo(current[1], (height / 2) * sNoise); } else { context.lineTo(current[1], (height / 2) * sNoise); } current[1] = current[1] + space; } for (i = s[2]; i < (amount + s[2]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[2]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[2]) { context.moveTo(current[2], (height / 2) * sNoise); } else { context.lineTo(current[2], (height / 2) * sNoise); } current[2] = current[2] + space; } for (i = s[3]; i < (amount + s[3]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[3]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[3]) { context.moveTo(current[3], (height / 2) * sNoise); } else { context.lineTo(current[3], (height / 2) * sNoise); } current[3] = current[3] + space; } for (i = s[4]; i < (amount + s[4]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[4]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[4]) { context.moveTo(current[4], (height / 2) * sNoise); } else { context.lineTo(current[4], (height / 2) * sNoise); } current[4] = current[4] + space; } for (i = s[5]; i < (amount + s[5]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[5]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[5]) { context.moveTo(current[5], (height / 2) * sNoise); } else { context.lineTo(current[5], (height / 2) * sNoise); } current[5] = current[5] + space; } for (i = s[6]; i < (amount + s[6]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[6]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[6]) { context.moveTo(current[6], (height / 2) * sNoise); } else { context.lineTo(current[6], (height / 2) * sNoise); } current[6] = current[6] + space; } for (i = s[7]; i < (amount + s[7]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[7]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[7]) { context.moveTo(current[7], (height / 2) * sNoise); } else { context.lineTo(current[7], (height / 2) * sNoise); } current[7] = current[7] + space; } for (i = s[8]; i < (amount + s[8]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[8]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[8]) { context.moveTo(current[8], (height / 2) * sNoise); } else { context.lineTo(current[8], (height / 2) * sNoise); } current[8] = current[8] + space; } for (i = s[9]; i < (amount + s[9]); i++) { let sNoise = simplex.noise2D(i / noiseScale, (frame + s2[9]) / noiseScale); sNoise = sNoise.map(-1, 1, rh, rl); if (i === s[9]) { context.moveTo(current[9], (height / 2) * sNoise); } else { context.lineTo(current[9], (height / 2) * sNoise); } current[9] = current[9] + space; } context.strokeStyle = "hsl(" + frame * 0.9 + ", 100%, 50%)"; context.stroke(); context.restore; frame = frame + speed; requestAnimationFrame(engine); } engine();

Noise Waves