Skip to content

Instantly share code, notes, and snippets.

@animateddata
Last active August 2, 2017 09:18
Show Gist options
  • Save animateddata/6c49a7b6aab6cd615fe226a1938d6ea3 to your computer and use it in GitHub Desktop.
Save animateddata/6c49a7b6aab6cd615fe226a1938d6ea3 to your computer and use it in GitHub Desktop.
Ball of circles

Random circles are added to a GeoJSON FeatureCollection and rendered to canvas. The projection is rotated on each animation frame.

Peter Cook

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Ball of circles</title>
</head>
<style>
body {
background-color: #39474F;
}
</style>
<body>
<canvas id="content"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var context = document.getElementById('content').getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var size = d3.min([width, height]);
d3.select('#content')
.attr('width', width + 'px')
.attr('height', height + 'px');
context.lineWidth = 0.6;
context.strokeStyle = 'rgba(255, 255, 255, 0.6)';
var projection = d3.geoOrthographic()
.scale(0.45 * size)
.translate([0.5 * width, 0.5 * height]);
var geoGenerator = d3.geoPath()
.projection(projection)
.context(context);
var circle = d3.geoCircle();
var geojson = {type: 'FeatureCollection', features: []};
function rndLon() {return -180 + Math.random() * 360;}
function rndLat() {return -90 + Math.random() * 180;}
function addCircle() {
circle
.center([rndLon(), rndLat()])
.radius(Math.random() * 8);
geojson.features.push({
type: 'Feature',
geometry: circle()
});
}
function update(t) {
if(geojson.features.length < 1000)
addCircle();
projection.rotate([t / 1000]);
context.clearRect(0, 0, width, height);
context.beginPath();
geoGenerator(geojson);
context.stroke();
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment