Pattern is an Adobe After Effects plugin coded in C++ that creates Islamic star pattern-style animations using the Hankin’s Polygons-in-Contact algorithm. It implements mathematical concepts of trigonometry, vectors, and planar geometry to help users animate intricate patterns inspired by Islamic architecture with the click of a button. Pattern also helps animators easily select color palettes by generating aesthetically pleasing color combinations from a dataset of images (illustrated by professional artists at Kurzgesagt) through the K-means clustering machine learning algorithm. Pattern is based on the University of Waterloo’s research paper ”Islamic Star Patterns from Polygons in Contact” by Craig S. Kaplan.

Pattern is an Adobe After Effects plugin I coded in C++ based on a computer graphics research paper ”Islamic Star Patterns from Polygons in Contact” by Prof. Craig S. Kaplan from the University of Waterloo. This plugin helps users animate complex geometric patterns inspired by Islamic architecture with the click of a button. To achieve this, I applied Prof. Kaplan’s research to animation and developed a method of implementing the Hankin’s Polygons-in-Contact algorithm which, as confirmed by Prof. Kaplan, runs faster than the method he describes in his paper.

Hankin’s Polygons-in-Contact algorithm is a geometric technique used to recreate complex Islamic-style patterns. The first step in this algorithm is to tile the surface with polygons as shown in figure 1.0. This tiling is only made up of six-sided polygons, so it is called a 6.6.6 tiling. Pattern offers 4 more tiling options: 4.4.4, 4.8.8, 4.6.12, and 3.12.12.

For simplicity, consider one of these polygonal tiles. We find the midpoints of each of the sides of this tile.

Then we draw two rays originating from the midpoints. The angle between the rays and the side of the polygon it originates from is the contact angle or θ. In figure 1.2, θ = 60◦.

Then, to quote Hankin, the rays “are continued until they meet other lines of similar origin” as shown in figure 1.3.

We repeat this for the entire tiling.

Finally, a star pattern is revealed when we hide the original 6.6.6 tiling.

The rays originating from the midpoint of each side of every polygon can be moved by a distance δ in the left and right direction from the midpoint (as shown in figure 1.6) to create more interesting patterns. My method of implementing this algorithm is as follows. First, I find the midpoints of all the sides of the polygon. Now, consider the side AB and its midpoint C in figure 1.7. If δ > 0, I use vector normalization to move C in the left or right direction by δ units along the polygon’s side. Using trigonometry, I rotate B about C by the contact angle. Let’s call this rotated point D. Let the midpoint of the side adjacent to AB be E. I’ll rotate B about E by the contact angle. Let this rotated point be F. I’ll now find the equations of CD and EF and find their intersection point. If the lines CD and EF are collinear, I have them both intersect at F. If one is vertical/horizontal, I use the constant x or y coordinate value to solve for the missing one. Otherwise, I just solve the equations of CD and EF to find the intersecting point. Then, I do this to all sides of the polygon and repeat it on all tiles as described earlier.

I also explored moving the rays originating from the midpoint of each side of every polygon by a distance δ away from each other instead of just towards each other like in figure 1.6 (as it is traditionally done) to create more interesting patterns at θ = 90◦.

Varying the value of θ and δ generates an animation of different patterns.

Kurzgesagt is an animation studio that creates educational infographic animation videos on YouTube. By using a dataset of professionally illustrated images extracted as frames from Kurzgesagt’s YouTube videos, Pattern also simplifies the task of selecting color palettes for animators by automatically generating aesthetically pleasing color combinations through the K-means clustering machine learning algorithm.

This algorithm generates K clusters (groups) of pixels from an image – where K is a positive integer. Pixels that are similar in color are grouped under one cluster. I use a color visibility algorithm to pick 2 clusters that represent colors that are far apart on the color wheel, and thus, complement each other. The colors selected from the 2 clusters are now generated for the animator to use.

Pattern is currently being tested for release this year at aescripts + aeplug-ins – an After Effects plugin company. The exact code I wrote to implement Pattern can be accessed here.