Code art (also known as generative art, code generated experiments, or algorithmic art) is algorithmically determined computer-generated artwork. It sits at the unique intersection of design, art, and programming. At HackerRank, we're developers creating a platform for developers, so we decided our art should be created by developers as well.
HackerRank's Director of Design, Michal (Musho) Simkovic, interviewed Gerard Ferrandez to learn more about code generated art. By day, Gerard is an IT manager working in the aerospace industry. By night, he’s one of the most popular creative coders and contributors on CodePen, whose art has inspired many of HackerRank's research projects.
Musho and Gerard cover the following:
Definition of a creative coder
Musho: Hey Gerard, your code generated experiments inspired multiple research reports we’ve published for the developer community. We’re very thankful for this inspiration! Let’s start by learning more about you.
Gerard: Well, if you insist. I live in Toulouse, France, with wife, son, and daughter and Caramel, our cat. I was born 53 years ago. Yep, I’m quite a dinosaur! I discovered computing programming at 16, in BASIC and ASM in the early 80’s on all sort of 8 bits microprocessor machines, Tandy Radio Shark TRS80 or Apple II during my studies, and a number of home computers, Commodore 64, Atari ST, etc… and many portable machines, TI59, Casio FX-702P and so on, until I got my first PC, a 386SX with a 256MB hard drive.
I logically started my career in IT as a programmer, on huge Pick System mainframes. I discovered JavaScript in 1998 with the debut of Internet Explorer 4 and a nonstandard DOM API that Microsoft was calling dynamic HTML at that time.
Musho: You once told me that you don’t consider yourself a web developer. How would you describe yourself?
Gerard: Online, I think what describes me the best is a creative coder. According to the Wikipedia definition, “Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional.” I rarely code useful or practical things and have a preference for surrealist and abstract design.
Musho: Would you ever call your code experiments art? Hint: you should.
Gerard: Louis Srygley said, “Without requirements or design, programming is the art of adding bugs to an empty text file.” The code can be used to create art, but design and aesthetics are the main requirements. Programming itself is just a tool, like a pen or a paintbrush, are tools and will not necessarily produce art.
On the other hand, writing code can be very similar to writing poetry or writing music. I feel; I think I hear and see; I write. I code.
Like poetry, code is constrained writing. You need to follow a bunch of rules and you are bound by many constraints. Not very different from writing in verse.
How to create art with code
Musho: If a developer is interested in creating code art, how should they get started? What are some tools and resources you would recommend?
Gerard: Open a https://codepen.io/ account. Follow some creative coders. Fork a pen you like, edit code, look at the result, repeat. One line of code at a time.
Musho: What advice would you give to someone just getting into code art?
Gerard: Best practices are your enemy. Don't follow any advice (including this one). Find your own way.
Musho: How long does it usually take to create one of your projects?
Gerard: It depends. I would say between 20 minutes and several years.
Musho: When is your experiment done?
Gerard: Without doing too much of code golfing, trying to achieve the shortest possible source code often at the expense of readability, I consider that I’m done with an experiment when I can’t maximize anymore the wow effect/code complexity ratio. It means that in my process, I remove as much code and functionalities as possible until I can't remove any more thing and I get the correct wow/complexity balance.
I have a backlog of several hundreds of unposted/unfinished demos accumulated over the years because of that rule. It happens frequently that I’m finally able to finish something that I started years ago because technology evolved or my coding skills improved.
Musho: Any code experiments you are playing with recently?
Gerard: I have a few:
- On CodePen, I tend to do interactive canvas and WebGL animations (WebGl is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins).
- Last year, I spent a lot of time playing with a context-free grammar language called CFDG. Understanding how these recursive rule calls, associated with affine transformations were actually working was really interesting. I adapted some of these pieces in JavaScript.
- And finally, I’m now spending my time playing with Turtle graphics, producing plottable SVG files.
I also bought an AxiDraw v3, which is a pen plotter capable of writing or drawing on flat surfaces, to better understand the mechanical constraints associated with the process.
From a programming standpoint, doing this kind of generative art is quite different from doing real-time canvas animations. On a screen, the polygons painting order on the z-axis is usually back-to-front. This is the so-called painter’s algorithm. WebGL also uses a Z-buffer (a technique in computer graphics programming that determines if an object is visible in a scene), but it’s still based on the painter’s algorithm, just more accurate, resolving depth conflicts on a pixel-by-pixel basis.
With a plotter, there is nothing like this. You can only draw lines, and you can’t erase or overlap existing lines already drawn with white polygons. The logic of drawing is, therefore, front-to-back, using polygon clipping/occlusion techniques like the Sutherland–Hodgman Algorithm.
Musho: This is a lot to soak in, Gerard. Thank you very much for sharing your tips and tricks and also for your inspiration. We're looking forward to your future code art!
Tweet us @hackerrank and let us know if you've experimented with code art!