Wiggling Circles by syntagmatic

index.html

<!doctype html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.js"></script>
<canvas id="painting" width=960 height=500></canvas>
<script>
var colorScale = d3.scaleOrdinal()
  //.range(["red", "green", "blue"]);
  .range(["#490A3D","#BD1550","#E97F02","#F8CA00","#8A9B0F"]);

var canvas = d3.select("#painting").node();
var ctx = canvas.getContext("2d");

//ctx.globalAlpha = 0.3;
ctx.globalCompositeOperation = "hard-light";

var data = d3.range(400)
  .map(function(d) {
    return {
      x: 960 * Math.random(),
      y: 500 * Math.random(),
      width: 7+50 * Math.random(),
      height: 7+50 * Math.random(),
      group: Math.floor(10 * Math.random())
    }
  })


var render = function(arr) {
  ctx.clearRect(0,0,canvas.width,canvas.height);

  arr.forEach(function(d) {
    ctx.fillStyle = colorScale(d.group);
    ctx.beginPath();
    ctx.arc(d.x, d.y, d.width/2, 0, 2*Math.PI);
    ctx.fill();
  });
};

d3.timer(function(t) {
  data.forEach(function(d) {
    d.x += (2*Math.random() - 1);
    d.y += (2*Math.random() - 1);
  });

  render(data);
});








</script>