31:Taab,Looking at the catches only, at time ${tex`t`}, we will have caught the blue ball while the yellow and red balls are still in the air to be caught later. One beat later at time ${tex`t+1`}, we will catch the descending yellow ball. At time ${tex`t+2`}, we will catch the red ball. After that, with no more balls in the air, there are no more balls to catch. We can summarise the state of the balls over a 5-beat period as: ⬤⬤⬤◯◯ where the five positions from left to right represent the times ${tex`t, t+1,\dots t+4`} and the symbol at each position is whether or not a ball is due to be caught at that time. This sequence of 5 symbols represents the _state_ of our juggling balls predicted over a 5-beat period, which is completely pre-determined by the balls in the air and in hand at time ${tex`t`}. This sequence of symbols is referred to as a _landing schedule_. Now let's move time forward and consider the states that would arise if each time we have a ball in hand we simply drop it (so the dropped ball will not be destined to be caught any time later). We can view the full sequence of states where the pattern shifts left by one position on each time increment: ⬤⬤⬤◯◯ _Starting state_ ⬤⬤◯◯◯ _...time passes (one beat)_ ⬤◯◯◯◯ _...time passes_ ◯◯◯◯◯ _...time passes_ Not a very exciting sequence of events as we sequentially drop the blue, yellow and red balls. But suppose instead of dropping that first blue ball, we throw it once at height 5. This would mean 5 beats later it will arrive back in hand, so the full sequence now looks like this: ⬤⬤⬤◯◯ _Throw the blue to height 5_ ⬤⬤◯◯⬤ _...time passes_ ⬤◯◯⬤◯ _...time passes_ ◯◯⬤◯◯ _...time passes_ ◯⬤◯◯◯ _...time passes_ ⬤◯◯◯◯ _...time passes_ ◯◯◯◯◯ _...time passes_32:T5eb,We have two important components to this juggling representation: - The landing schedule **state** is the pattern of held and in-air balls over a given period of time ${tex`t, t+1, \dots, t+H-1`} where ${tex`H`} is some maximum throw height permitted. They are represented by a sequence of discs and circles in these diagrams, but could equally be a sequence of binary digits as we only need to distinguish two values: 'held' or 'airborne'. - A **transition** between landing schedule states as time advances by one beat. If there is a ball in hand at time ${tex`t`}, a throw will be made of height ${tex`h \leq H`} such that its landing location is in one of the empty slots at time ${tex`t+h`}. We can model these states and transitions as a [finite state machine (FSM)](https://en.wikipedia.org/wiki/Finite-state_machine) representing a series of states and deterministic transitions between them. An FSM can be visualised as a graph with the landing schedule labels here using 🟤 for a ball in hand at a given time, or ◯ if in the air. Below is the FSM diagram for 3 balls with the maximum throw height ${tex`H=5`}. The 3-ball cascade state is at the top: 🟤🟤🟤◯◯. The edge labels are the throws that transition a given state to another. This allows us to trace any possible pattern by moving around the graph recording the throw heights (edge labels) as we do so. Any traversal of the graph that takes us back to a previously visited state (a 'cycle') forms a repeatable juggling pattern.33:T471,{ const g = suppressEvenStates(siteswapFSM(3, 5)); return g.toDot({ compact: true, showWeights: true, showDirected: true, nodeLabels: g.getLookup(), scale: 0.8, extra: `7 [style=filled, fillcolor=cornsilk]; 19 [style=filled, fillcolor=lightgrey]; 21 [style=filled, fillcolor=lightgrey]; 25 [style=filled, fillcolor=lightgrey];`, edgeAtts: ({ source, target, weight }) => { const label = formatEdgeWeight(weight); const base = source === target ? { label: "", headlabel: label, labeldistance: 2.6, labelangle: 0, labelfloat: true } : { label }; return { ...base, ...((weight === 4 && target === "11") || (weight === 2 && target === "7") ? { color: "red", penwidth: 2, fontcolor: "red" } : (weight === 5 && (target === "19" || target === "25")) || (weight[0] === 2 && target === "7") ? { color: "steelblue", penwidth: 2, fontcolor: "steelblue" } : {}) }; } }); }34:T450,{ const g = suppressDegree1(suppressEvenStates(siteswapFSM(3, 5))); return g.toDot({ showDirected: true, nodeLabels: g.getLookup(), scale: 0.8, extra: `7 [color="red", penwidth=2, style=filled, fillcolor="#ff000020"]; 11 [color="red", penwidth=2, style=filled, fillcolor="#ff000020"]; 13 [color="red", penwidth=2, style=filled, fillcolor="#ff000020"];`, edgeAtts: ({ source, target, weight }) => weight === 4 || weight === 2 || weight === 50 ? { color: "red", penwidth: 2, fontcolor: "red" } : {}, edgeAtts: ({ source, target, weight }) => { const label = formatEdgeWeight(weight); const base = source === target ? { label: "", headlabel: label, labeldistance: 2.6, labelangle: 0, labelfloat: true } : { label }; return { ...base, ...(label === "4" || label === "2" || label === "50" ? { color: "red", penwidth: 2, fontcolor: "red" } : {}) }; } }); }35:T405,| nBalls | H=3 | H=4 | H=5 | H=6 | H=7 | | :----: | --- | --- | --- | --- | --- | | **2** | `${hamiltonian({ nBalls: 2, maxHeight: 3 })[0].throws}` | `${hamiltonian({ nBalls: 2, maxHeight: 4 })[0].throws}` | `${hamiltonian({ nBalls: 2, maxHeight: 5 })[0].throws}` | `${hamiltonian({ nBalls: 2, maxHeight: 6 })[0].throws}` | `${hamiltonian({ nBalls: 2, maxHeight: 7 })[0].throws}` | | **3** | | `${hamiltonian({ nBalls: 3, maxHeight: 4 })[0].throws}` | `${hamiltonian({ nBalls: 3, maxHeight: 5 })[0].throws}` | `${hamiltonian({ nBalls: 3, maxHeight: 6 })[0].throws}` | `${hamiltonian({ nBalls: 3, maxHeight: 7 })[0].throws}` | | **4** | | | `${hamiltonian({ nBalls: 4, maxHeight: 5 })[0].throws}` | `${hamiltonian({ nBalls: 4, maxHeight: 6 })[0].throws}` | `${hamiltonian({ nBalls: 4, maxHeight: 7 })[0].throws}` | | **5** | | | | `${hamiltonian({ nBalls: 5, maxHeight: 6 })[0].throws}` | `${hamiltonian({ nBalls: 5, maxHeight: 7 })[0].throws}` | | **6** | | | | | `${hamiltonian({ nBalls: 6, maxHeight: 7 })[0].throws}` |36:[] 2f:{"title":"Visualizing Juggling: Ball State","cells":[{"id":0,"value":"# Visualizing Juggling: Ball State","pinned":false,"hidden":false,"mode":"md"},{"id":5512,"value":"- [Chapter One: Movement in space and time](https://observablehq.com/@jwolondon/visualizing-juggling)\n- [Chapter Two: Marking time](https://observablehq.com/@jwolondon/visualizing-juggling-marking-time)\n- [Chapter Three: Siteswap](https://observablehq.com/@jwolondon/visualizing-juggling-siteswap)\n- [Chapter Four: Pattern space](https://observablehq.com/@jwolondon/visualizing-juggling-pattern-space)\n- **Chapter Five: Ball state**\n- [Appendix: Theorems, theory and code](https://observablehq.com/@jwolondon/visualizing-juggling-appendix)\n \n_These pages explore how we might approach the task of visualizing the movement of balls in juggling patterns. Doing so uncovers challenges and benefits of visualizing real and abstract patterns in space and time._\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":4492,"value":"## Ball state","pinned":false,"hidden":false,"mode":"md"},{"id":4565,"value":"Consider the first three catches in a standard 3-ball cascade:","pinned":false,"hidden":false,"mode":"md"},{"id":4568,"value":"stave1View({\n siteswap: \"3\",\n cycles: 1.25,\n h: 120,\n showLevels: true,\n tFormat: (n) => (d) => d == 3 ? `t` : d > 3 ? `t+${d - 3}` : null,\n catchTrajMaxBeat: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4598,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":4909,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":4727,"value":"{\n const g = siteswapFSM(3, 5);\n return g.toDot({\n compact: true,\n showWeights: true,\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.8,\n extra: `7 [style=filled, fillcolor=cornsilk]; 14 [style=filled, fillcolor=lightgrey]; 19 [style=filled, fillcolor=lightgrey]; 21 [style=filled, fillcolor=lightgrey]; 22 [style=filled, fillcolor=lightgrey]; 25 [style=filled, fillcolor=lightgrey]; 26 [style=filled, fillcolor=lightgrey]; 28 [style=filled, fillcolor=lightgrey];`,\n edgeAtts: ({ source, target, weight }) =>\n (weight === 4 && target === \"11\") || (weight === 2 && target === \"7\")\n ? { color: \"red\", penwidth: 2, fontcolor: \"red\" }\n : (weight === 5 && (target === \"19\" || target === \"25\")) ||\n (weight === 2 && target === \"14\") ||\n (weight === 0 && target === \"7\")\n ? { color: \"steelblue\", penwidth: 2, fontcolor: \"steelblue\" }\n : {}\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4916,"value":"For example, starting at the top, we could throw a 4 then a 2 (red directed edges), representing the **42** pattern. Alternatively we could take a longer cycle: throwing a 5, another 5, a 2 and then a 0 (the blue directed edges), giving the pattern **5520**.\n\nRemembering a 'throw' of 0 means there are no balls in the hand at that point in time, so no actual throw takes place. States with a ◯ on the left (time ${tex`t`}) will always have a 0 as the only option to transition out of them as there is no ball in hand to throw. If your hand is empty, all you can do is wait for a ball to land in it some time later.","pinned":false,"hidden":false,"mode":"md"},{"id":4840,"value":"We can now see how to transition from **5241** to **5124**. The 5241 cycle starts from the top cascade 🟤🟤🟤◯◯. But by throwing a 5 and then a 2 we end up in the 🟤🟤◯🟤◯ state towards the bottom of the diagram. From there we can make a cycle by throwing a 5, down to 🟤◯🟤◯🟤, then a 1 back again followed by another loop via the 2 and 4.","pinned":false,"hidden":false,"mode":"md"},{"id":6492,"value":"Generally, for an FSM with maximum height ${tex`H`} and number of balls ${tex`b`}, each state that starts with a ball in hand (🟤 on the left or an 'odd' state if we think of the state in binary from right to left), there will always be ${tex`H-b+1`} throw options available.\n\nIn this case, there will always be 3 options, corresponding to the three ◯s that will become available at time ${tex`t+1`}. We will always be able to throw a 5 because we will always have a vacated space on the far right of the schedule when we advance one beat. The other two possibilities will be the positions of the symbolised ◯s.","pinned":false,"hidden":false,"mode":"md"},{"id":5123,"value":"### Simplifying the FSM","pinned":false,"hidden":false,"mode":"md"},{"id":5126,"value":"We can make a simplification with respect to states that start with a ◯ — 'even' states when represented as a binary string in right-to-left order ${bib.citep(\"zinser_juggling_2010\")}. Because there is no ball in hand at time ${tex`t`}, nothing can be thrown, so those states will always have exactly 1 outgoing 0-labelled edge. We can therefore remove the state from the FSM and concatenate and connect all incoming nodes to its sole output. This simplifies the FSM without any loss of information required to explore transitions:","pinned":false,"hidden":false,"mode":"md"},{"id":6647,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4944,"value":"We can make further simplifications by generalising this process to apply to any node with either a single incoming our outgoing edge (shaded in grey above). We eliminate them as nodes in the graph and concatenate the pairs of incoming and outgoing edges (known as [node suppression](https://bookofproofs.github.io/branches/graph-theory/suppressing-vertices-suppressed-multigraph.html)). Applying node suppression to the entire graph we get a simplified version of the FSM without any loss of information (with the two circuits identified in the original graph above shown again in red and blue):","pinned":false,"hidden":false,"mode":"md"},{"id":6556,"value":"{\n const g = suppressDegree1(suppressEvenStates(siteswapFSM(3, 5)));\n\n return g.toDot({\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.8,\n extra: `7 [style=filled, fillcolor=cornsilk];`,\n edgeAtts: ({ source, target, weight }) => {\n const label = formatEdgeWeight(weight);\n const base =\n source === target\n ? {\n label: \"\",\n headlabel: label,\n labeldistance: 2.6,\n labelangle: 0,\n labelfloat: true\n }\n : {\n label\n };\n\n return {\n ...base,\n ...((label === \"4\" && target === \"11\") || label === \"2\"\n ? { color: \"red\", penwidth: 2, fontcolor: \"red\" }\n : label === \"5520\"\n ? { color: \"steelblue\", penwidth: 2, fontcolor: \"steelblue\" }\n : {})\n };\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5116,"value":"Now every node will always start with ball on the left, ready to be thrown and some corresponding gaps to its right representing the throwing options.\n\nThis makes finding throw sequences a little easier, having removed the 'no-choice' intermediate landing schedules. Although things soon blow up as we increase the maximum possible throw height. Here is the simplified FSM for 5 ball patterns with a maximum height of 7:","pinned":false,"hidden":false,"mode":"md"},{"id":5176,"value":"{\n const g = suppressDegree1(suppressEvenStates(siteswapFSM(5, 7)));\n return g.toDot({\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.8,\n extra: `31 [style=filled, fillcolor=cornsilk];`,\n edgeAtts: ({ source, target, weight }) => {\n const label = formatEdgeWeight(weight);\n return source === target\n ? {\n label: \"\",\n headlabel: label,\n labeldistance: 2.6,\n labelangle: 0,\n labelfloat: true\n }\n : {\n label\n };\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4874,"value":"If the number of balls being juggled is close to the maximum throw height chosen, the graph shows a more regular structure as there are limited future spaces ◯ into which a ball can be thrown, and therefore fewer choices to make to vary a pattern). For example, here is the graph for 8 balls and a maximum height of 9, without applying node suppression (${tex`9-8+1=2`} options per state):","pinned":false,"hidden":false,"mode":"md"},{"id":4870,"value":"{\n const g = siteswapFSM(8, 9);\n return g.toDot({\n compact: true,\n showWeights: true,\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.75,\n extra: `255 [style=filled, fillcolor=cornsilk];`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4933,"value":"The extreme case being when the maximum throw height is equal to the number of balls (${tex`H-H+1`}), and we have a fully saturated landing schedule leading to a cascade (odd number of balls) or fountain (even number of balls) pattern. Here are the FSM diagrams for 3, 4 and 5 balls with maximum heights of 3, 4 and 5 respectively:","pinned":false,"hidden":false,"mode":"md"},{"id":4929,"value":"{\n const g = siteswapFSM(3, 3);\n return g.toDot({\n compact: true,\n showWeights: true,\n showDirected: true,\n nodeLabels: g.getLookup()\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4936,"value":"{\n const g = siteswapFSM(4, 4);\n return g.toDot({\n compact: true,\n showWeights: true,\n showDirected: true,\n nodeLabels: g.getLookup()\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4939,"value":"{\n const g = siteswapFSM(5, 5);\n return g.toDot({\n compact: true,\n showWeights: true,\n showDirected: true,\n nodeLabels: g.getLookup()\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4942,"value":"### Working with the FSM","pinned":false,"hidden":false,"mode":"md"},{"id":5905,"value":"Consider some traversal between the nodes of a landing schedule FSM. As we have established, if that traversal ends at the same node we started from, we know we have a repeatable pattern. For example, the sequence that cycles around 🟤🟤🟤◯◯◯ **→** 4 **→** 🟤🟤◯🟤◯ **→** 530 🟤🟤🟤◯◯◯ (4530 being represented by its canonical siteswap **5304**) can be easily derived from the FSM:","pinned":false,"hidden":false,"mode":"md"},{"id":6570,"value":"{\n const g = suppressDegree1(suppressEvenStates(siteswapFSM(3, 5)));\n\n return g.toDot({\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.8,\n extra: `7 [color=red, penwidth=2, style=filled, fillcolor=\"#ff000020\"]; 11 [color=\"red\", penwidth=2, style=filled, fillcolor=\"#ff000020\"];`,\n edgeAtts: ({ source, target, weight }) => {\n const label = formatEdgeWeight(weight);\n\n const base =\n source === target\n ? {\n label: \"\",\n headlabel: label,\n labeldistance: 2.6,\n labelangle: 0,\n labelfloat: true\n }\n : {\n label\n };\n\n return {\n ...base,\n ...((label === \"4\" && target === \"11\") || label === \"530\"\n ? { color: \"red\", penwidth: 2, fontcolor: \"red\" }\n : {})\n };\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5943,"value":"We can compute traversals of the graph from any starting node looking for cycles with a cap on the maximum period to stop infinitely repeating. \n\nThis is also a cycle: 4 **→** 4 **→** 50 **→** 2 **↺** (siteswap **50244**):","pinned":false,"hidden":false,"mode":"md"},{"id":6581,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5963,"value":"But note that in this second example, we have a cycle within a cycle because the 4 **⇆** 50 sequence (siteswap **504**) itself forms a valid repeating pattern. \n\nThe FSM allows us to distinguish [prime patterns](https://en.wikipedia.org/wiki/Siteswap#Prime_patterns) that contain no other repeating patterns within them (e.g. **5304**) from _composite_ patterns that are composed of two or more prime patterns (e.g. **50244**). Or to put it another way, a prime pattern is any simple circuit in the FSM that visits no node more than once.","pinned":false,"hidden":false,"mode":"md"},{"id":6155,"value":"For example, there are ${siteswaps({nBalls: 3, maxHeight: 5, maxPeriod: 9}).length} different 3-ball siteswap patterns with a maximum throw height of 5 and maximum period of 9. But only ${siteswaps({nBalls: 3, maxHeight: 5, maxPeriod: 99, prime: true}).length} of them are prime. Here are those prime siteswaps grouped in columns by their period:","pinned":false,"hidden":false,"mode":"md"},{"id":6202,"value":"Inputs.table(primeTable({ nBalls: 3, maxHeight: 5, maxPeriod: 9 }), {\n layout: \"auto\",\n width: 640\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6241,"value":"For **3 balls, maximum throw height of 6**, there are ${siteswaps({nBalls: 3, maxHeight: 6, maxPeriod: 99, prime: true}).length} prime siteswap patterns:","pinned":false,"hidden":false,"mode":"md"},{"id":6217,"value":"Inputs.table(primeTable({ nBalls: 3, maxHeight: 6, maxPeriod: 99 }), {\n layout: \"auto\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6234,"value":"For **3 balls, maximum throw height of 7**, there are ${siteswaps({nBalls: 3, maxHeight: 7, maxPeriod: 99, prime: true}).length} prime siteswap patterns:","pinned":false,"hidden":false,"mode":"md"},{"id":6230,"value":"Inputs.table(primeTable({ nBalls: 3, maxHeight: 7, maxPeriod: 99 }), {\n layout: \"auto\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6254,"value":"The number of prime patterns clearly explodes as we increase the maximum permitted throw height. We might therefore choose additionally to limit the maximum period of patterns. For example, here are the ${siteswaps({nBalls: 3, maxHeight: 9, maxPeriod: 9, prime: true}).length} three-ball primes for a **maximum throw height of 9 and a maximum period of 9**:","pinned":false,"hidden":false,"mode":"md"},{"id":6257,"value":"Inputs.table(primeTable({ nBalls: 3, maxHeight: 9, maxPeriod: 9 }), {\n layout: \"auto\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6370,"value":"We might think about what other pathways through the landing schedule FSM might be of interest. One set might be the siteswap circuits that visit _every_ node exactly once. These will still be prime, repeatable patterns, but give us more variability in the orbits of the balls.\n\nA circuit through the FSM that does this is known as a [Hamiltonian circuit](https://en.wikipedia.org/wiki/Hamiltonian_path). If the number of edges is reasonably small, this can be computed, enumerating all possible Hamiltonian circuit siteswaps for a given number of balls and maximum throw height. For example, here are all the Hamiltonian cycles for the three-ball patterns with a maximum throw height of 5:","pinned":false,"hidden":false,"mode":"md"},{"id":6593,"value":"{\n const g = suppressDegree1(suppressEvenStates(siteswapFSM(3, 5)));\n return g.toDot({\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.8,\n extra: `7 [style=filled, fillcolor=cornsilk];`,\n edgeAtts: ({ source, target, weight }) => {\n const label = formatEdgeWeight(weight);\n return source === target\n ? {\n label: \"\",\n headlabel: label,\n labeldistance: 2.6,\n labelangle: 0,\n labelfloat: true\n }\n : { label };\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6376,"value":"Inputs.table(\n primeTable({\n ss: hamiltonian({ nBalls: 3, maxHeight: 5 }).map((d) => d.throws)\n }),\n {\n layout: \"auto\",\n width: 480\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6413,"value":"And here are the 52 Hamiltonian circuits with a maximum height of 6:","pinned":false,"hidden":false,"mode":"md"},{"id":6425,"value":"{\n const g = suppressDegree1(suppressEvenStates(siteswapFSM(3, 6)));\n return g.toDot({\n showDirected: true,\n nodeLabels: g.getLookup(),\n scale: 0.55,\n extra: `7 [style=filled, fillcolor=cornsilk];`,\n edgeAtts: ({ source, target, weight }) => {\n const label = formatEdgeWeight(weight);\n return source === target\n ? {\n label: \"\",\n headlabel: label,\n labeldistance: 2.6,\n labelangle: 0,\n labelfloat: true\n }\n : { label };\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6410,"value":"Inputs.table(\n primeTable({\n ss: hamiltonian({ nBalls: 3, maxHeight: 6 }).map((d) => d.throws)\n }),\n {\n layout: \"auto\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6402,"value":"In practice, some of these patterns will be technically hard to juggle (and remember!), so if we are looking for a collection of 'interesting' juggling patterns to learn we might choose to select the least effort Hamiltonian circuit having lowest sum of throw heights for any given maximum throw height ${tex`H`} constraint:","pinned":false,"hidden":false,"mode":"md"},{"id":6723,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":6751,"value":"You can see the form of these Hamiltonian patterns below. These aren't necessarily the most 'beautiful' patterns in practice, but they do guarantee that every landing schedule for a given maximum height ${tex`H`} is visited once in each cycle with the minimum possible effort.","pinned":false,"hidden":false,"mode":"md"},{"id":6753,"value":"viewof ssChoice = Inputs.select(hamPatterns, {\n label: \"Hamiltonian pattern\",\n format: ([ss, name]) => `${name}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6767,"value":"viewof player = Player()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6773,"value":"{\n const ss = ssChoice[0];\n const speed = ssChoice[3] || 10;\n const maxHeight = d3.max([...ss].map(Number));\n\n return animate(player, {\n pattern: makePatternWithIds({ siteswap: ss }),\n speed,\n h: 240,\n yDomain: [0, maxHeight]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6782,"value":"{\n const [ss, name, label] = ssChoice;\n return stave1View({\n siteswap: ss,\n cycles: 2,\n w: 900,\n h: 120,\n showLevels: true,\n timeLabel: `${ss} (${name}) ${label ? \"'\" + label + \"'\" : \"\"}`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6803,"value":"{\n const [ss, name, label] = ssChoice;\n return radialStave({\n w: 500,\n siteswap: ss,\n inner: 0.4,\n showLevels: true,\n timeLabel: `${ss}\\n${name}${label ? \"\\n'\" + label + \"'\" : \"\"}`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5144,"value":"## References","pinned":false,"hidden":false,"mode":"md"},{"id":5146,"value":"bib.bibliography()","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5724,"value":"import {\n canonicalRotation,\n primitive,\n stave1View,\n radialStave,\n siteswapFSM,\n formatEdgeWeight,\n suppressDegree1,\n suppressEvenStates,\n siteswaps,\n primeTable,\n hamiltonian,\n // parseSiteswap,\n makePatternWithIds,\n animate\n} from \"@jwolondon/visualizing-juggling-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6769,"value":"import { Player } from \"@jwolondon/teaching-utilities-2026\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5136,"value":"import { bib } from \"@jwolondon/visualizing-juggling-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6762,"value":"_Hamiltonian patterns for animation:_","pinned":false,"hidden":false,"mode":"md"},{"id":6756,"value":"hamPatterns = [\n [\"2\", \"2-ball Hamiltonian, H3\", \"fountain\", 15],\n [\"31\", \"2-ball Hamiltonian, H4\", \"shower\"],\n [\"411\", \"2-ball Hamiltonian, H5\", \"\"],\n [\"5111\", \"2-ball Hamiltonian, H6\", \"\", 8],\n [\"61111\", \"2-ball Hamiltonian, H7\", \"\", 7],\n [\"3\", \"3-ball Hamiltonian, H4\", \"cascade\"],\n [\"441\", \"3-ball Hamiltonian, H5\", \"fake box\", 3],\n [\"55150530\", \"3-ball Hamiltonian, H6\", \"\", 5],\n [\"661150616130\", \"3-ball Hamiltonian, H7\", \"\", 3],\n [\"4\", \"4-ball Hamiltonian, H5\", \"fountain\"],\n [\"5551\", \"4-ball Hamiltonian, H6\", \"\", 5],\n [\"666160661640\", \"4-ball Hamiltonian, H7\", \"\", 3],\n [\"5\", \"5-ball Hamiltonian, H6\", \"cascade\"],\n [\"66661\", \"5-ball Hamiltonian, H7\", \"\", 1],\n [\"6\", \"6-ball Hamiltonian, H7\", \"shower\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4311,"value":"### Page layout and styles","pinned":false,"hidden":false,"mode":"md"},{"id":4314,"value":"import { setFonts, setPageStyle } from \"@jwolondon/cdt-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4317,"value":"setFonts()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4320,"value":"setPageStyle()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}