color wheel

_.md

[ Launch: color wheel ] 6e6c92c16dcc55e5b0b1 by hemulin

config.json

{"description":"color wheel","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

var width = 960,
    height = 500,
    radius = Math.sqrt(width / 2 * width / 2 + height / 2 * height / 2) + 5;

var vendor = ["", "-webkit-", "-moz-", "-ms-", "-o-"]
    .reduce(function(p, v) { return v + "transform" in document.body.style ? v : p; });

var θ = Math.PI * (3 - Math.sqrt(5)),
    spacing = 5,
    size = spacing - 2,
    speed = 10,
    index = 0,
    total = (radius * radius) / (spacing * spacing);

var canvas = d3.select("body").append("canvas")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .style("position", "absolute")
    .style("left", width / 2 - radius + "px")
    .style("top", height / 2 - radius + "px")
    .style(vendor + "transform-origin", radius + "px " + radius + "px");

var context = canvas.node().getContext("2d");

context.translate(radius, radius);

d3.timer(function() {
  canvas.style(vendor + "transform", "rotate(" + -speed / 2 + "deg)");

  for (var j = 0; index < total && j < speed; ++j) {
    var radius = spacing * Math.sqrt(++index),
        angle = index * θ,
        x = radius * Math.cos(angle),
        y = radius * Math.sin(angle);

    context.beginPath();
    context.arc(x, y, size, 0, 2 * Math.PI);
    context.stroke();
    context.fillStyle = d3.hsl(angle * 180 / Math.PI - radius, 1, .5) + "";
    context.fill();
  }

  speed += 0.1;
});