Sunday, March 30, 2014

Generative Art

Howdy everybody! 

So this posting is a bit different from my other ones which have mostly had to do with graphs. It was in an information visualization class I'm taking that we were recently asked to create our own generative art (programs to produce artsy stuff). For my project I decided to write up some javascript code to generate Mondrian inspired art. I had always thought that his art looked like something that could be created through code, and my intuition was right. What you see below is the result of my programming labors. Every time that you click the Generate Mondrian button you get a new randomly generated Mondrian's Broadway inspired work of art. Refreshing the web page will also give you a new result. Pretty cool huh? ;D  

So how did I do it? Well, to be quite frank I didn't use any fancy algorithms in the process. My code basically involves randomly generating rectangles within an html5 canvas. The number of thin yellow rectangles/columns running from top to bottom was randomly chosen to be a number within a certain range. The same applied to the number of yellow rectangles/rows spanning the canvas from left to right. The number of small grey, red or blue squares to be drawn on each yellow rectangle was also random (constrained by upper and lower bounds as well). To make sure that the yellow rectangles did not line up together and produce thick rectangles, I only drew a rectangle on the canvas if its x or y coordinates were equal to some number modulo 2 (i.e. I made sure that there was some spacing between yellow rows and columns). The final touch was randomly generating some larger red or blue rectangles to layer on top of the rest of the canvas art. I chose a brighter color of red than Mondrian's original brick red for this final part. I thought that the generated art popped out more with this revised shade of red. If you would like to save a copy of any of the randomly generated Mondrians just right click on the image and follow the standard save image as procedure.  

P.S. If you'd like to see more artsy stuff then I'd recommend that you check out my other blog: Joys of a Craftista 
http://craftistajoys.blogspot.com/



Generate Mondrian