/jsbin.cohiledi.html

## jsbin.cohiledi.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

## jsbin.cohiledi.js
(function($) {
  $.fn.DoubleHelix = function(options) {
    var settings = {
      fps: 180,
      fgColor: "0,0,0",
      bgColor: "transparent"
    }

    if (options) { settings = $.extend(settings, options); }

    var calculator = function(c, dim, t, y) {
      var x1 = 0, x2 = 0, z1 = 0, z2 = 0;

      var drawShape = function(x, y, opacity, color) {
        c.fillStyle = "rgba("+color+","+opacity+")";
        c.beginPath();
        c.arc(x+10, y+10, 10, 0, Math.PI*2, true);
        c.closePath();
        c.fill();
      }

      var fix = function(n) {
        return Math.round(n*10)/10;
      }

      return {
        calculate: function() {
          t+=0.5;
          x1 = Math.cos(t/360 * (Math.PI*2));
          x2 = Math.sin((t+270)/360 * (Math.PI*2));
          z1 = Math.cos((t+90)/360 * (Math.PI*2));
          z2 = Math.sin((t+360)/360 * (Math.PI*2));
        },

        draw: function() {
          var _x1 = fix((x1*(dim.halfWidth-10))+dim.halfWidth-10);
          var _x2 = fix((x2*(dim.halfWidth-10))+dim.halfWidth-10);
          var _z1 = Math.max((z1+1)/2, .1);
          var _z2 = Math.max((z2+1)/2, .1);

          if (_z1 < _z2) {
            drawShape(_x1, y, _z1, settings.fgColor);
            drawShape(_x2, y, _z2, settings.bgColor);
          } else {
            drawShape(_x2, y, _z2, settings.bgColor);
            drawShape(_x1, y, _z1, settings.fgColor);
          }
        }
      }
    }

    return this.each(function(i) {
      var c = this.getContext('2d');

      var dim = {
        width: c.canvas.width,
        height: c.canvas.height,
        halfHeight: c.canvas.height/2,
        halfWidth: c.canvas.width/2
      }

      var buffer = document.createElement('canvas');
      buffer.setAttribute('width', dim.width);
      buffer.setAttribute('height', 360);

      var cb = buffer.getContext('2d');

      var calculators = [];
      for (n = 0; n < 18; n++) {
        var calc = new calculator(cb, dim, n*20, n*20);
        calculators[n] = calc;
      }

      var copies = dim.height > 360 ? Math.ceil(dim.height/360) : 1;


      var draw = function() {
        cb.clearRect(0, 0, dim.width, dim.height);
        $.each(calculators, function(i, calc) {
          calc.calculate();
          calc.draw();
        });

        c.clearRect(0, 0, dim.width, dim.height);
        for (var n = 0; n < copies; n++) {
          c.drawImage(buffer, 0, n*360);
        }

        requestAnimationFrame(draw);
      }

      draw();
    });
  }
})(jQuery);


$(window).ready(function() {
  var canvas = $("<canvas />");
  canvas.attr({ width: 125, height: 360 });
  $("body").append(canvas);
  canvas.DoubleHelix({
    fgColor: '56,84,102',
    bgColor: '244,134,4'
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	</body>
	</html>
	(function($) {
	$.fn.DoubleHelix = function(options) {
	var settings = {
	fps: 180,
	fgColor: "0,0,0",
	bgColor: "transparent"
	}

	if (options) { settings = $.extend(settings, options); }

	var calculator = function(c, dim, t, y) {
	var x1 = 0, x2 = 0, z1 = 0, z2 = 0;

	var drawShape = function(x, y, opacity, color) {
	c.fillStyle = "rgba("+color+","+opacity+")";
	c.beginPath();
	c.arc(x+10, y+10, 10, 0, Math.PI*2, true);
	c.closePath();
	c.fill();
	}

	var fix = function(n) {
	return Math.round(n*10)/10;
	}

	return {
	calculate: function() {
	t+=0.5;
	x1 = Math.cos(t/360 * (Math.PI*2));
	x2 = Math.sin((t+270)/360 * (Math.PI*2));
	z1 = Math.cos((t+90)/360 * (Math.PI*2));
	z2 = Math.sin((t+360)/360 * (Math.PI*2));
	},

	draw: function() {
	var _x1 = fix((x1*(dim.halfWidth-10))+dim.halfWidth-10);
	var _x2 = fix((x2*(dim.halfWidth-10))+dim.halfWidth-10);
	var _z1 = Math.max((z1+1)/2, .1);
	var _z2 = Math.max((z2+1)/2, .1);

	if (_z1 < _z2) {
	drawShape(_x1, y, _z1, settings.fgColor);
	drawShape(_x2, y, _z2, settings.bgColor);
	} else {
	drawShape(_x2, y, _z2, settings.bgColor);
	drawShape(_x1, y, _z1, settings.fgColor);
	}
	}
	}
	}

	return this.each(function(i) {
	var c = this.getContext('2d');

	var dim = {
	width: c.canvas.width,
	height: c.canvas.height,
	halfHeight: c.canvas.height/2,
	halfWidth: c.canvas.width/2
	}

	var buffer = document.createElement('canvas');
	buffer.setAttribute('width', dim.width);
	buffer.setAttribute('height', 360);

	var cb = buffer.getContext('2d');

	var calculators = [];
	for (n = 0; n < 18; n++) {
	var calc = new calculator(cb, dim, n20, n20);
	calculators[n] = calc;
	}

	var copies = dim.height > 360 ? Math.ceil(dim.height/360) : 1;


	var draw = function() {
	cb.clearRect(0, 0, dim.width, dim.height);
	$.each(calculators, function(i, calc) {
	calc.calculate();
	calc.draw();
	});

	c.clearRect(0, 0, dim.width, dim.height);
	for (var n = 0; n < copies; n++) {
	c.drawImage(buffer, 0, n*360);
	}

	requestAnimationFrame(draw);
	}

	draw();
	});
	}
	})(jQuery);


	$(window).ready(function() {
	var canvas = $("<canvas />");
	canvas.attr({ width: 125, height: 360 });
	$("body").append(canvas);
	canvas.DoubleHelix({
	fgColor: '56,84,102',
	bgColor: '244,134,4'
	});
	});