Skip to content

Instantly share code, notes, and snippets.

@thole
Last active October 29, 2019 22:03
Show Gist options
  • Save thole/7c14e4ed4d310cc65029658ede95cc2d to your computer and use it in GitHub Desktop.
Save thole/7c14e4ed4d310cc65029658ede95cc2d to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: #1e1e20;
}
</style>
<script src="//pixijs.download/v4.5.5/pixi.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var height = 1000;
var width = 1400;
var renderer = PIXI.autoDetectRenderer(width, height, { antialias: true });
renderer.backgroundColor = 0x1e1e20;
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
stage.scale.set(1)
var graphics = new PIXI.Graphics();
var n=13;
var sc=7;
var hsh=-400
var vsh=-450
var c=c1=c2=c2x=c2y=x=y=0, d=1, n=1<<n;
hsh=Number(hsh); vsh=Number(vsh);
x=height/2
y=height/2;
var colorScale = d3.scale.quantize()
.domain([0,n])
.range([0x9e0142,0xd53e4f,0xf46d43,0xfdae61,0xfee08b,0xffffbf,0xe6f598,0xabdda4,0x66c2a5,0x3288bd,0x5e4fa2]);
stage.addChild(graphics);
var lastDot = null;
var i = 0;
animate();
function addLines(numberOfLines) {
var lastLine = i + numberOfLines;
while(i < lastLine){
var dot = [(x+hsh)*sc,(y+vsh)*sc];
if(lastDot != null){
graphics.moveTo(lastDot[0],lastDot[1]);
graphics.lineStyle(1, colorScale(i), 0.5);
graphics.lineTo(dot[0],dot[1]);
graphics.endFill();
}
lastDot = dot;
c1=c&1; c2=c&2;
c2x=1*d; if(c2>0) {c2x=(-1)*d}; c2y=(-1)*c2x;
if(c1>0) {y+=c2y} else {x+=c2x}
i++; c+=i/(i&-i);
}
}
function animate() {
if (i>n){return;}
addLines(5);
renderer.render(stage);
requestAnimationFrame( animate );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment