Generative Art

Demo video

Generative Art is a website and tool that allows users to generate art out of text. Each image that is produced is unique and irreproducible. To begin, users enter sentences or words on the text box on the right. As users type new letters, new shapes are drawn on the canvas. When the user is done typing, they have the option to clear the canvas or save the resulting image by clicking the appropriate buttons. There is also the option to customize the colors of the background and the shapes that are drawn. The default background color is black and the default shape is white.

Here are some examples of the images that can be created:

How it works:

The shapes and the canvas they are drawn on are created with p5.js using a series of techniques such as Perlin noise, recursion and fractals. There are 26 patterns, one for each letter in the English alphabet. The complexity of the pattern for each letter is loosely based on their frequency in the English language. Letters that appear frequently have small patterns, while letters that appear less frequently have large patterns that take up more of the canvas. Even if you enter the same letter twice, each pattern has various random variables at play. There are currently no patterns drawn for punctuation, space, or numbers.

Here is an example of the generated pattern for each letter:

Future work:

There is currently a bug that when you backspace while typing in the text box the last letter’s pattern is redrawn. This is due to the fact that I am coding this program by creating a series of functions for each pattern and calling the appropriate function depending on the letter that was just typed. However, this can be fixed by making each pattern a class instead of functions and creating objects of each pattern when a new letter typed. This way I can save an array of objects and have historical data on the user’s input. With more time, I will edit my implementation to account for this issue.

I would also like to create a gallery where you user’s can share and view artwork created by others!

One thought on “Generative Art

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s