Plastic Sequence
Plastic sequence (see http://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/):
viewof aspect = slider({ title: "aspect ratio (log scale)", min: -5, max: 5, step: 'any', value: 0, })
{ const svgwidth = Math.exp(aspect/2)*Math.min(width, 600); const svgheight = svgwidth/Math.exp(aspect); const margin = 20; const svg = d3.select(DOM.svg(svgwidth, svgheight)); const x = d3.scaleLinear() .domain([0, 1]) .range([margin, svgwidth-margin]); const y = d3.scaleLinear() .domain([0, 1]) .range([svgheight-margin, margin]); const dots = svg.append("g").selectAll("circle") .data(plastic_data.slice().reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", coloring) .attr("r", 4); return svg.node(); }
Halton(2, 3) sequence:
{ const svgwidth = Math.min(width, 600); const margin = 20; const svg = d3.select(DOM.svg(svgwidth, svgwidth)); const x = d3.scaleLinear() .domain([0, 1]) .range([margin, svgwidth-margin]); const y = d3.scaleLinear() .domain([0, 1]) .range([svgwidth-margin, margin]); const dots = svg.append("g").selectAll("circle") .data(data.slice().reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", coloring) .attr("r", svgwidth / 150); return svg.node(); }
Plastic sequence:
{ const svgwidth = Math.min(width, 600); const svgheight = svgwidth; const margin = 20; const svg = d3.select(DOM.svg(svgwidth, svgheight)); const x = d3.scaleLinear() .domain([0, 1]) .range([margin, svgwidth-margin]); const y = d3.scaleLinear() .domain([0, 1]) .range([svgwidth-margin, margin]); const b1 = 2, b2 = 2; const line_positions1 = [[0,.5], [1, .5]]; for (let bn = b1; width / bn > 5; bn *= b1) { d3.range(bn).filter(d => d % b1) .forEach(d => line_positions1.push([d/bn, 1/bn])); } const vertical_lines = svg.append("g").selectAll("path") .data(line_positions1) .enter().append("path") .attr("d", d => { const xpos = x(d[0]); return `M${xpos},${y(0)}L${xpos},${y(1)}`}) .attr("stroke", "#aaa") .attr("opacity", d => Math.pow(d[1], .6)); const line_positions2 = [[0,.5], [1, .5]]; for (let bn = b2; width / bn > 5; bn *= b2) { d3.range(bn).filter(d => d % b2) .forEach(d => line_positions2.push([d/bn, 1/bn])); } const horizontal_lines = svg.append("g").selectAll("path") .data(line_positions2) .enter().append("path") .attr("d", d => { const ypos = y(d[0]); return `M${x(0)},${ypos}L${x(1)},${ypos}`}) .attr("stroke", "#aaa") .attr("opacity", d => Math.pow(d[1], .6)); const dots = svg.append("g") const update = function () { dots.selectAll("circle").remove() dots.selectAll("circle").data(plastic_data.slice(0, viewof npts3.value).reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", (d,i) => (i == 0) ? "#d03" : coloring(d, npts-i)) .attr("r", svgwidth / 150); // TODO: consider figuring out how to properly use D3 data to reuse dot elements } update(); viewof npts3.addEventListener("input", update); return Generators.disposable( svg.node(), () => {viewof npts3.removeEventListener("input", update);}); }
Halton sequence:
{ const svgwidth = Math.min(width, 600); const svgheight = svgwidth; const margin = 20; const svg = d3.select(DOM.svg(svgwidth, svgheight)); const x = d3.scaleLinear() .domain([0, 1]) .range([margin, svgwidth-margin]); const y = d3.scaleLinear() .domain([0, 1]) .range([svgwidth-margin, margin]); const b1 = 2, b2 = 3; const line_positions1 = [[0,.5], [1, .5]]; for (let bn = b1; width / bn > 5; bn *= b1) { d3.range(bn).filter(d => d % b1) .forEach(d => line_positions1.push([d/bn, 1/bn])); } const vertical_lines = svg.append("g").selectAll("path") .data(line_positions1) .enter().append("path") .attr("d", d => { const xpos = x(d[0]); return `M${xpos},${y(0)}L${xpos},${y(1)}`}) .attr("stroke", "#aaa") .attr("opacity", d => Math.pow(d[1], .6)); const line_positions2 = [[0,.5], [1, .5]]; for (let bn = b2; width / bn > 5; bn *= b2) { d3.range(bn).filter(d => d % b2) .forEach(d => line_positions2.push([d/bn, 1/bn])); } const horizontal_lines = svg.append("g").selectAll("path") .data(line_positions2) .enter().append("path") .attr("d", d => { const ypos = y(d[0]); return `M${x(0)},${ypos}L${x(1)},${ypos}`}) .attr("stroke", "#aaa") .attr("opacity", d => Math.pow(d[1], .6)); const dots = svg.append("g") const update = function () { dots.selectAll("circle").remove() dots.selectAll("circle").data(data.slice(0, viewof npts3.value).reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", (d,i) => (i == 0) ? "#d03" : coloring(d, npts-i)) .attr("r", svgwidth / 150); // TODO: consider figuring out how to properly use D3 data to reuse dot elements } update(); viewof npts3.addEventListener("input", update); return Generators.disposable( svg.node(), () => {viewof npts3.removeEventListener("input", update);}); }
{ const max = 200; const text = ["Start Animation", "Pause Animation"]; let animate = true; const button = html`<input type="button" value="Pause Animation">`; button.addEventListener('click', () => { animate = !animate; button.value = text[+animate]; }); yield button; while (true) { if (animate) { viewof npts3.value = (viewof npts3.value + 1) % max; } yield Promises.delay(viewof framerate.value, button); } }
viewof framerate = slider({ title: "animation framerate (ms/frame)", min: 40, max: 1000, step: 20, value: 200, })
Plastic sequence vs. Halton sequence vs. pseudorandom:
{ const svgwidth = Math.min(width, 300); const margin = 10; const svg1 = d3.select(DOM.svg(svgwidth, svgwidth)); const svg2 = d3.select(DOM.svg(svgwidth, svgwidth)); const svg3 = d3.select(DOM.svg(svgwidth, svgwidth)); const x = d3.scaleLinear() .domain([0, 1]) .range([margin, svgwidth-margin]); const y = d3.scaleLinear() .domain([0, 1]) .range([svgwidth-margin, margin]); svg2.append("g").selectAll("circle") .data(data.slice().reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", coloring) .attr("r", svgwidth / 150); svg3.append("g").selectAll("circle") .data(prngdata.slice().reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", coloring) .attr("r", svgwidth / 150); svg1.append("g").selectAll("circle") .data(plastic_data.slice().reverse()) .enter().append("circle") .attr("cx", d=>x(d[0])) .attr("cy", d=>y(d[1])) .attr("fill", coloring) .attr("r", svgwidth / 150); return html`${svg1.node()}${svg2.node()}${svg3.node()}`; }
This low-discrepancy sequence is based on the constants , , where is the real root of the polynomial equation , the so-called plastic number. If we call , we could alternately write, . This is a 2D analog of the golden ratio , the positive root of . Or if we let , then . For details, see http://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/.
plastic = { const p1 = 0.7548776662466927; // inverse of plastic number const p2 = 0.5698402909980532; return function plastic (index) { return [(p1 * index) % 1, (p2 * index) % 1]; } }
golden = { const p = 0.618033988749894848; // inverse of golden ratio return function golden (index) { return p * index % 1; } }
halton23 = function halton23 (index) { return [halton(index, 2), halton(index, 3)] }
halton = function halton (index, base) { let fraction = 1; let result = 0; while (index > 0) { fraction /= base; result += fraction * (index % base); index = ~~(index / base); // floor division } return result; }
npts = 4000
data = [...Array(npts).keys()].map(halton23)
plastic_data = [...Array(npts).keys()].map(plastic)
coloring = (d, i) => d3.interpolatePurples(Math.pow(i/npts, 5))
Other Implementation Details and Imports
randfloat = { // Use a Multiply With Carry PRNG, with an XOR-shift successor // Both from Numerical Recipes, 3rd Edition [H1, G1] const prng = function* prng(seed) { if (seed == null) seed = +new Date; // these two numbers were arbitrarily chosen let z, x = 3395989511 ^ seed, y = 1716319410 ^ seed; while (true) { x = 62904 * (x & 0xffff) + (x >>> 16); y = 41874 * (y & 0xffff) + (y >>> 16); z = (x << 16) + y; z ^= z >>> 13; z ^= z << 17; z ^= z >>> 5; yield z; } } const POW_NEG_26 = Math.pow(2, -26); const POW_NEG_27 = Math.pow(2, -27); return function* randfloat(seed) { const p = prng(seed); while (true) { const low_bits = p.next().value >>> 6; const high_bits = p.next().value >>> 5; yield (high_bits + low_bits * POW_NEG_26) * POW_NEG_27; } } }
prngdata = { const r = randfloat(); return d3.range(npts).map(d => [r.next().value, r.next().value]); }
viewof npts3 = new View(100)
d3 = require("d3@5")
import {slider} from "@jashkenas/inputs"
import {View} from "@mbostock/synchronized-views"
import {math_css, $, $$} with {$css as $css} from "@jrus/misc"
$css = html`${math_css}`