Skip to content

Instantly share code, notes, and snippets.

@molotovbliss
Created May 1, 2022 11:11
Show Gist options
  • Save molotovbliss/53cfe49addf292318ac5f61c25a12186 to your computer and use it in GitHub Desktop.
Save molotovbliss/53cfe49addf292318ac5f61c25a12186 to your computer and use it in GitHub Desktop.
Waves
<canvas id="canvas"></canvas>
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
perlin = new ClassicalNoise(),
variation = 0.007,
amp = 160,
variators = [],
max_lines =
navigator.userAgent.toLowerCase().indexOf("firefox") > -1 ? 25 : 40,
canvasWidth,
canvasHeight,
start_y;
for (var i = 0, u = 0; i < max_lines; i++, u += 0.032) {
variators[i] = u;
}
function draw() {
ctx.shadowColor = "rgba(0, 0, 0, 1)";
ctx.shadowBlur = 6;
for (var i = 0; i <= max_lines; i++) {
ctx.beginPath();
ctx.moveTo(0, start_y);
for (var x = 0; x <= canvasWidth; x++) {
var y = perlin.noise(x * variation + variators[i], x * variation, 0);
ctx.lineTo(x, start_y + amp * y);
}
var color = Math.floor(50 * Math.abs(y));
var alpha = Math.min(Math.abs(y) + 1.5, 0.25);
ctx.strokeStyle = "rgba(255,255,255," + alpha * 2 + ")";
ctx.stroke();
ctx.closePath();
variators[i] += 0.0075;
}
}
(function init() {
resizeCanvas();
animate();
window.addEventListener("resize", resizeCanvas);
})();
function animate() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
draw();
requestAnimationFrame(animate);
}
function resizeCanvas() {
(canvasWidth = document.documentElement.clientWidth),
(canvasHeight = document.documentElement.clientHeight);
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);
start_y = canvasHeight / 2;
}
<script src="https://codepen.io/Thibka/pen/LWGOWR"></script>
html, body {
margin: 0;
background-color: black;
overflow: hidden;
background: gray
background: rgb(42,42,42);
background: radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(0,0,0,1) 100%);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment