Skip to content

Instantly share code, notes, and snippets.

@tgs
Last active Aug 29, 2015
Embed
What would you like to do?
Star thingy

Zing, pow

Click it to make it go some more

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #000;
min-width: 960px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="main.js"></script>
</body>
</html>
var width = Math.max(960, innerWidth),
height = Math.max(500, innerHeight);
var stop = 200;
// TODO: randomly move the nodes! Maybe with smooth transitions
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height)
.on("ontouchstart" in document ? "touchdown" : "mousedown", start);
var context = canvas.node().getContext("2d");
//context.globalCompositeOperation = "lighter";
var nodes = d3.range(1, 8)
.map(function() {
return {
x: Math.random * width,
y: Math.random * height,
};
});
var linkArray = [];
function populateLinkArray() {
linkArray = [];
for (var i = 0; i < nodes.length; i++) {
for (var j = i + 1; j < nodes.length; j++) {
if (Math.random() > 0.6) {
var source = nodes[i],
target = nodes[j];
linkArray.push({
scaleX: d3.scale.linear().range([source.x, target.x]),
scaleY: d3.scale.linear().range([source.y, target.y]),
});
}
}
}
}
populateLinkArray();
var stopAfter = 1000; // number of frames before we stop
function start() {
d3.timer(drawBlips);
d3.timer(beat);
stopAfter = 1000;
}
var colorScale = d3.scale.linear()
.domain([0, 0.5, 1])
.range(["darkblue", "#ffffff", "#ffff22"]);
var jitterX = 0,
jitterY = 0;
var alongLineEase = d3.ease("cubic-in-out");
//var alongLineEase = d3.ease("linear");
function drawBlips() {
context.fillStyle = "rgba(0,0,0,0.4)";
context.fillRect(0, 0, width, height);
context.stroke();
linkArray.forEach(function(link) {
//jitterX = (Math.random() - 0.5) * 20;
//jitterY = (Math.random() - 0.5) * 20;
var t, x, y, size;
for (var i = 0; i < 5; i++) {
context.beginPath();
context.fillStyle = colorScale(Math.random());
t = alongLineEase(Math.random());
x = link.scaleX(t + Math.random() / 5);
y = link.scaleY(t + Math.random() / 5);
size = Math.random() * 5;
context.fillRect(x + jitterX, y + jitterY, size, size);
context.stroke();
}
});
if (--stopAfter < 0) {
return true;
}
}
function choose(ary) {
return ary[Math.floor(Math.random()*ary.length)];
}
var beatmillis = 100;
function beat() {
verticalSlide = 0;
populateLinkArray();
for (var i = 0; i < nodes.length; ++i) {
if (Math.random() > 0.3) {
nodes[i].x = Math.random() * width;
nodes[i].y = Math.random() * height;
nodes[i].dy = 0;
} else {
nodes[i].y += 15 + nodes[i].dy;
nodes[i].dy += 15;
}
}
if (--stopAfter < 0) {
return true;
}
d3.timer(beat, beatmillis);
return true;
}
start();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment