Our first homework assignment for Introduction to Computational Media with Dan Shiffman was somewhat open ended. Dan asked to us make a static image using the basic shape and line tools in Processing, and to write a blog post about it. I decided to create a primitive fractal pattern. The source code for the image above is available on Github.
I constructed a variation on the fractal curve known as a Koch snowflake. First specified by Swedish mathematician Helge von Koch in 1904, the Koch snowflake is one of the first fractal curves to have been described.
Rather than using equilateral triangles, I used squares. This was my first sketch:
I then mapped out the base pattern, starting with an 8 x 8 unit “origin square”, and derived the relevant equations to transpose coordinates beginning with that square:
Using these equations as a guide, I then wrote some pseudocode for a recursive function to draw the fractal:
Which turned into…
|
1 2 3 4 5 6 7 8 9 10 11 |
def drawFourSquares(x, y, l): l = l / 2 sTop = drawSquareTop(x, y, l) sBottom = drawSquareBottom(x, y, l) sRight = drawSquareRight(x, y, l) sLeft = drawSquareLeft(x, y, l) if l >= 1: drawFourSquares(sTop[0], sTop[1], l) drawFourSquares(sBottom[0], sBottom[1], l) drawFourSquares(sRight[0], sRight[1], l) drawFourSquares(sLeft[0], sLeft[1], l) |
The rest of the code is available on GitHub.
First, I generated the shape with default fills and strokes, just to test my algorithm:
I then removed the strokes, changed the color mode to HSB, and mapped the saturation and opacity of the fills to the length of each square. The result was significantly more attractive:
Finally, I mapped the hue to the length of each square and used logarithm functions to smooth the transition between different hues, opacities, and saturation levels. (The length decreases by a factor of two at each level of the fractal pattern. By using binary logarithms (base = 2), I was able to make the hue, opacity, and saturation transitions linear in order to include a more diverse spectrum of values for each property.) This was the final result, also pictured above:
The constraint for this project was to create a static image. However, in the future I would like to explore animating this pattern, perhaps by shifting the color values to create the illusion of depth and motion. Another option would be to program a continuous “zoom in” or “zoom out” effect to emphasize the potentially endless resolution and repetition of the pattern.
