In musing on how a family tree is kind of like Pachinko, I wondered if this could be animated somewhat like a Pachinko machine in the family tree visualization I have been playing with (available at https://learnforeverlearn.com/ancestors).

I took some first steps towards this by pulling out the Bezier curve parameters d3 is generating for the links between nodes, coupled with Particle in Cell's notes on computing the intersection between Bezier curves and a line , to make some first steps towards a Pachinko-like animation effect. Some details on this implementation are at the bottom of this note.

A few youtube videos demonstrating this are below. You can also go directly to the interactive visualization with the tree for Charles II of Spain automatically loaded via this link, and clicking the "Do Pachinko" button.

(direct link to this tree is at

https://learnforeverlearn.com/ancestors/?file=royal92.txt

While I still need to play with the timing and smoothness, it is nevertheless interesting to watch the animations play over and over, reflecting on the huge number of things that had to happen (or not happen) through the centuries to result in me being here today.

Shown below is an example of a curve displayed on the screen and the svg path generated by d3:

$${\bf{r}}(t) = {(1-t)}^3 {\bf P_0} + 3{(1-t)}^2 t {\bf P_1} + 3{(1-t)} t^2 {\bf P_2} + t^3 {\bf P_3}, \ t \in [0,1]$$ Placing a circle on this curve at a given year $\hat{y}$ (i.e., height) requires finding the $\hat{t}$ so that $$\begin{eqnarray} \hat{y} & = & \text{y-coordinate of } {\bf{r}}(\hat{t}) \\ & = & \text{y-coordinate of } {(1-\hat{t})}^3 {\bf P_0} + 3{(1- \hat{t})}^2 \hat{t} {\bf P_1} + 3{(1-\hat{t})} \hat{t}^2 {\bf P_2} + \hat{t}^3 {\bf P_3} \end{eqnarray} $$

There are optimizations I need to address with respect to quickly finding the paths intersecting a given point in time, but it seems to work ok on small to moderately-sized trees.

## No comments:

## Post a Comment