Playing With Fractals
When I was a peer mentor a Portland State University, the professor did an exercise with the students to demonstrate some of the nature of fractals.
- Draw an equilateral triangle
- Number the vertices one, two, and three
- Pick a point anywhere within the triangle
- Pick a random number among one, two and three
- Mark a new point halfway between your current point and the corner corresponding to the number chosen
- Iterate those last two steps as many times as you can within the available time
The result is a Sierpiński triangle
For fun, I implemented it using HTML's Canvas and Javascript:
Emergent Sierpiński Triangle
And then I wondered, if it could be generalized to other shapes. 🤔
Here's my first attempt at a square:
Simple Square
As you can see above, the result is just a square full of random dots 😅
What went wrong? It took me a while to figure out. To understand, we need to think about what's happening when we do the iterations. What we're really doing in the triangle above: take any point in the big triangle, and scale it down into one of the three corner triangles. For example, if we start with a dot in the center of the triangle, if we want to scale it to the top-third triangle, we can look at the top-third triangle and put a dot in its center. That's what we are doing when we put a dot halfway between the center and the top vertex.
In the below example, I'll force each jump to always jump towards the top point. The initial point "A" has the same relationship to the big triangle as the result of the jump "B" has to the smaller top triangle. If "A" is in the bottom left of the big triangle, "B" will be in the bottom-left of the smaller top-triangle.
Scaling
The final result of many iterations looks interesting, because there is a gap between the three sub-triangles, and that gap is reproduced in each of the smaller triangles.
Triangle
Circling back to the Square: What do the sub-squares look like?
Sub-Squares
They are all touching! haha, our random dots from before are four sub-squares of dots, but the sub-squares are all touching, so we can't see the boundary between them.
We can try tweaking the 1/2 proportion of the sub-squares to get more interesting results:
Square with 0.49 proportion
Square with 0.51 proportion
It looks kind of neat, but honestly it was a bit of a let-down. I was expecting something as cool as the Sierpiński triangle!
Forging ahead, I wanted to try to make a pentagon. Here I had some fun figuring out how to calculate the positions of a regular polygon's vertices; after googling around, it turns out the the sum of a polygon's angles is equal to 180 times two less than the number of sides. From there it was just a matter of some simple trigonometry and I was able to draw any regular polygon:
Arbitrary Regular Polygon
I also had a lot of run implementing a shape-table class to be able to evenly distribute an arbitrary number of shapes within a given space:
Distribute Regular Polygons
Pentagons presented an interesting challenge. With the triangle and square, I just used a ratio of one-half and anchored the smaller shapes into the vertices. What ratio to use for pentagons?
Sub-pentagons Ratio
Oh man, that's so cool! Let's do it for any polygon!
Sub-polygons
So neat! How about with colors:
With Colors
Ok, let me give you full control so you can have the fun I did:
Full-Customization Polygons
Googling around, I was able to find the non-overlapping proportion for pentagons, but not for too many higher orders. So I implemented a fitting-algorithm. You give is a starting point, and a method to determine if it's currently too "high" or too "low", and it will iterate up and down at increasing levels of precision until it has a good value.
As far as looking for the appropriate sub-shape proportion, it's just a matter of making the sub-shapes, and seeing if any of the overlap!