Van Aubel's Theorem - An Interactive Model

Click and drag on the four corners of the inner quadralateral to change the shape.

I came across this theorem for the first time from a mastodon post by @Think2. Reading through the Wikipedia article for Van Aubel's Theorem is a bit sparse, but still informative.

Post by @Think2@mastodon.social
View on Mastodon

I'm not sure why, but I was really fascinated by this particular theorem. I've always liked these sort of geometry puzzles. As soon as I saw the illustration, I thought this would make an amazing interactive visualization. I haven't messed around with drawing stuff in HTML/CSS/JS in a few years, so I took this as a good challenge to get aquanted with what drawing tools look like these days.

I decided to check out p5js after reading about it for a few years now, and it seems pretty dang cool. They have a ton of examples and tutorials. Special thanks to https://github.com/brianhonohan/sketchbook/tree/main/p5js for some great examples of using p5js to draw interactive shapes. I was able to adapt a lot of their approach to things, with just a little bit of simplification for my use case. Also thanks to https://editor.p5js.org/dark_fox/sketches/MydziEQuv for a great implementation of calculating the intersection of two lines.

See the code on github.
<- back to the portfolio