Coding == Art
Creating art with code, how to become a creative coder
Designer vs. Developer? Does there have to be a difference between the two? Creative coding has existed since the early 1960s and has since exponentially grown in popularity. It’s a term we use to describe the computer programming software and people that make expressive art and design through code. In this post I’ll walk through a few types of generative, creative coding that I find interesting, as well as provide you with a few resources and inspiration on where to you can begin your creative coding journey.
Before I nose-dive into various sectors of creative coding, a little background about myself. I’m a rising fourth year at Pratt Institute in Brooklyn, NY where I’m studying graphic design. Most interested in digital design over print, I’ve experimented with a few tools that I mention later in the post. However, it wasn’t until my enrollment the summer in the Yale x Flatiron Full Stack Web Development class that I discovered the age-old designer vs. developer dichotomy is a facade for the harmonious intersection of the two fields through creative coding.
Code Poetry
Want to read this story later? Save it in Journal.
Code poetry is a combination of linguistic and computational literature, which produce code poems that come in many varieties, some, like the one you see above, are even able to run through executable binaries. However, not all code poems need to be interactive, some may be static. Instead of vocalizing text as human language poetry does, code poems give a voice to code, and is as valid a form of literary expression as any human language poetry.
Similarly to human langage, coding languages have their own syntax and semantics in which coders can develop their own style of communication. Code poetry encourages people to view coding as a creative act, which does two important things for the coding world. It first serves the coder, giving basis to their labor value and the creative act of coding, while simultaneously asking users to challenge the current ideologies in which the interfaces we use are built upon.
Sorting Algorithms
As their name implies, sorting algorithms are used to rearrange lists of elements according to a specific comparative operator. The amount of sorting options a user has are endless, but some frequently used sorting techniques are selection, bubble, insertion, merge, quick, or radix sort. Without diving too deep into the arithmetic and reasoning, simply put sorting algorithms are only important to us if they perform well, and performance is directly related to the product’s scalability. To test an algorithms complexity and performance analysis, programmers uses a process called asymptotic analysis which looks at the input size of the algorithm rather than its run time to determine performance capabilities.
You’re probably wondering how my tangent on sorting algorithms is going to relate to coding as art. It should be quite obvious, but sorting algorithms is a form of art. The computational beauty of running code is stunning, and programmers innovative code deserves to be showcased in ways that help visualize the algorithms process. Creative coders are finding ways to map textual algorithmic coding onto visual fields so that the algorithm processes real time as you see the image being sorted.
Creative coders have explored much of the visual vernacular of sorting algorithms with various pixel sorting time lapses. Some sorting visualizations even going as far as to add a translation of the algorithms speed and tonality into accompanying audio file
For more information about sorting algorithms, this website does an excellent job at both explaining the necessity of sorting algorithms and the basic sort actions a user can perform.
Processing, Spark AR, Cinema4D, Unity, and openFrameworks
Here are a list of tools and resources you may find helpful when deciding where to start creatively coding. All the tools listed yield very different experiences and results. Depending on what you are looking for I’ve provided a brief summary of what each of the program goals are and notes on external application integrations.
Processing, commonly written as p5.js, is a programming language promoting software literacy by providing a tool that makes learning how to code more accessible to visual artists. The language was started in 2001 by two MIT students in the Media Lab, and is basically Java with slight modifications for simplicity. It can be used alone or incorporated with Ruby using the gem ‘ruby-processing’.
Spark AR is a powerful augmented reality (AR) software that encourages creation at any level. Used mainly in conjunction with facebook and instagram, the studio platform allows users to create their own AR interactions that they can implement as users and share with their followers. The studio uses a visual programming language (VPL) to build its object logic, which helps accommodate a range of users. It supports JavaScript to enhance model logic and interactivity.
Cinema 4D is 3D software suite that allows designers to model and render 3D productions. Created with both novice and advanced users in mind, the intuitive workflow helps streamline integrations with Adobe After Effects, Illustrator, and CAD applications. Cinema 4D has scripting capabilities with C.O.F.F.E.E. and Python.
Unity is a game engine written in C++ and C# that gives users everything they need to create, operate, and monetize their interactive experiences. Alternatively to video games, Unity has a large community of developers making it an excellent tool for beginners and designing web plugins or desktop platforms. It integrates smoothly with Cinema 4D to help bring you 3D renderings to interactive life with essential C# gameplay scripts.
OpenFrameworks is a programming toolkit written in C++, built on top of OpenGL, with the intention of fostering intuitive, creative coding. Founded by Zach Lieberman in 2005, his main goal when creating this toolkit was to make code accessible to everyone.
Works That Highlight Creative Coding
Computed Curation is a physical photo book generated by a computer that forces its viewers to see the world through an algorithm, questioning the logic of each design choice. The algorithm parses through an open source archive of material, stringing together the image tags, captions, and makes decisions on which images to select and in what order based on neural networks of vectors and pixel composition.
Floating Forms is an online form consisting of basic fields that are used in most website interactions today (email and name text field, a comments text area, and a submit button). Manning uses a script to move the fields around, altering the overall functionality of the form while maintaining the input and submit functions of the individual fields.
Make Check Box Art by Jenn Schiffer is a JavaScript form I discovered on Glitch that allows you to create your own checkbox art (think pixel art but with checkbox forms).
Summer is an attempt at comparing and recreating the loading speeds of the internet in the late 90s to the practically instantaneous internet speeds of today. The webpage is displaying a full page gif, where Lilina spread the separate frames of the gif over different servers. When the gif tries to run each frame is calling a new server, causing a visual delay to the typical gif frame rate (15 fps). The display of the gif is dependent on the speed of the server request and response cycle, allowing the computer to influence movement.
Programming Posters are a collection of posters created by professor Tim Rodenbröker for his Generative Design students at Rhine-Waal University in Germany. Hoping to expand the concept of posters beyond static text on surfaces, Rodenbröker aims to portray the visual simulation of algorithmic graphic design.
Phase by Elias Hanzer is a generative type tool that allows you users to create their own variation of Phase using modular components. The tool allows you to add audio files that will be manipulated synchronously with the typeface depending on the user’s slider bar input. Once created, the typeface can be download and added to your computers font library.
Initiatives to Creative Coding
- Creative coding is about experimentation, not functionality. Not to say the two are mutually exclusive, but the expressive potential of coding is large reason why it is considered creative.
- Use available resources and APIs. Theres a plethora of free data to play and create projects with, use it to inspire wild information designs.
- Do your research before starting and have fun learning! If you’re lost on where to start, this may help.
I hope you enjoyed the post and thank you for taking the time to read!!
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.