Circular Binary Logarithms
{ const svg = d3.select(DOM.svg(dimensions[0], dimensions[1])); svg.append('g').attr("transform", `translate(${bounds[1]},${bounds[3]}) scale(1 -1)`) .selectAll('path') .data([...Array(0x4000).keys()].slice(1)) .enter().append("path") .attr("d", n => filled_segment(n)) .attr("fill", n=> (n%2) ? "black" : "#fc0") return svg.node(); }
{ const svg = d3.select(DOM.svg(dimensions[0], dimensions[1])); svg.append('g').attr("transform", `translate(${bounds[1]},${bounds[3]}) scale(1 -1)`) .selectAll('path') .data([...Array(0x1000).keys()].slice(1)) .enter().append("path") .attr("d", n => bezpts_to_svgpath(bezeval(segment(n), [0, 1], bounds, 0.01))) .attr("stroke", n=> (n%2) ? "black" : "#fc0") .attr("stroke-width", 20.1).attr("fill", "none"); return svg.node(); }
segment = n => t => polar([ 100 + 20 * Math.log2(n + t), Math.PI/2 - (Math.log2(n + t) % 1) * Math.PI*2])
filled_segment = n => { const inside = t => polar([ 400*(1 - Math.pow((n+t)*1, -.4-.2*(1-Math.pow(n+t,-.3)))), Math.PI/2 - (Math.log2(n + t) % 1) * Math.PI*2]); const outside = t => polar([ 400*(1 - Math.pow((n+1-t)*2.3, -.4-.2*(1-Math.pow(n+1-t,-.3)))), Math.PI/2 - (Math.log2(n+1-t) % 1) * Math.PI*2]); return bezpts_to_svgpath(bezeval(inside, [0, 1], bounds, 0.01)) + bezpts_to_svgpath(bezeval(outside, [0, 1], bounds, 0.01)).replace(/M/, 'L') + 'Z'; }
bounds = [-500, 500, -400, 400]
dimensions = [bounds[1]-bounds[0], bounds[3]-bounds[2]]
polar = ([r, a]) => [r * Math.cos(a), r * Math.sin(a)]
import {bezeval, bezpts_to_svgpath} from "@jrus/bezplot"
d3 = require("d3@5")