bholzer/colors.html

## colors.html
<html>
  <head>
  </head>
  <body>
    <canvas id="drawing-board" height="1000" width="1000"></canvas>
    <script type="text/javascript">
    var c = document.getElementById("drawing-board");
    var ctx = c.getContext("2d");

    window.addEventListener('resize', resizeCanvas, false);
    function resizeCanvas() {
      c.width = window.innerWidth;
      c.height = window.innerHeight;
      c.addEventListener('mousedown', startDraw);
      c.addEventListener('mouseup', endDraw);
    }
    resizeCanvas();

    var update;

    function startDraw(e) {
      var grad = makeColorGradient(.3,.3,.3,0,2,4, 230,45, 80);
      var incrementer = 1;
      var currentColorIndex = Math.floor(Math.random()*grad.length);
      var delta = 0.02;
      var x = e.pageX - c.offsetLeft,
          y = e.pageY - c.offsetTop;
      var previousLine = [];
      update = setInterval(function() {
        c.addEventListener('mousemove', function(drag){
          x = drag.pageX - c.offsetLeft,
          y = drag.pageY - c.offsetTop;
        }, false);
        var radsInCircle = 2*Math.PI;
        var angle = delta*radsInCircle;
        delta += 0.008;
        var maxLength = 30;
        var minLength = 18;
        var length = (Math.random()*maxLength) + minLength;
        var endpoints = [{x: x+Math.sin(angle)*length,    y: y+Math.cos(angle)*length},
                         {x: x+Math.sin(angle)*(-length), y: y+Math.cos(angle)*(-length)}];

        ctx.globalAlpha = Math.random();
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(endpoints[0].x, endpoints[0].y);
        ctx.lineTo(endpoints[1].x, endpoints[1].y);
        ctx.strokeStyle = grad[currentColorIndex];
        ctx.stroke();
        if (previousLine.length != 0) {
          ctx.fillStyle = grad[currentColorIndex];
          ctx.stokeStyle = grad[currentColorIndex];
          ctx.globalAlpha = 0.8;
          ctx.beginPath();
          ctx.moveTo(endpoints[0].x, endpoints[0].y);
          ctx.lineTo(endpoints[1].x, endpoints[1].y);
          ctx.lineTo(previousLine[1].x, previousLine[1].y);
          ctx.lineTo(previousLine[0].x, previousLine[0].y);
          ctx.closePath();
          ctx.fill();
          ctx.stroke();
        }
        previousLine = endpoints;
        currentColorIndex += incrementer;
        if (currentColorIndex == grad.length || currentColorIndex == 0) {
          incrementer = -incrementer;
        }
      }, 10);
    };

    function endDraw(e) {
      clearInterval(update);
    };

    function gradient(startColor, endColor, steps) {
      var start = {
        'Hex'   : startColor,
        'R'     : parseInt(startColor.slice(1,3), 16),
        'G'     : parseInt(startColor.slice(3,5), 16),
        'B'     : parseInt(startColor.slice(5,7), 16)
      }
      var end = {
        'Hex'   : endColor,
        'R'     : parseInt(endColor.slice(1,3), 16),
        'G'     : parseInt(endColor.slice(3,5), 16),
        'B'     : parseInt(endColor.slice(5,7), 16)
      }
      var diffR = end['R'] - start['R'];
      var diffG = end['G'] - start['G'];
      var diffB = end['B'] - start['B'];

      var stepsHex  = new Array();
      var stepsR    = new Array();
      var stepsG    = new Array();
      var stepsB    = new Array();

      for (var i = 0; i <= steps; i++) {
        stepsR[i] = start['R'] + ((diffR / steps) * i);
        stepsG[i] = start['G'] + ((diffG / steps) * i);
        stepsB[i] = start['B'] + ((diffB / steps) * i);
        stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16);
      }
      return stepsHex;
    };

    function makeColorGradient(frequency1, frequency2, frequency3,
                               phase1, phase2, phase3,
                               center, width, len)
    {
      var colors = [];
      if (center == undefined)   center = 128;
      if (width == undefined)    width = 127;
      if (len == undefined)      len = 50;

      for (var i = 0; i < len; ++i)
      {
         var red = Math.sin(frequency1*i + phase1) * width + center;
         var green = Math.sin(frequency2*i + phase2) * width + center;
         var blue = Math.sin(frequency3*i + phase3) * width + center;
         var rgb = blue | (green << 8) | (red << 16);
         colors.push('#' + rgb.toString(16));
      }
      return colors;
    };
    </script>
  </body>
</html>
	<html>
	<head>
	</head>
	<body>
	<canvas id="drawing-board" height="1000" width="1000"></canvas>
	<script type="text/javascript">
	var c = document.getElementById("drawing-board");
	var ctx = c.getContext("2d");

	window.addEventListener('resize', resizeCanvas, false);
	function resizeCanvas() {
	c.width = window.innerWidth;
	c.height = window.innerHeight;
	c.addEventListener('mousedown', startDraw);
	c.addEventListener('mouseup', endDraw);
	}
	resizeCanvas();

	var update;

	function startDraw(e) {
	var grad = makeColorGradient(.3,.3,.3,0,2,4, 230,45, 80);
	var incrementer = 1;
	var currentColorIndex = Math.floor(Math.random()*grad.length);
	var delta = 0.02;
	var x = e.pageX - c.offsetLeft,
	y = e.pageY - c.offsetTop;
	var previousLine = [];
	update = setInterval(function() {
	c.addEventListener('mousemove', function(drag){
	x = drag.pageX - c.offsetLeft,
	y = drag.pageY - c.offsetTop;
	}, false);
	var radsInCircle = 2*Math.PI;
	var angle = delta*radsInCircle;
	delta += 0.008;
	var maxLength = 30;
	var minLength = 18;
	var length = (Math.random()*maxLength) + minLength;
	var endpoints = [{x: x+Math.sin(angle)length, y: y+Math.cos(angle)length},
	{x: x+Math.sin(angle)(-length), y: y+Math.cos(angle)(-length)}];

	ctx.globalAlpha = Math.random();
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(endpoints[0].x, endpoints[0].y);
	ctx.lineTo(endpoints[1].x, endpoints[1].y);
	ctx.strokeStyle = grad[currentColorIndex];
	ctx.stroke();
	if (previousLine.length != 0) {
	ctx.fillStyle = grad[currentColorIndex];
	ctx.stokeStyle = grad[currentColorIndex];
	ctx.globalAlpha = 0.8;
	ctx.beginPath();
	ctx.moveTo(endpoints[0].x, endpoints[0].y);
	ctx.lineTo(endpoints[1].x, endpoints[1].y);
	ctx.lineTo(previousLine[1].x, previousLine[1].y);
	ctx.lineTo(previousLine[0].x, previousLine[0].y);
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
	}
	previousLine = endpoints;
	currentColorIndex += incrementer;
	if (currentColorIndex == grad.length \|\| currentColorIndex == 0) {
	incrementer = -incrementer;
	}
	}, 10);
	};

	function endDraw(e) {
	clearInterval(update);
	};

	function gradient(startColor, endColor, steps) {
	var start = {
	'Hex' : startColor,
	'R' : parseInt(startColor.slice(1,3), 16),
	'G' : parseInt(startColor.slice(3,5), 16),
	'B' : parseInt(startColor.slice(5,7), 16)
	}
	var end = {
	'Hex' : endColor,
	'R' : parseInt(endColor.slice(1,3), 16),
	'G' : parseInt(endColor.slice(3,5), 16),
	'B' : parseInt(endColor.slice(5,7), 16)
	}
	var diffR = end['R'] - start['R'];
	var diffG = end['G'] - start['G'];
	var diffB = end['B'] - start['B'];

	var stepsHex = new Array();
	var stepsR = new Array();
	var stepsG = new Array();
	var stepsB = new Array();

	for (var i = 0; i <= steps; i++) {
	stepsR[i] = start['R'] + ((diffR / steps) * i);
	stepsG[i] = start['G'] + ((diffG / steps) * i);
	stepsB[i] = start['B'] + ((diffB / steps) * i);
	stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16);
	}
	return stepsHex;
	};

	function makeColorGradient(frequency1, frequency2, frequency3,
	phase1, phase2, phase3,
	center, width, len)
	{
	var colors = [];
	if (center == undefined) center = 128;
	if (width == undefined) width = 127;
	if (len == undefined) len = 50;

	for (var i = 0; i < len; ++i)
	{
	var red = Math.sin(frequency1i + phase1) width + center;
	var green = Math.sin(frequency2i + phase2) width + center;
	var blue = Math.sin(frequency3i + phase3) width + center;
	var rgb = blue \| (green << 8) \| (red << 16);
	colors.push('#' + rgb.toString(16));
	}
	return colors;
	};
	</script>
	</body>
	</html>