Visiting Research at NYU Shanghai; previously @ Nest, Apple, AOL; faculty @ Olin College, NYU Shanghai.
tile({ n: 4, debug: true }, [[0, 1]])
tile({ n: 5, debug: true }, [[0, 1]])
hcat(arange(5).map(i => tileSvg([[i, (i + 3) % 5]], { n: 5 })))
gallery = options =>
withBackground(
grid(createTiles({ size: (50 * 4) / (options.n || 4), ...options }), {
padding: 10
})
)
createTiles = options => {
const { halfPlanes, n, skipEdges } = { n: 4, ...options };
const connectionSets = halfPlanes
? connectionSetsWithHalfplanes(n)
: sideConnectionSets(n, skipEdges);
return connectionSets.map(pairs => tile(options, pairs));
}
createTileFactory = options => {
const { n, halfPlanes, skipEdges } = { n: 4, ...options };
const connectionSets = halfPlanes
? connectionSetsWithHalfplanes(n)
: sideConnectionSets(n, skipEdges);
return connectionSets.map(pairs => opts =>
tile({ ...options, ...opts }, pairs)
);
}
createTileFactory()[0]({ bgColor: 'red' })
tilePairsDebugString([[0, 1], [2, 3]])
tilePairsDebugString([[0, 1], [2, 3, true]])
sideConnectionSetsG = (ns, allowGaps = true) => {
function* g(ns) {
if (ns.length <= 1) {
if (ns.length === 0 || allowGaps) yield [];
return;
}
let [first, ...rest] = ns;
for (let i in rest) {
let second = rest[i];
let others = rest.filter(j => j !== second);
let pair = [first, second];
for (let l of g(others)) {
yield [pair, ...l];
}
}
if (allowGaps) yield* g(rest);
}
return g(ns);
}
sideConnectionSets = (n, allowGaps) =>
Array.from(sideConnectionSetsG(arange(n), allowGaps))
connectionSetsWithHalfplanes = {
function* g(n) {
const { mod } = modFunctions(n);
const adjustSet = d => s =>
s.map(([i, j, ...t]) => [(i + d) % n, (j + d) % n, ...t]);
yield* sideConnectionSetsG(arange(n));
for (let i = 0; i < n; i++) {
for (let d = 2; d <= n - 2; d++) {
// if (n > 5 && mod(-d) === 2) continue;
let first = [i, (i + d) % n, true];
// let interior = Array.from(g(d - 1)).map(adjustSet(i + 1));
let rests = Array.from(g(n - d - 1)).map(adjustSet(i + d + 1));
for (let rest of rests) {
yield [first, ...rest];
}
}
}
}
return n => Array.from(g(n));
}
// All the sets that include halfplanes
displayConnectionSets(
connectionSetsWithHalfplanes(4).filter(s => s.length && s[0][2])
)
// all the sets that include the first edge
displayConnectionSets(
connectionSetsWithHalfplanes(4).filter(s => s.length && s[0][0] === 0)
)
// all the sets that include the first edge and a halfplane
displayConnectionSets(
connectionSetsWithHalfplanes(6).filter(
s => s.length && s[0][0] === 0 && s.some(([i, j, hp]) => hp)
)
)
grid(
connectionSetsWithHalfplanes(6)
.filter(s => s.length && s[0][0] <= 0)
.slice(-1)
.map(pairs => tile({ n: 6, debug: true, size: 50 }, pairs))
)
connectionSetsWithHalfplanes(6)
.filter(s => s.length && s[0][0] <= 0)
.slice(-1)
// The low-level function. Use tile() instead.
// This defaults debug=true. The other defaults debug=false
tileSvg = (pairs, options) => {
// options
const { n, winged, fgColor, bgColor, debug } = {
n: 4,
fgColor: 'black',
bgColor: 'white',
debug: true,
...options
};
// utilities
const { modDistance } = modFunctions(options.n || 4);
const distance = ([x0, y0], [x1, y1]) =>
Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);
const midpoint = ([x1, y1], [x2, y2]) => [(x1 + x2) / 2, (y1 + y2) / 2];
const reflect = ([x, y], [cx, cy]) => [cx - 2 * (x - cx), cy - 2 * (y - cy)];
// read or compute default size and edge length
const rawSideLength = distance(
[1, 0],
[Math.cos((2 * Math.PI) / n), Math.sin((2 * Math.PI) / n)]
);
let { edgeLength } = {
edgeLength: ((100 / rawSideLength) * 4) / n,
...options
};
let { size } = { size: edgeLength * rawSideLength, ...options };
let raw = arange(n)
.map(i => ((i + .5) / n) * 2 * Math.PI)
.map(θ => [Math.cos(θ), Math.sin(θ)]);
let rawBounds = [
Math.min(...raw.map(([x]) => x)),
Math.min(...raw.map(([_, y]) => y)),
Math.max(...raw.map(([x]) => x)),
Math.max(...raw.map(([_, y]) => y))
];
if (winged) {
const d = 1 / 3; // FIXME
rawBounds[0] -= d;
rawBounds[1] -= d;
rawBounds[2] += d;
rawBounds[3] += d;
}
const scale = size / rawSideLength;
const mapX = x => (x - rawBounds[0]) * scale;
const mapY = y => (y - rawBounds[1]) * scale;
const pa = θ => [mapX(Math.cos(θ)), mapY(Math.sin(θ))]; // angle => point
const v2a = i => (2 * Math.PI * (i + .5)) / n; // vertex index => angle
const pv = i => pa(v2a(i)); // vector index => point
// midpoint of side between vertices i and i+1
const edgeCenter = i => midpoint(pv(i), pv(i + 1));
let sideLength = distance(pv(0), pv(1));
const lineWidth = sideLength / 3;
const polyPath = arange(n)
.map(pv)
.join(' ');
const clipPathId = DOM.uid("clip");
return svg`<svg width=${mapX(rawBounds[2]) + Number(debug)} height=${mapY(
rawBounds[3]
)}
fill=none stroke=none>
<defs>
<clipPath id="${clipPathId.id}">
<polygon points="${polyPath}" />
</clipPath>
</defs>
<polygon points="${polyPath}" fill="${bgColor}"/>
<g stroke="${fgColor}" stroke-width="${lineWidth}" clip-path="${clipPathId}">
${pairs.map(([i, j, fill]) => {
if (i === j) throw "edge indices in pair must be distinct";
const m1 = edgeCenter(i);
const m2 = edgeCenter(j);
const v1 = pv(i);
const v2 = pv(j);
// could instead test whether the intersection is defined
if (2 * Math.abs(j - i) === n) {
const [x1, y1] = m1;
const [x2, y2] = m2;
const pts = [];
if (fill) {
for (let k = i; k != j; ) {
k = (k + 1) % n;
pts.push(pv(k));
}
return svg`<polygon points="${[m1, ...pts, m2].join(
' '
)}" fill="${fgColor}" stroke-width="${lineWidth}"/>`;
}
return svg`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/>`;
}
let c = math.intersect(m1, v1, m2, v2);
if (fill && (j - i + n) % n > n / 2) {
const center = [mapX(0), mapY(0)];
c = reflect(c, center);
}
const [cx, cy] = c;
const r = distance(m1, c);
return svg`<circle cx="${cx}" cy="${cy}" r="${r}" fill="${
fill ? fgColor : 'none'
}"/>`;
})}
</g>
${winged &&
arange(n)
.map(pv)
.map(
([x, y]) =>
svg`<circle cx="${x}" cy="${y}" r="${lineWidth}" fill="${bgColor}"/>`
)}
${winged &&
arange(n)
.map(edgeCenter)
.map(
([x, y]) =>
svg`<circle cx="${x}" cy="${y}" r="${lineWidth /
2}" fill="${fgColor}" />`
)}
${debug &&
svg`<polygon points="${polyPath}" stroke="blue" stroke-dasharray="4"/>`}
</svg>`;
}
tileSvg([[0, 2, true]], { n: 4 })
tileSvg([[1, 2]], { n: 3 })
arange = (a, b) =>
b === undefined
? Array(a)
.fill(0)
.map((_, i) => i)
: Array(b - a)
.fill(0)
.map((_, i) => a + i)
arange(5)
arange(5,10)
iterMap = (iter, fn) => Array.from(iter).map(fn)
iterMap([0, 1], n => n + 1)
stringify = JSON.stringify
modFunctions = n => {
const mod = i => ((i % n) + n) % n;
const modDistance = (a, b = 0) => Math.min(mod(b - a), n - mod(b - a));
return { mod, modDistance };
}
{
const { mod } = modFunctions(4);
return [-4, -1, 0, 3, 4, 5, 9].map(mod).toString() === "0,3,0,3,0,1,1";
}
{
const { modDistance } = modFunctions(4);
return [[0, 5], [5, 0], [-1, 4], [4, -1]].map(ns => modDistance(...ns));
}
[[0, 2]].map(([a, b]) => {
let { modDistance } = modFunctions(3);
return `|${a}-${b}| = ${modDistance(a, b)}`;
})
[[0, 1], [0, 2], [0, 3], [0, 4], [4, 0]].map(([a, b]) => {
let { modDistance } = modFunctions(5);
return `|${a}-${b}| = ${modDistance(a, b)}`;
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
