Skip to content

Instantly share code, notes, and snippets.

@kristw

kristw/.block

Last active July 31, 2017 09:57
Show Gist options
  • Save kristw/546c7802dbce957d5d95af5bba5f0a3a to your computer and use it in GitHub Desktop.
Save kristw/546c7802dbce957d5d95af5bba5f0a3a to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Exploration (with selectable blending options)
Raw
.block
license: mit
Raw
index.html
<!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>
<canvas id="painting" width=960 height=400></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";
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment