konrad.earth - CindyJS

</iframe> </div> I wondered, how hard could it be to implement something similar? If you just want to see the animation, click here</a>. If you’re interested in the background, read on!</p>
Concept</h2>

The basic idea: Cannon, Balls, Bouncers </p> </figcaption> </figure>
First we have a cannon that shoots out balls at a certain frequency. These balls then fly through a field of bouncers, that act like small trampolines for the balls. Upon hitting a bouncer, a ball will emit a certain tone.</p>
Physics</h2>
We’re going to be using the wonderful CindyJS Framework</a>, that does a lot of the heavy lifting behind the scenes.</p>
Ball flying physics is easy. A ball with position $x$ and velocity $v$ will be updated in two steps:</p>

Updating the speed: $v \gets v + dt \cdot g$, with a time step $dt$ and the gravity vector $g$</li>
Updating the position: $x \gets x + dt \cdot v$</li> </ul>
The collisions with the bouncers are where it gets tricky. First of all, how do we detect a collision?</p>

This is what we want to detect: $x$ and $\bar x$ are on opposite sides of the bouncer. </p> </figcaption> </figure>
Say a ball is updated from position $x$ to position $\bar x$. We want to check if it collides with a bouncer during that update. A bouncer is essentially a line between two points $b_1$ and $b_2$.</p>
One can see that we have a collision if and only if these two conditions are fulfilled:</p>

$x$ and $\bar x$ lie on opposing sides of the line $b_1b_2$.</li>
$b_1$ and $b_2$ lie on opposing sides of the line $x\bar x$.</li> </ul>
There is a neat way of calculating which side of a line a point is on using determinants. The determinant</p>
$$\det\begin{pmatrix}x_A&x_B&x_C\\ y_A&y_B&y_C\\ 1&1&1\end{pmatrix}$$</p>
will have a positive sign if $C$ lies left of the line $AB$, and a negative one if it lies on the right:</p>
</iframe>

konrad.earth - CindyJS

Metaballs

Soap Bubbles

Finished visualization</h2> Putting it all together, we get this nice little interactive visualization.</p> </iframe> </svg> </button> </div>

Particle Life

Pachelballs

Finished animation</h2> </a> Putting it all together, we get this nice little interactive animation.</p> </iframe>

Finished visualization</h2>
Putting it all together, we get this nice little interactive visualization.</p>
</iframe>

Finished animation</h2>
</a> Putting it all together, we get this nice little interactive animation.</p>
</iframe>