Generative Art Snowflake Maker

Every year for the holiday season, Nebo holds an annual desk decorating contest in which teams compete against one another to decorate our “pods” in the most impressive manner. Last year, the Engineering team decided to be lazy “build inter-team spirit” by creating an app that would generate holiday ornaments, so that our fellow Nebo-ers could decorate our pod tree for us! It would have been boring to have everyone make the same ornament, so it was decided that we should do something a little more exciting…

Generative art is the practice of making art using autonomous/algorithmic systems, and has been an interest of mine for some time. After all, why make art when you can make a computer do it for you? The premise may sound silly, but there are actually a lot of advantages to programmatically creating art pieces. Benefits include:

• The ability to quickly iterate on a concept much faster than in a physical medium. For instance, a computer can generate thousands of images in the time it takes a human to generate just one.

• The reduction of physical resource waste on failed experiments. When working with a machine, an undesirable result means a code change rather than trashing a canvas.

• The low barrier to entry. Anyone with a little coding knowledge, a text editor and a browser can start making art. Certain code libraries have abstracted much of the math away to make it easy to draw objects with minimal effort.

• The opportunity to introduce personalization and dynamism into works of art. By integrating variables into code, art can be generated based on user input, opening up a variety of unique generation options.

• An element of surprise and delight: you never know exactly what you’ll get when you introduce randomness into the mix!

Leveraging generative art for our ornament-making app meant that we would be able to offer customization options to users and quickly make a large variety of unique ornaments based on whatever values they input to the system. Perfect!

Generative art can range from simple to really, really complicated, and encompasses a wide variety of coding techniques, languages, tools, etc. An easy way to get started with generative art is with JavaScript and the p5.js library for drawing. This setup requires only that you have:

• An understanding of JS

• Access to a web browser

I also recommend checking out Matthew Epler’s tutorial series, Designing Generative Systems with p5.js. Matthew defines a strategy for generating art by utilizing layers of simple shapes that, when stacked on top of each other, create complex and interesting patterns.

You can experiment with this style of generative art with some code I’ve written for testing purposes: https://github.com/jessburnsm/generative_art

In order to make our ornament-maker holiday themed, I decided to experiment with snowflake shapes instead of circles. The first question was: how do you draw a snowflake with code? Fortunately, snowflakes are symmetrical and are recognizable as a geometric shape, which makes them easy to draw with p5.js.

I began drawing snowflakes by generating only one arm of the structure, in a similar fashion to the circles seen below. The snowflake’s arm consists of random layers of shapes/colors as well as a base to represent the middle of the snowflake itself. This shape is then copied, rotated, and drawn 5 more times to create the full snowflake shape.

We knew that the result of our ornament maker app would be a printed piece of paper at this point, because that was the easiest resource we had available (paper and printers are easy to come by in a tech company!). Since we were working with paper as a medium, we researched some paper crafting shapes so that users could generate, print and fold their ornament. We settled on three shapes: box, pyramid and dodecahedron. For those not inclined toward paper folding, we also added a simpler greeting card option, which only requires 2 folds. Using the paper-crafting templates as a base, I adjusted the code to draw snowflakes on them in the correct positions to create the final ornament.

Up until this point, the snowflakes in the application were generated completely randomly based on JS’s random number generator. Unfortunately, this random number generator cannot be manually seeded, which means that the results of the art cannot be influenced meaningfully. But wait: isn’t the point of generative art to introduce randomness?

Yes! ...but sometimes it’s useful to be able to have a method to reproduce a certain result. We can do this by seeding a random number generator with a value we define ourselves. A defined seed will cause the random number generator to produce a sequence of consistent values, which in turn produces the same “random” results every time. You can read more about seeding here.

In the case of this application, we wanted to be able to provide a seed to the code to produce unique snowflake combinations based on the entered value. For instance, entering your own name as the seed produces a piece of art that is unique to your name, adding an interesting aspect of personalization to the project.

Since vanilla JS does not have a manually seed-able random number generator, I used seedrandom.js instead.

To finish the app, we designed a form interface which allows users to:

• Enter a seed value, such as their name, to generate unique snowflakes

• Select the ornament shape

• Select the ornament colors

• Define a custom message on the ornament

The field of generative art is full of possibilities and this is just one of the paths you can take. The next time you need to give your app a dynamic or personal touch, consider introducing some algorithmic art to your users!

Are you curious to see how the final product turned out? Check out our video on Facebook, or, even better, use the app for yourself! If you make something awesome, be sure to let us know!