The fun way to learn coding: Generative Art

‘Intellectualism hurts’ a generative art piece by Tyler Hobbs

Technological advances over the past years have pushed the world of digital art forward by leaps and bounds. But its not something totally new, computer and digital art gained recognition during the 1950's as artists that pioneered the field started creating oscilloscope art. An oscilloscope was a device used by scientists to display and investigate the waveform of electric signals. Artists of the time embraced the instrument and started experimenting with various waveforms in the creation of their artwork.

After this, the electronics giant Sony devised and released the first model of a portable video camera, which later became a hit with aspiring artists. After years of experimentation we are still growing and changing as far as the digital art world is concerned. Generative Art is a subset of digital art.

A generative art example

Let us try to understand a bit more about Generative art.

Artists have always explored new media, and computer-based artists are no exception. Generative art, a technique where the artist creates print or onscreen images by using computer algorithms, finds the artistic intersection of programming, computer graphics, and individual expression. Generative art is an extension of central themes from 20th Century art, how so? Well,

• Fracturing of geometry in Analytical Cubism
• Emphasis on technology, machine aesthetic, and mechanized production from Futurism, Constructivism, and the Bauhaus
• Introduction of autonomy and chance in Dada, Surrealism, Abstract Expressionism
• Anti-figurative aesthetic, bold geometry, and intense color of Neoplasticism, Suprematism, Hard-edged Abstraction, and OpArt

Various kinds of Generative Art in print format

So, how can we learn how to code via generative art?

Coding without have a definitive project or end goal can become boring to grasp and usually, in our education system where learning is solely for marks students instead of having fun with code just learn the logic and produce the code asked for. Also, at an early age itself a stigma that coding is hard is inculcated in our minds which makes it even tougher for the student community to learn how to code properly. But with the rise of generative art, one can not only be an artist but also can learn a hard skill like coding.

Where and how can we start?

Personally, I started my generative art journey by following Daniel Shiffman(https://shiffman.net/ ) and his Youtube channel known as ‘The Coding Train’. I couldn’t find a better teacher to start off my journey with. Even if one does not have a background in coding or anything they can follow and understand it all easily. For starters we do not need to install any software or anything just visit this online editor, p5js and start off with your first artwork. I can tell you about the basics here itself. Here is the first look of the editor:

p5js editor

A ‘function’ in a programming language is a program fragment that ‘knows’ how to perform a defined task. The main functions in p5.js are setup() and draw(). The setup() function runs when the program starts. It is used to set the initial environment properties such as text-color, screen size, background-color and load the media file such as images and fonts.
The draw() function is called after setup() function. The draw() function is the where we perform rotation, transformation, colour for our art work.

CreateCanvas(x,y) simply creates the canvas and the parameters inside are for the width(x) and height(y) of the canvas. The function background() is for deciding the background colour. Let us take one step further and draw something?

We just added fill() and rect(). Let us try to understand both the functions, rect() creates a rectangle but what are those numbers inside? They specify positions and dimensions. What are those units? CM, KM? Not, really. They are pixels. Distances are measured in pixels here. Nearly all digital displays are broken up into tiny squares called pixels. Normally, each pixel is itself an actual, tiny, physical device that can display a color. The screen on our device right now likely has hundreds of thousands if not millions of these tiny devices. Each one is exactly the same size, and together they form a “grid.” In rect(159,150,65,85)

• parameter 1: the X position of the rectangle’s upper left-hand corner
• parameter 2: the Y position of the rectangle’s upper left-hand corner
• parameter 3: the rectangle’s width
• parameter 4: the rectangle’s height

p5.js lets us control not just the shapes that us draw but also two critical aspects of those shapes’ appearance: what color they are, and what color their outline is. We can set the color of a shape with the fill() function. We can change the color of the outline of the shapes using the stroke() command.

For now, this much background is enough I suppose to give the reader an idea as to what actually goes on behind the screen and that how easy and fun it could be as we learn more and more. So, go ahead and start your coding journey in a fun way!

Also, just remember that:

Even in the digital world!

Additional cool and fun places you’d like to explore:

1. Joshua Davis : A proper course which might help out!
2. A very short Youtube video displaying generative artworks!
3. Don’t forget about the coding train by Daniel Shiffman.
4. Restoring the void : Creating art through game/interaction!