Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block
Last active May 8, 2019

Embed
What would you like to do?
OMG Particles II
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #111;
min-width: 960px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = Math.max(960, innerWidth),
height = Math.max(500, innerHeight);
var x1 = width / 2,
y1 = height / 2,
x0 = x1,
y0 = y1,
i = 0,
r = 200,
τ = 2 * Math.PI;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchmove" : "mousemove", move);
var context = canvas.node().getContext("2d");
context.globalCompositeOperation = "lighter";
context.lineWidth = 2;
d3.timer(function() {
context.clearRect(0, 0, width, height);
var z = d3.hsl(++i % 360, 1, .5).rgb(),
c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
x = x0 += (x1 - x0) * .1,
y = y0 += (y1 - y0) * .1;
d3.select({}).transition()
.duration(2000)
.ease(Math.sqrt)
.tween("circle", function() {
return function(t) {
context.strokeStyle = c + (1 - t) + ")";
context.beginPath();
context.arc(x, y, r * t, 0, τ);
context.stroke();
};
});
});
function move() {
var mouse = d3.mouse(this);
x1 = mouse[0];
y1 = mouse[1];
d3.event.preventDefault();
}
</script>
@Alain1405

This comment has been minimized.

Copy link

Alain1405 commented Feb 8, 2015

This is currently not working (at least on Chrome and Safari, on OsX).
Console log the following:
Uncaught TypeError: Cannot read property 'documentElement' of undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.