A quick overview on concept - I’ll try to keep it short :)

WARNING Spoiler alert!

If you want to enjoy this piece for simply what it is with your own interpretation skip to the technicals below (it’s more fun - trust me).

One of the most satisfying aspects about any project is attempting to make it layered. Not just visual layers but concepts / formats. I think this comes from my love of films, probably my favorite art style. For a film to be really good it absolutely needs layers: Strong narrative, philosophical ideas, stunning visuals, cultural links etc. Bringing all these together creates a believable and interesting mini world. I try to take this angle of approach with any project, including “The spectrum of nature”.

Okay bear with me… I know it’s a little pretentious, but it’s satisfying if a project can have a philosophical core. “The spectrum of nature” started with an idea that’s always fascinated me: the line between humans and nature. Culturally, by default, we feel a huge divide between us and nature, and there certainly is. We’ve definitely done a lot to escape the disorder of nature. But at the same time civilization is still just a jumbled mess that moves like nature. We’re just an extended version of it, but slightly more organized. And everything we create is just atoms from nature rearranged (exactly what nature does itself).

Of course it’s most likely just a trick of words to see a deeper meaning here. By that I mean, to say “nature” and mean everything except humans, is a way to quickly make it understood whether you are talking about things that are made by humans or not. But it feels like there is a philosophical idea there. Where is the edge of the natural world and where does human life begin? Add into this our physical dependence on nature and our obsession with its power, it’s certainly a fun idea to let the brain fight over.

Yes, I could talk about this all day, but let’s leave it at that for now to avoid too much pretentiousness, and move onto the fun stuff.

The technicals! I’ll try to keep this light and interesting for non-coders.

One of the main defining technical decisions of this piece was to use WebGL, rather than javascripts normal drawing abilities. WebGL is designed for displaying 3D objects in a 3D space, but for all my projects I draw everything flat for a hand drawn comic / animated film look.

My first gen art project with @nathansonic, AutoJourneyPaint, was made in p5.js, a drawing library. However for drawing complex visuals, with many layered entities this had a huge bottle neck. For complex shapes, each pixel had to be filled individually, meaning lot’s of loops using the CPU (the processor). For something like “The spectrum of nature” where there are thousands of overlapping plants this would be slow!

After some research into WebGL I realized that WebGL uses triangles for the drawing info, which is then sent to the graphics card, and it’s the graphics card that then handles changing triangles into all those pixels. This is a much faster method as the graphics card can process all those pixels at the same time, rather than one at a time like the CPU in javascript.

More optimisation research told me that the bottle necks are almost always down to the CPU, so should be avoided for efficient programs. At this point I rebuilt everything to use WebGL. This was a game changer for the amount of detail I could add to a scene. The user experience is very important for me, so I wanted it to be detailed while still being very fast loading.

Below is an image visualizing this concept. Imagine a weird shaped rectangle of roughly 100x200 pixels. To fill that shape with javascript pixel drawing would require 100x200 loops, each placing a pixel. That’s a lot of loops. However to make the same shape WebGL requires you to send it just 6 vertices (a vertice is just the point at the corner of a triangle), one for each corner of 2 triangles. As a square is just 2 triangles together. That cuts javascript CPU work down from 20k pixel placements to just 6 vert placements. Pretty banging.

But WebGL came to the rescue again! I wanted the whole scene to have pixel depth texture and detail, but triangles are just flat colour (see below). After a lot of experimenting and learning shaders (a shader is the program that converts the triangles into pixels) I was able to get the graphics card to add texture and lines to the entire scene for free. By free I mean that the graphics card is so good at this that it barely made a dent in performance.

Let’s look at some of the stages for this WebGL method, starting with the basic triangles as they are sent to the shader. Looks a little like it’s done in windows 95 paint! Sometimes there are a lot of triangles used to make the shapes, so it’s not so obvious that they are triangles. On the left you can see a diamond, that’s just 2 triangles. However, the fern at the bottom may have hundreds to create a smooth wave.

The image above is obviously a little basic looking, elements of the same colours overlap and details are hard to make out. So the next stage is to draw an outline around everything. The outlines change in thickness and get nudged about slightly to mimic a hand drawn style. I realized this had to be super subtle, too much and it became messy due to the already huge number of things going on in the scene.

Below is with the outline added. This looks much better! We can now really see all the elements in detail. And it’s quite nice with the flat colours, almost milky smooth. You’ll notice there is no outline on far off background elements (yellow arrow). This is to draw attention to the foreground, a trick I learnt from the great animation films!

I was actually pretty happy with this, but as one of my original goals was to make some gen art that could be considered a still frame from one of my fave animation films, I decided to press on with the detail. The next stage was to add some realism with shading and lighting. Luckily I’d already set up a custom colouring function that I could easily add another function inside to calculate shadows across the multiple triangles of each element. Sorry, what a mouthful.

Some of this shadowing also goes through a noise function. Below is with the shadowing turned on. You’ll notice the scene is much darker. This is because later this is altered by the graphics card, i.e. shader code, in WebGL.

On the left the arrow shows an example of the shadow function. It takes two positions (bottom of the wall to top of the wall), and casts a shadow from fully dark to light across that region.

Okay this is looking pretty good now! But why stop there!

Next is where the real magic happens. In the image above the shader program (the bit that takes triangles and turns them into pixels), was just showing what javascript was giving it. Below is with the pixels going through the custom texture creators that I made. Notice the lines in the sky and on the bricks that suddenly appear. That is all the shader creating that. And that detail runs down to the pixel.

The great thing about doing this in the shader is that when the render is scaled up (by pressing the 2-9 keys), the textures are remade at that size, and all the detail is filled in again right down to the pixel!

Shader extras - 2 tones (Forced palette) - 30% occurrence.

One of the features of the project is 2 or 3 tone palettes. Here the shader code forces the colours between a set of values. Again this works much better in the shader because the decision for which tone is per each pixel. To do this in the javascript code would mean the colour was decided per corner of each triangle and would create gradients of colour. But doing it per pixel means that any gradient of colour gets turned into a hard edge. Much more pleasing for the style! I’ve circled a few examples below.

Shader extras - Accelerated gamma - 25% occurrence.

Another feature in the project is a shader function that flips out the colour hues and saturation. It gives a strange kind of vibrancy to the image. Circled below are some off the more obvious examples, though it’s quite obvious everywhere in the image.

Fun trivia!

Below is an unfinished game I made in 2015. See the twitter handle @MarkLudgate1 (my old twitter account), to see more of this. I designed and hand-drew all the artwork here (and did the coding on unity) and it’s funny to look back and see that my general style and concepts are still very similar. I guess I really love the idea of adventure / adventurous worlds, and find the idea nostalgic from watching classic adventure films when younger.

Ending stuff…

There’s obviously a lot I’ve left out here, as some of it’s not as visually fun as the above. But some fun “math” details for those that are interested, all cube shapes use 2 point perspective, so change depending where they are in the image, and the tree branches use bezier curves so that they are rounded. Then there’s the ferns and leaves using sine waves etc, but maybe all that is for another article.

Thanks so much for reading. Mega appreciate your time to check out my project!

P.s…

I really appreciate anyone that buys my work to enjoy or even as an investment (to sell higher). I personally believe that I have a responsibility to you to keep the value of the piece high so you can sell at a price higher than you bought if desired. For that reason I am taking the growth of my art seriously, am already planning great future projects that will add value to previous ones, and am working hard to organically grow a following.

If you mint a piece of my work and then for some reason decide you’d like the money back, DM me on twitter, and we can try and work something out.

Thanks again!

All royalties from this fx(text) donated.