Skip to content

Instantly share code, notes, and snippets.

@angusgrant

angusgrant/index.html

Forked from syntagmatic/index.html
Created February 4, 2020 12:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save angusgrant/2ecd6a25dff4e80ebc56a59fd7327640 to your computer and use it in GitHub Desktop.
Save angusgrant/2ecd6a25dff4e80ebc56a59fd7327640 to your computer and use it in GitHub Desktop.
Download ZIP
Wiggling Circles
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment