playing with spirals and the basics of trigonometry.
square roots make all the difference.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
background: #111;
}
</style>
</head>
<body>
<script>
var width = 960;
var height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var num = 200;
var maxlen = 50;
var cellSize = 15;
var angleVelocity = 206.432
var radiusVelocity = 7.4597881856
//https://coolors.co/359aa8-fad8d6-6b62c4-cc5151-e5c03b
var colors = [
"#359AA8",
"#FAD8D6",
"#6B62C4",
"#CC5151",
"#E5C03B",
]
var i = 0;
var sequences = d3.range(num).map(function(j) {
var len = maxlen
var len = 5 + Math.ceil(Math.random() * maxlen)
var color = colors[Math.floor(Math.random()*colors.length)]
//var color = colors[j % colors.length]
return d3.range(len).map(function(k) {
i++;
return {
i: i, j: j, k: k,
color: color//"#60ffe4"
}
})
})
var rects = []
sequences.forEach(function(sequence) {
sequence.forEach(function(cell) {
var ai = Math.sqrt(64+cell.i)
var theta = ai * angleVelocity * Math.PI/180
var radius = ai * radiusVelocity
cell.x = width/2 + radius * Math.cos(theta)
cell.y = height/2 + radius * Math.sin(theta)
cell.theta = theta
rects.push(cell)
})
})
console.log("sequences", sequences)
var gs = svg.selectAll("g.cell").data(rects)
gs.exit().remove()
var gsE = gs.enter()
.append("g").classed("cell", true)
gsE.append("rect")
gs = gsE.merge(gs)
gs.select("rect")
.attr("x", function(d) {
return d.x
})
.attr("y", function(d) {
return d.y
})
.attr("width", function(d) {
return cellSize
})
.attr("height", function(d) {
return cellSize
})
.style("fill", function(d) { return d.color })
// .style("stroke", "#111")
// .style("stroke-width", 1.5)
.style("fill-opacity", 0.8)
.attr("transform", function(d) {
return "rotate(" + (d.theta/Math.PI*180) + "," + [d.x + cellSize/2, d.y + cellSize/2] + ")"
})
</script>
</body>