The Case for: Creative Coding
By: Tirza Alberta
Tags: Ui Ux Design Company, Creative, Creative Coding, Aleph, Engineering

What is Creative Coding?

“Creative Coding” might sound foreign to you but it is a concept that has been around before most of us were born. Back in the 60s, a group of artists by the name of Compos 68, was one of the first pioneers that ventured into the realm of programming for expressive and/or artistic purposes. What started out as an art installation enjoyed by a group of art connoisseur, made it into the mainstream through audio visualisations (Winamp, anyone?). Since then, it has been the creation tool of choice for many coders, artists or those in-between alike.

What Might It Look Like?

Textual

A string of words might be the last thing one would associate with “artistic” or “expressive”. Although it may take 1000 words to conjure up a picture (baddums!), simplistic textual means have been proven effective in conveying said expression or artfulness.

One of my favourite textual coding pieces is “Own, Be Owned or Remain Invisible” by Heath Bunting. A strong commentary on who gets to own a domain, and thus a place on the interwebs. Bunting resorted to long-essay format to get his point across. Every word in the piece is clickable, but as we soon will see, not available to own.

Another great thing about this piece, or the fact that it is so simplistic-looking is that it is easy to recreate and/or create a personal take on. I did something similar for my daily journal, where additions of “.com” is done dynamically using Javascript as opposed to being hardcoded. Such an opportunity does not usually come with pieces that seem intimidating, or hard to create. That being said, if you would like to craft a creative coding that seems accessible to most people, textual pieces might be the way to go.

Fine Arts

Who knew lines of code could give birth to such beautiful pieces of work? While aesthetically pleasing websites are possible within the realm of coding, not many expect the same field to produce fine arts, especially one of similar nature to paintings and other traditional “fine artworks”. However, if you scroll through zach lieberman’s Instagram account, you would just as quickly see how fine arts and coding are in fact not at odds with each other. They, instead, make for an eclectic duo of what is traditionally considered two ends of a spectrum.

Internet of Things

Now that Lieberman and Bunting’s works have shown us what’s possible on screen, creative coding within the Internet of Things (IoT) will show us what is possible off-screen.

Candy Dispenser Bookmark

Back in college, I took a class on IoT and this is where I could take what I usually creatively code on-screen to off-screen (and into the tummy). I created a two-piece, copper foil coated bookmark that will dispense candy when both parts meet with each other. The idea was that you are to put one part on your final/goal page and another on your progress/reading page, which will move closer to the final/goal page over time. Once they meet, the microcomputer (Arduino) will nudge the cloud to dispense candy out of an Arduino-powered candy dispenser, into your tummy.

This way of implementing creative coding allows for tactile interaction that browser pieces cannot always provide. In my example, one interacts with the physicality of a book and eventually, gets rewarded with the sweetness of a piece of MnM’s. If you are looking to give your audience a different or more sensory experience of creative coding, IoT might be your best bet.

…And more

IKEA Place App

There are more examples of works and media that embody the artfulness and expression of creative coding. There are also more and more industries and fields that look into creative coding to elevate their website/apps’ UI/UX. An example of this would be IKEA’s Place App that lets you place a true-to-size IKEA furniture in any corner of your house using AR technology. Such creative take on “will it fit or will it not” problem that comes with furniture-shopping helps expand the definition of creative coding whilst still staying true to the artfulness and creative way of expression that the early creative coding definition entails.

All that being said,

Your imagination (and stack-overflow search results) is your limit.

Why Are We Looking Into This?

It’s cool, full stop.

Yes, but technically I cannot just say this so let’s move on to the next pointer…

Help us empathize with coworkers, especially developers and designers

If you are a designer coming into creative coding, you will be “forced” to put on a developer’s hat. The same goes to developers coming into the creative coding realm.

When both sides are put in a place where they have to understand how the other side’s brain works, what often happens is that — whether we like it or not — we empathize, or at least gain a better peek into why the other side does A and not B.

In a working place where designers and developers work closely together like Aleph, empathy between the two sides are more important than ever. We cannot read each other’s minds, but we can communicate and learn how each of us would perform the same task of expressing ourselves using codes–and that, what I think, is creative coding great at teaching.

…And eventually, foster better communication between devs and designers.

Whilst we would not magically be a master at communications over one creative coding project, a continual process of learning each side’s perspective, design and development, is what is going to give us a better chance at honing in on said communication skill. Do not give up just yet if you do not understand all of your developer friend’s work jargons or lingo! Give it a few more creative coding projects and you might surprise yourself!

How to Take the First Step(s)

Resource: Coding Train

Coding Train is the brainchild of Dan Shiffman, a faculty at NYU ITP and just a great tech communicator, in my very humble opinion. Shiffman has been educating the Youtubeverse for years and the variety of topics and programming languages he taught on his channel have only grown since day one. What started with Processing tutorials, have now grown into other frameworks/languages and topics, such as p5.js and machine learning.

Packed in a friendly and casual fashion, Dan Shiffman’s bite-sized coding tutorials are perfect for everyone, from novices to unicorn coders who just need a little help remembering the difference between ‘let’ and ‘const’. If you are not sure yet who to turn to for creative coding tutorials, Coding Train might just be up your alley.

Inspiration: Zach Lieberman and Giorgia Lupi

Now that you know where to start learning the lingos, you might need help in the inspiration department. Both Zach Lieberman and Giorgia Lupi are great inspirations in their own right. Whilst we are already familiar with what Lieberman’s are best-known for, Lupi’s work can be equalled to the analogue equivalent of Lieberman’s works. They are not exactly similar (mind you!), but Lupi’s works are a great inspiration for those who would love to delve into data processing but are not yet ready to do it digitally as Lieberman does. Lupi’s book, “Observe, Collect, Draw!” should be a part of starter packs of anyone who’s looking to dip their toes into creative coding. It encourages its readers to do exactly what the title says without being judgmental about themselves in the process. A great read for beginners, I would recommend it!

An audio visualisation I made using p5.js as a tool

Tools: p5.js, Processing, and more!

And now, you wonder, what should you wield to create a piece that is artfully and expressively communicating your emotions, feelings, and opinions? There are a number of tools out there which I am going to namedrop here for you to explore.

Processing

p5.js

Unity

Unreal Engine

Kinect

Arduino and Raspberry PI

However, one tool that stands out for me the most is p5.js. It is a javascript framework that lets you create creative coding artworks without having to install anything at editor.p5js.org. p5.js is also powered with multitudes of tutorials and examples on its website, https://p5js.org/, that you can go through for inspirational or tutorial purposes.

Your imagination (and stack-overflow search results) is your limit.

I said it again and I will stand by it. I hope I have made a convincing case for you to try out the limit of your imagination through creative coding. I shall now rest my case.