Sineworm

Worm dude.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Sineworm</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
   <canvas id="canvas" width="640" height="640">
   <!-- OPTION 1: leave a message here if browser doesn't support canvas -->
	      Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas. 

		<!-- OPTION 2: put fallback content (text, image, Flash, etc.) if the browser doesn't support canvas -->
</canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
canvas {
  border: solid 1px #000;
}
body {
  background-color: #83ffef;
}
* {
  margin: 0;
  padding: 0;
}
/* Downloaded from https://www.codeseek.co/ */
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var controls ={
  amp: window.innerHeight / 4,
  freq: 0.01,
  off: 0,
  angle: 0,
};
var mx = 0;
var my = 0;
canvas.addEventListener('mousemove', function(e) {
  mx = e.clientX;
  my = e.clientY;
});
function offset(x, y, angle, length) {
    var result = {};
    result.x = Math.round(Math.cos(angle * Math.PI / 180) * length + x);
    result.y = Math.round(Math.sin(angle * Math.PI / 180) * length + y);

    return result;
}
Math.dist=function(x1,y1,x2,y2){ 
  if(!x2) x2=0; 
  if(!y2) y2=0;
  return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
}
var h = window.innerHeight;
var w = window.innerWidth;
var gui = new dat.GUI();
gui.add(controls, 'amp', 0, h/2);
gui.add(controls, 'freq', 0, 0.1);
gui.add(controls, 'off', 0, 100);
gui.add(controls, 'angle', 0, 360);
var points = [];
var timer = 0;
for (var x = 0; x < w ; x++) {
  points.push({x :x, y: 0});
}
setInterval(function() {
  timer -= 0.15;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.lineWidth = 80;
  context.strokeStyle = "#ff3e00";
  context.lineCap = "round";
  for (var x = 100; x < w -100; x++) {
    var point = points[x];
    point.y = (Math.sin((x * (controls.freq * Math.sin(timer/4))) + timer) * (controls.amp * Math.sin(timer))) + (((Math.sin(timer)/2+0.2) * -1) * controls.amp);
    if (x == 0) 
  context.moveTo(point.x, point.y + h/2);
    context.lineTo(point.x, point.y + h / 2);
  }
  context.stroke();
}, 40);

This awesome code ( Sineworm ) is write by Gilbert Sinnott, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Gilbert Sinnott