DNA Spiral

by Licson Lee

HTML

<canvas></canvas>

CSS

body {
  padding: 0;
  margin: 0;
  outline: none;
  overflow: hidden;
  background: #000;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var i = 1;
var w = window.innerWidth;
var h = window.innerHeight;
var sin = Math.sin;
var cos = Math.cos;

canvas.width = w;
canvas.height = h;

var x = w * 0.6;
var y = h * 0.5;
var r = Math.min(w, h) / 4;
var sz = -180;

var tmpCanvas = document.createElement('canvas');
tmpCanvas.width = w;
tmpCanvas.height = h;

var tmpCtx = tmpCanvas.getContext('2d');

function draw() {
  var a = x + r * sin(i);
  var b = y + r * cos(i);
  var a1 = x + r * sin(i * 2);
  var b1 = y + r * cos(i);
  var a2 = x + r * sin(i);
  var b2 = y + r * (cos(i) / 2);


  ctx.clearRect(0, 0, w, h);
  ctx.drawImage(tmpCanvas, 0, -y / 20);
  tmpCtx.clearRect(0, 0, w, h);

  ctx.fillStyle = "#ff0000";
  ctx.beginPath();
  ctx.arc(a1, b1, 8, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.arc(a2, b2, 8, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();

  ctx.strokeStyle = "#ff0000";
  ctx.beginPath();
  ctx.moveTo(a1, b1);
  ctx.lineTo(a2, b2);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(a1, b1 + 1);
  ctx.lineTo(a2, b2 + 1);
  ctx.stroke();

  ctx.fillStyle = "#00ff00";
  ctx.beginPath();
  ctx.arc(a + sz, b, 8, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.arc(a1 + sz, b2, 8, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fill();

  ctx.strokeStyle = "#00ff00";

  ctx.beginPath();
  ctx.moveTo(a + sz, b);
  ctx.lineTo(a1 + sz, b2);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(a + sz, b + 1);
  ctx.lineTo(a1 + sz, b2 + 1);
  ctx.stroke();

  tmpCtx.drawImage(canvas, 0, 0);
  i += 0.04;
  requestAnimationFrame(draw);
}

draw();

window.addEventListener('resize', function() {
  w = window.innerWidth;
  h = window.innerHeight;
  canvas.width = w;
  canvas.height = h;
  tmpCanvas.width = w;
  tmpCanvas.height = h;

  x = w * 0.6;
  y = h * 0.5;
  r = Math.min(w, h) / 3;
}, false);