Canvas Exploration (with selectable blending options)

forked from syntagmatic's block: Canvas Exploration

<!doctype html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.js"></script>

Composite Operation:
<select id="composite-selector">
  <option value="source-over">source-over</option>
  <option value="source-in">source-in</option>
  <option value="source-out">source-out</option>
  <option value="source-atop">source-atop</option>
  <option value="destination-over">destination-over</option>
  <option value="destination-in">destination-in</option>
  <option value="destination-out">destination-out</option>
  <option value="destination-atop">destination-atop</option>
  <option value="lighter">lighter</option>
  <option value="copy">copy</option>
  <option value="xor">xor</option>
  <option value="multiply">multiply</option>
  <option value="screen">screen</option>
  <option value="overlay">overlay</option>
  <option value="darken">darken</option>
  <option value="lighten">lighten</option>
  <option value="color-dodge">color-dodge</option>
  <option value="color-burn">color-burn</option>
  <option value="hard-light">hard-light</option>
  <option value="soft-light">soft-light</option>
  <option value="difference">difference</option>
  <option value="exclusion">exclusion</option>
  <option value="hue">hue</option>
  <option value="saturation">saturation</option>
  <option value="color">color</option>
  <option value="luminosity">luminosity</option>
</select>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">documentation</a>

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

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

document.querySelector('#composite-selector')
  .addEventListener('change', function(e){
  	ctx.globalCompositeOperation = e.target.value;
	});  
  
var data = d3.range(400)
  .map(function(d) {
    return {
      x: 960 * Math.random(),
      y: 400 * 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>

https://d3js.org/d3.v4.js