Dezzign · July 11, 2018 12:32
diff --git a/index.html b/index.html
 <canvas id="canvas"> Can I have</canvas>
diff --git a/script.js b/script.js
 var canvas    = document.getElementById('canvas'),
    ctx       = canvas.getContext('2d'),
 	  perlin    = new ClassicalNoise(),
    variation = .003,
    amp       = 200,
    variators = [],
    max_lines = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? 25 : 30,
    canvasWidth,
    canvasHeight,
    start_y;

 for (var i = 0, u = 0; i < max_lines; i++, u+=.02) {
  variators[i] = u;
 }

 function draw(){
  ctx.shadowColor = "rgba(43, 205, 255, 1)";
  ctx.shadowBlur = 0;
  
  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(150*Math.abs(y));
    var alpha = Math.min(Math.abs(y), .8)+.1;
    ctx.strokeStyle = "rgba(80,210,240,"+alpha+")";
    ctx.stroke();
    ctx.closePath();

    variators[i] += .005;
  }
 }

 (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;
 }
diff --git a/scripts b/scripts
 <script src="https://codepen.io/Thibka/pen/LWGOWR"></script>
diff --git a/style.css b/style.css
 html, body {
  margin: 0;
  background-color: black;
  overflow: hidden;
 }
diff --git a/waves.markdown b/waves.markdown
	var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	perlin = new ClassicalNoise(),
	variation = .003,
	amp = 200,
	variators = [],
	max_lines = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? 25 : 30,
	canvasWidth,
	canvasHeight,
	start_y;

	for (var i = 0, u = 0; i < max_lines; i++, u+=.02) {
	variators[i] = u;
	}

	function draw(){
	ctx.shadowColor = "rgba(43, 205, 255, 1)";
	ctx.shadowBlur = 0;

	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(xvariation+variators[i], xvariation, 0);
	ctx.lineTo(x, start_y + amp*y);
	}
	var color = Math.floor(150*Math.abs(y));
	var alpha = Math.min(Math.abs(y), .8)+.1;
	ctx.strokeStyle = "rgba(80,210,240,"+alpha+")";
	ctx.stroke();
	ctx.closePath();

	variators[i] += .005;
	}
	}

	(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;
	}
	html, body {
	margin: 0;
	background-color: black;
	overflow: hidden;
	}