playing with spirals and the basics of trigonometry.
square roots make all the difference.
Built with blockbuilder.org
license: mit |
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> |