An Adventure in Creating Art With Code

Dean Watts
Dec 26, 2016 · 5 min read

To play around with the art generator hop over to: http://jsartgenerator.herokuapp.com/ to view the art that has been created check out: http://imgur.com/a/ufQyj

Like many people in the industry I suffer from what is referred to as only being able to create “Programmer Art.” Programmer Art has been talked about ad nauseam with many people offering different solutions as shown below:

Usually programmer art is discussed in the context of game development, where the artistic direction is a critical step in the development process.

I suffer from not having much experience or talent in the art world, as shown above in an android game I worked on a few years ago. I never released it because I was never satisfied with the art assets even though it was technologically impressive and a pretty good time.

However art is a lot more than just game assets poorly done by a programmer. Art is defined as:

“The quality, production, expression, or realm, according to aesthetic principles of what is beautiful, appealing, or of more than ordinary significance.”

So while I couldn’t design a visually pleasing Golf game, I thought that I could potentially produce something with extraordinary significance that also appealed to aesthetic principles, and maybe just maybe, consider it artistic.

However I’m lazy and wanted a machine to do it for me.


A coworker of mine mentioned Mandala art to me, and I thought it would be a pretty easy project to emulate on an HTML5 canvas. After about half an hour I had a basic drawing system down where a user could draw on the canvas while having their lines be reflected along each quadrant.

This created some cool results, but when I got home it was time to take it deeper. I soon had it drawing by itself randomly, which looked like a jumbled mess but was still progress. I then compared a user drawing to the machine, and added some variables for limitations on where the machine could draw the next line.

If I took the previous point and the current point, I could look at the next point I am about to draw to and calculate the angle between the three. When humans draw, the tend to avoid sharp angles, so I added “MinAngle”, “MaxAngle”, “MinLineLen”, and “MaxLineLen” limitations for the angle and line length. The resulting algorithm looked like:

The magic happens in the while section of the do_while loop. We check to make sure the angle falls between the min and max angles 50% of the time. I added that 50% check just because sometimes users would intentionally create unsightly sharp angles. The rest of the conditional statement checks to make sure the next line is relatively in bounds.

Now I was watching this seemingly living breathing algorithm run wild within my canvas. It was quite pretty until it started to fill up the canvas and everything just looked black. I then added a color feature with two options, at a variable interval the color could either change to a random color or go through a color palette.


The color palette was slightly more difficult to handle, as I had been working solely with just a static html page before and now needed a server to accomplish what I wanted. I wanted to pull from a color palette api and source a palette from there. ColourLovers had an api that was just what I needed, with their /palette/random endpoint:

I set up a Rails backend that had a route to make a post request to the ColourLovers api and respond with the palette. I set up an ajax request in my javascript app to the route, and now I was now pulling from user curated color palettes and my results were looking great! On top of that, the random colors were looking cool too.

After some more tweaks I needed to come up with an endgame for the generator, as now it fills the canvas and keeps going.


Enter Imgur. Imgur has an application api that allows for the uploading of images. In fact, GitHub user dncrht has created a useful Imgur Rails gem. I set up another route that takes the canvas data and uploads the image to an Imgur album I created, and now I had a place where all the user generated images would automatically be uploaded!

…or so I thought. Turns out I needed to do some forking and add some implementation to the Rails gem regarding Base64 encoded strings and album parameters, but after adding that on my own GitHub page everything was up and running.

So check out the images, and create your own at jsartgenerator.herokuapp.com!

Also check out the code for the whole project here:

Dean Watts

Written by

Software Developer in Manhattan. Passion to learn and teach about the power of programming.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade