Algorithmic Art: Accelerated Art with GLSL

Earlier today we had our second meetup, a tutorial by Peter Marks on GLSL, the GL Shader Language.

His slides are here: https://goo.gl/hQPYBl

GL-What? And Why?

Sometimes our algorithmically generated art needs our computer to be fast and efficient .. because the calculations that need to be done are just so numerous or involved.

Luckily, most computers (including laptops) and even smartphones and tablets have special hardware dedicated to performing calculations to support sophisticated graphics. These Graphics Processing Units (GPU) are specialist at performing some kinds of calculations very fast and are really good at doing the same calculation many times in parallel. In contrast, the main processor in your computer, the Central Processing Unit (CPU), is a general purpose, it is good at many kinds of tasks, but not optimised for any specific task - a jack of all trades.

Recently, people have started to take advantage of GPU hardware to accelerate the calculations for other kinds of tasks .. such as machine learning for data science.

We can take advantage of that GPU hardware to accelerate calculations for creating art!

Even a low-end GPU, in cheaper laptops or your smartphone, can perform over 1000 high precision calculations for every pixel in a HD display .. all this 60 times a second! There won't be any stuttering if your art is animated at this refresh rate.

Traditionally, writing code for GPUs was ugly, painful, difficult, and error prone. Definitely not a friendly experience. Nowadays, we're lucky to have nicer languages that make coding for GPUs a little easier and friendlier.

The GL Shader Language, or GLSL, was created specifically to make coding for GPUs easier, and is part of the very widely supported open standard OpenGL, and webGL, which means it will work on a modern web browser. How convenient is that!

Tutorial Intro

Peter gently introduced us to basics such as pixels, and how colours are made by combining red, green and blue light in this elements. He also covered ideas like the basic data types used by GLSL such as floats (numbers with decimal points), ints (whole numbers) and various sizes of vectors.

Peter explained GLSL by building up from a very simple skeleton program:

In this example, we are writing a function which is called upon to define the colour of every pixel in our picture. In the simple starting function, we simply set the colour to a value built from red, green and blue components. The above example shows a deep purple which is (0.2, 0.0, 0.4). No matter which pixel is being rendered, our simple code always sets the very same colour .. that's why. the whole picture is the same colour.

To make more interesting images, we need to have pixels that are coloured differently. And there are many ways of doing that ..

Here's my simple example which simply chooses a shade between two colours based on the vertical location of a pixel.

Kinda like the California sunset vibe!

Maths Decides Pixels

Peter's approach to deciding what colour a pixel should have is to use simple maths functions. He explained how simple functions like sine and cosine behave .. there's more here if you need a refresher.

It is really nice that this sine function sinuously moves up and down in a natural smooth way, not like a zig-zag or a square jitter! That will help us change pixel colours in a smooth way.

Because animation depends on time, we need to vary pixel colours based on time. Luckily, GLSL gives us access to the time so we can use it in calculations easily.

Changing Forms

That's all that's needed to create some interested animated smoothly changing images.

Peter focussed on a plasma like animation to illustrate and explain the key concepts, but we were free to experiment and make whatever we could.

In summary, we could create animated images by defining a function which decides the colour of a pixel based on its location the time:

Making a moving plasma with #GLSL at @algorithmic_art #generativeart pic.twitter.com/maEB9KpuzC
— Tariq Rashid (@postenterprise) 24 April 2017

Here is my own attempt:

.@algorithmic_art My attempt... :) pic.twitter.com/Y07OTh3Llg
— Tariq Rashid (@postenterprise) 24 April 2017

Gallery

Peter provided a website on which we worked, and which allowed URLs to be shared. Here are some that were posted on the meetup page's comments. The descriptions here are my own, not of the original designers.