dannvix/Sorting-Color-Nodes-by-Hue.html

## Sorting-Color-Nodes-by-Hue.html
<!DOCTYPE html>
<html>
<head>
  <title>Sorting Color Nodes by Hue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      overflow: hidden;
      background: #333333;
    }
    .node {
      position: absolute;
    }
  </style>
</head>
<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var rgb2hsl = function (r, g, b) {
      var h, s, l, max, min, s;
      r /= 255, g /= 255, b /= 255;
      max = Math.max(r, g, b), min = Math.min(r, g, b);
      l = (max + min) / 2;
      if (max == min) {
        h = s = 0;
      }
      else {
        d = max - min;
        s = (l > 0.5) ? (d / (2 - max - min)) : (d / (max + min));
        switch (max) {
          case r:
            h = (g - b) / d + (g < b ? 6 : 0)
            break;
          case g:
            h = (b - r) / d + 2;
            break;
          case b:
            h = (r - g) / d + 4;
            break;
        }
        h /= 6;
      }
      return [h, s, l];
    };

    var createNodes = function (count) {
      var i, size, top, left, r, g, b, color, divString, transitionTime;
      if (count == null) count = 100;
      for (i = 0; i < count; i++) {
        size = Math.floor(Math.random() * 25) + 25;
        top =  Math.floor(Math.random() * (window.innerHeight + size) - size);
        left = Math.floor(Math.random() * (window.innerWidth + size) - size);
        r = (Math.floor(Math.random() * 220) + 30).toString(16);
        g = (Math.floor(Math.random() * 220) + 30).toString(16);
        b = (Math.floor(Math.random() * 220) + 30).toString(16);
        color = "#" + r + g + b;
        transitionTime = (Math.random() * 2 + 0.5)
        divString = "<div class='node' style='height:" + size + "px;width:" + size +
          "px;-webkit-border-radius:" + size + "px;top:" + top + "px;left:" + left +
          "px;background:" + color + ";-webkit-transition:all " + transitionTime +
          "s ease-in-out'></div>";
        $("body").append(divString);
      }
    };

    var sortByHue = function () {
      var nodes, node, i, new_left, new_top, rgb, r, g, b, hsl, h, s, l;
      nodes = $(".node")
      for (i = 0; i < nodes.length; i++) {
        node = $(nodes[i]);
        rgb = node.css("backgroundColor").match(/rgb\((\d+), (\d+), (\d+)\)/);
        r = rgb[1], g = rgb[2], b = rgb[3];
        hsl = rgb2hsl(r, g, b);
        h = hsl[0], s = hsl[1], l = hsl[2];
        new_top = window.innerHeight * 0.55 - window.innerHeight * 0.25 * l;
        new_left = window.innerWidth * h * 1.2;
        node.css("top", "" + new_top + "px");
        node.css("left", "" + new_left + "px");
        node.css("width", "15px");
        node.css("height", "15px");
        node.css("-webkit-border-radius", "15px")
      }
    };

    var application = function () {
      createNodes(800);
      $("body").click(function() {
        sortByHue();
      });
    };
    application();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sorting Color Nodes by Hue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	overflow: hidden;
	background: #333333;
	}
	.node {
	position: absolute;
	}
	</style>
	</head>
	<body>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
	var rgb2hsl = function (r, g, b) {
	var h, s, l, max, min, s;
	r /= 255, g /= 255, b /= 255;
	max = Math.max(r, g, b), min = Math.min(r, g, b);
	l = (max + min) / 2;
	if (max == min) {
	h = s = 0;
	}
	else {
	d = max - min;
	s = (l > 0.5) ? (d / (2 - max - min)) : (d / (max + min));
	switch (max) {
	case r:
	h = (g - b) / d + (g < b ? 6 : 0)
	break;
	case g:
	h = (b - r) / d + 2;
	break;
	case b:
	h = (r - g) / d + 4;
	break;
	}
	h /= 6;
	}
	return [h, s, l];
	};

	var createNodes = function (count) {
	var i, size, top, left, r, g, b, color, divString, transitionTime;
	if (count == null) count = 100;
	for (i = 0; i < count; i++) {
	size = Math.floor(Math.random() * 25) + 25;
	top = Math.floor(Math.random() * (window.innerHeight + size) - size);
	left = Math.floor(Math.random() * (window.innerWidth + size) - size);
	r = (Math.floor(Math.random() * 220) + 30).toString(16);
	g = (Math.floor(Math.random() * 220) + 30).toString(16);
	b = (Math.floor(Math.random() * 220) + 30).toString(16);
	color = "#" + r + g + b;
	transitionTime = (Math.random() * 2 + 0.5)
	divString = "<div class='node' style='height:" + size + "px;width:" + size +
	"px;-webkit-border-radius:" + size + "px;top:" + top + "px;left:" + left +
	"px;background:" + color + ";-webkit-transition:all " + transitionTime +
	"s ease-in-out'></div>";
	$("body").append(divString);
	}
	};

	var sortByHue = function () {
	var nodes, node, i, new_left, new_top, rgb, r, g, b, hsl, h, s, l;
	nodes = $(".node")
	for (i = 0; i < nodes.length; i++) {
	node = $(nodes[i]);
	rgb = node.css("backgroundColor").match(/rgb\((\d+), (\d+), (\d+)\)/);
	r = rgb[1], g = rgb[2], b = rgb[3];
	hsl = rgb2hsl(r, g, b);
	h = hsl[0], s = hsl[1], l = hsl[2];
	new_top = window.innerHeight * 0.55 - window.innerHeight * 0.25 * l;
	new_left = window.innerWidth * h * 1.2;
	node.css("top", "" + new_top + "px");
	node.css("left", "" + new_left + "px");
	node.css("width", "15px");
	node.css("height", "15px");
	node.css("-webkit-border-radius", "15px")
	}
	};

	var application = function () {
	createNodes(800);
	$("body").click(function() {
	sortByHue();
	});
	};
	application();
	</script>
	</body>
	</html>