Hue circle generator

hue-circle.js

(function(radius, numSlices) {
  var canvas = {};
  canvas.node = document.createElement('canvas');
  canvas.context = canvas.node.getContext('2d');
  canvas.node.width = radius * 2 + 1;
  canvas.node.height = radius * 2 + 1;
  document.body.appendChild(canvas.node);
  var ctx = canvas.context;

  function remap(in_l, in_r, out_l, out_r, value) {
    return (value - in_l) / (in_r - in_l) * (out_r - out_l) + out_l;
  }

  for (var x = -radius; x <= radius; x++) {
    for (var y = -radius; y <= radius; y++) {
      var r = 0,
        g = 0,
        b = 0;

      var hue = (Math.atan2(y, x) + Math.PI) * 180 / Math.PI;
      if (numSlices > 0) {
        hue = Math.round(hue * numSlices / 360) / numSlices * 360;
      }
      if (hue < 60) {
        r = 255;
        g = remap(0, 60, 0, 255, hue);
      } else if (hue < 120) {
        r = remap(60, 120, 255, 0, hue);
        g = 255;
      } else if (hue < 180) {
        g = 255;
        b = remap(120, 180, 0, 255, hue);
      } else if (hue < 240) {
        g = remap(180, 240, 255, 0, hue);
        b = 255;
      } else if (hue < 300) {
        b = 255;
        r = remap(240, 300, 0, 255, hue);
      } else {
        b = remap(300, 360, 255, 0, hue);
        r = 255;
      }
	  var distanceFromCenter = Math.sqrt(x * x + y * y);
      var saturation = distanceFromCenter / radius;
      r = r * saturation + (1 - saturation) * 255;
      g = g * saturation + (1 - saturation) * 255;
      b = b * saturation + (1 - saturation) * 255;

      if (distanceFromCenter < radius) {
        ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
        ctx.fillRect(x + radius, y + radius, 1, 1);
      }
    }
  }
})(128, 0);