Sineworm

In this example below you will see how to do a Sineworm with some HTML / CSS and Javascript

Worm dude.

Thumbnail
This awesome code was written by gilbert, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gilbert ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/gilbert/sineworm-aBBary */
canvas {
  border: solid 1px #000;
}
body {
  background-color: #83ffef;
}
* {
  margin: 0;
  padding: 0;
}

/*Downloaded from https://www.codeseek.co/gilbert/sineworm-aBBary */
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);

Comments