Create a gist now

Instantly share code, notes, and snippets.

@jonsadka /.block
Last active Mar 16, 2018

Embed
Super Random!
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://wzrd.in/standalone/uuid@latest"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
const width = 960;
const height = 500;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
const tokenUUID = uuid.v4();
const token = getValues(tokenUUID);
const text = svg.append('text')
.text(tokenUUID)
.attr('y', 20)
.attr('x', 10)
.style('font-size', 20)
.style('font-family', 'monospace')
const lineGenerator = d3.radialArea()
.angle((d) => d.angle)
.radius((d) => d.r)
.curve(getCurve())
const path = svg.append('g')
.attr('transform', `translate(${width/2}, ${height/2})`)
.selectAll('path')
.data([token])
.enter().append('path')
.attr('fill', 'white')
.attr('stroke-width', 3)
.attr('stroke', getColor)
.attr('d', () => lineGenerator(token))
setInterval(function() {
const tokenUUID = uuid.v4();
const token = getValues(tokenUUID);
lineGenerator.curve(getCurve())
text.text(tokenUUID);
path.transition()
.attr('d', () => lineGenerator(token))
.attr('stroke', getColor)
}, 1000);
function getValues(tokenUUID) {
const values = tokenUUID.split('').map((character, i) => {
const code = character.charCodeAt(0) * 2;
return getPoint(tokenUUID, code, i);
});
values[values.length - 1].r = values[0].r;
return values;
}
function getPoint(UUID, code, i) {
return {
angle: i / (UUID.length - 1) * 2 * Math.PI,
r: code
}
}
function getColor() {
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
function getCurve() {
const curves = [
d3.curveLinear,
d3.curveBasis,
d3.curveCardinal,
d3.curveCatmullRom,
d3.curveMonotoneY,
d3.curveStep,
d3.curveStepAfter,
d3.curveStepBefore
];
const curveNumber = Math.round(Math.random()*100) % (curves.length - 1);
return curves[curveNumber];
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment