Skip to content

Instantly share code, notes, and snippets.

@steveharoz

steveharoz/index.html

Last active March 28, 2017 18:47
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 steveharoz/f5056d163785534b14e6dd8cd930b8df to your computer and use it in GitHub Desktop.
Save steveharoz/f5056d163785534b14e6dd8cd930b8df to your computer and use it in GitHub Desktop.
Download ZIP
Motion mask
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: gray;
position: relative;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 500,
columns = 50,
rows = 26,
dots = d3.range(columns * rows).map( d => Math.random() ),
dotSize = 20;
cycle = 300;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var dotGlyphs = svg.append("g")
.attr("class", "mask")
.selectAll('circle')
.data(dots).enter()
.append('circle')
.attr("r", dotSize * 0.66)
.attr("cx", (d,i) => dotSize * (i % columns))
.attr("cy", (d,i) => dotSize * Math.floor(i / columns))
.attr("fill", d => Math.random() > 0.5 ? "black" : "gray");
d3.timer(function() {
dotGlyphs.attr("fill", d => (cycle*d + Date.now()%cycle) % cycle > cycle/2 ? "black" : "gray");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment