function* pachinkoTreeVisual(visibility, width = 1000, nodeSize = 40) { const height = (nodeSize * 1.5 + Math.sqrt(16) * nodeSize * 3) | 0; const { ctx } = getCtx(width, height, Math.min(width, 800)); ctx.canvas.style.imageRendering = "auto"; const initTree = () => { const array = [1]; for (let i = 1; i < 16; i++) { array[i] = i + 1; } const buffer = [-Infinity]; const depth = Math.ceil(Math.log2(array.length)); const length = 2 ** (depth + 1); for (let i = 0; i < length / 2; i++) buffer[i] = 0; for (let i = length / 2; i < length; i++) buffer[i] = -Infinity; return [array, buffer, depth]; }; let [array, buffer, depth] = initTree(); const drawTree = async () => { await visibility(); ctx.fillStyle = "#EEE"; ctx.fillRect(0, 0, width, height); ctx.fillStyle = "#000"; ctx.lineJoin = "round"; ctx.font = `${(nodeSize * 0.8) | 0}px serif`; ctx.textAlign = "center"; let k = 1; ctx.beginPath(); const pos = (i) => { const y = Math.sqrt(2 ** (i + 0.5)) * nodeSize * 3 - 2 * nodeSize; const y2 = Math.sqrt(2 ** (i + 1.5)) * nodeSize * 3 - 2 * nodeSize; const x = width * 0.5 - 2 ** (i - 1) * nodeSize * 1.5 + nodeSize * 0.75; const x2 = width * 0.5 - 2 ** i * nodeSize * 1.5 + nodeSize * 0.75; return [x, y, x2, y2]; }; // draw connections ctx.strokeStyle = "#444"; ctx.lineWidth = nodeSize >> 3; for (let i = 0; i < depth; i++) { let [x, y, x2, y2] = pos(i); const kEnd = k + (1 << i); while (k++ < kEnd) { ctx.moveTo(x, y); ctx.lineTo(x2, y2); ctx.moveTo(x, y); ctx.lineTo(x2 + nodeSize * 1.5, y2); x += nodeSize * 1.5; x2 += nodeSize * 3; } ctx.stroke(); } // draw nodes/leaves ctx.strokeStyle = "#FFF"; ctx.lineWidth = nodeSize >> 1; k = 1; for (let i = 0; i <= depth; i++) { let [x, y] = pos(i); const kEnd = k + (1 << i); while (k < kEnd) { const val = buffer[k++]; const text = Number.isFinite(val) ? val : "."; ctx.strokeText(text, x, y); ctx.fillText(text, x, y); x += nodeSize * 1.5; } } return ctx.canvas; }; while (true) { [array, buffer, depth] = initTree(); yield drawTree(); yield Promises.tick(2000, drawTree()); const { random } = Math; for (let n = 0; n < array.length; n++) { const v = array[n]; let k = 1; for (let i = 0; i < depth; i++) { ++buffer[k]; yield Promises.tick(400, drawTree()); const l = buffer[k + k]; const r = buffer[k + k + 1]; k += k; if (l > r) k++; else if (l === r) k += (random() * 2) | 0; } buffer[k] = v; yield Promises.tick(400, drawTree()); } yield Promises.tick(4000, drawTree()); } }