weighted ellipses

Applying weights to an ellipses can create amazing patterns!

An ellipse can be defined as the set of all points having some total distance from two focal points. We generalize by allowing for more than two points, and by applying a weight to the distance from each focus. I explain this more thoroughly in my video on the topic.

controls

Start by pressing the die to randomize! This is an easy way to interact with the page.

To add points, press either the + for a positive weight or - for negative. You can click and drag each of the points to position them as desired. This can be tricky while they're spinning, so use the play/pause to toggle spin.

Each point has some 'repetition', controlled by the arrows. This is 1 by default, but higher values are more interesting. If a point has 5, there will be duplicate points that form a regular pentagon around the center. The center is shown on-screen as a small plus. Try dragging it around! The duplicates will move accordingly, which looks very cool.

Each point also has some 'weight', which can be controlled by the slider. The left is -1 and the right is 1. Weights near the center are near 0, meaning that the points will have little effect upon the resulting shape. You can automatically set all weights by pressing the scales. This often produces nice patterns, since it removes tendencies towards a single distance.

The background is controlled by the gradient slider that determines the spacing between the bars, and by the on-screen square that determines the reference distance.

about me

I am TheGrayCuber, a creator of mathematical websites and videos :)

I hope you enjoy this page! I had some trouble making the associated video. Often my intent is to teach a certain mathematical topic. The task is to create an engaging script and visuals about that topic. However, this concept was just born out of my curiousity of 'what would happen if we generalize ellipses?', so the end result is based on whichever settings led to the most interesting pictures. It feels lacking of some deeper meaning, but it's really fun to explore, so I figure that is meaning enough.

This is the first project that I've made using shaders. Please let me know if you encounter any issues. It took a lot of fiddling to get working across all my devices and I'm still not sure if it will be broadly supported. Shaders can expand the possibility of future visualizations, but I'm hesitant to use them again if they cause problems for users.

made with love, and without AI

leave a tip to support my future creations :)

view the code behind this website