Spiral


Spiral


*Featured Code Created by Rull Deef













Source Code

HTML5 with CSS and JavaScript

<!DOCTYPE html>
<html>
<style>
    body {
    margin: 0;
    background-color: black;
}

canvas {
    width: 100vw;
    height: 100vh;
    position: absolute;
}
</style>
    <body onload=init()>
        <canvas></canvas>
        <script>
            var W, H, ctx;
var arr, max = 100;

function init() {
  var canvas = document.querySelector('canvas');
  canvas.width = W = window.innerWidth;
  canvas.height = H = window.innerHeight;
  ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0,0,0,0.15)';

  arr = [];
  for(var i = 0; i < max; i++)
    arr.push({x:Math.min(W, H)/2.3*i/max, y:0});

  animate();
}

function animate() {
  window.requestAnimationFrame(animate);
  ctx.fillRect(0, 0, W, H);

  for(var i = 0; i < max; i++) {
    var x = arr[i].x, y = arr[i].y;
    var a = Math.sqrt(x*x + y*y) / 1e3;
 
    arr[i].x = x*Math.cos(a) - y*Math.sin(a);
    arr[i].y = x*Math.sin(a) + y*Math.cos(a);
  }

  ctx.strokeStyle = 'rgba(255,0,0,0.25)';
  ctx.beginPath();
  for(var i = 0; i < max; i++)
    ctx.lineTo(W/2+arr[i].x, H/2-arr[i].y);
  ctx.stroke();

  ctx.strokeStyle = 'rgba(0,255,0,0.25)';
  ctx.beginPath();
  for(var i = 0; i < max; i++)
    ctx.lineTo(W/2+arr[i].x, H/2+arr[i].y);
  ctx.stroke();

  ctx.strokeStyle = 'rgba(0,0,255,0.25)';
  ctx.beginPath();
  for(var i = 0; i < max; i++)
    ctx.lineTo(W/2-arr[i].x, H/2+arr[i].y);
  ctx.stroke();

  ctx.strokeStyle = 'rgba(255,255,0,0.25)';
  ctx.beginPath();
  for(var i = 0; i < max; i++)
    ctx.lineTo(W/2-arr[i].x, H/2-arr[i].y);
  ctx.stroke();
}
        </script>
    </body>
</html>


Click here to view this code via Sololearn

Comments

Popular posts from this blog