Endless creativity with radom digital art.

The Natural Order.

So for a long time I have been fasscinated by what i call 'ordered randomness' within our natural surroundings. I look at plants and animal life and think of the repetition and to what I know now as the fractal and recursive nature of the building blocks of our world. From trees to cells and DNA patterns emerge and we all seem to want to replicate more organic forms within our game design and code to give the sense of normality and empathy. To immerse a user and a realistic world.

As a photographer when i look at both the macro and the larger world it can be seen. The branches of trees, the ridges in cacti, the spirals in suculents, our finger prints. all random but so very fasmiliar.

Some larger examples of it are procedural worlds like No Man’s Sky, generated textures such as in most games and dungeons like mine craft and my fasvourite game of all time Dwarf Fortress. But I think what people miss is the artistic beauty behind it and the creative expression it can have.

Only recently have I been able to properly comprehend and code some of the concepts that make up this structural beauty that im so fasscinated by. I guess that hint at the point that I by am no means an expert on this and most likely there are better ways of doing all of this. But it should give some inspiration.

A visual introduction

Example A - Random Fingerprints:

just to get our feet wet, here is a random pick from my exploration that i enjoyed working on. Not the most realistic but certainly a good example of how random numbers can be put to work.

Here a random line is placed with a bend with a LERP function with a random nudge to give some flavour to the prints lines. This happens twice, once for the background and once for the feature mark. The lines are then "stroked" to fill out the light dark banding, the feature mark at the front receving less bands that the background. This is all put through an eliptical mask.

Code

So the obvious here is as a programmer where do i start and whats best for me? More than likely your probably going to be integrating this into an existing project rather that starting fresh with this in mind but for web your most likely going to be looking at canvas elements and maybe a framework that helps a little. your also going to need a ton of geometric math so prepare for some recaps from your shool days!

When I first started I was coding everything from scratch, draw loops in canvas and geometric functions like the LERP function to find the percentage of a distance between two cartisian points. Recently i have discovered p5.js and that kickstarted my projects into overdrive and is a pleasure to work with... but we will get to that.

Canvas

I'm assuming you have some knowlege of canvas and javascript for this. in my first attempts this is where i started off, doing everything from scratch - and i recomend if your new to this kind of thing you do the same as it gets you going on the core concepts for later. The basic canvas setup you should recognise is

<canvas id="myCanvas"></canvas>

<script type="text/javascript"> 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

</script>

Random

And then to really start the concept we need some random thats where Math.random() comes in. The random funciton produces a value between 0 and 1.

<script type="text/javascript"> 

Console.log(Math.random());
Console.log(Math.random());
Console.log(Math.random());
Console.log(Math.random());
Console.log(Math.random());

</script>

Example B - Random as art

This in itself can be used to create some interesting first looks at the subject. Pop a quick interval timer on, a cute littile offset to the random and some graphics too and we have the below. Perhaps slime or the icing on the top of a cake, or waves coming into shore from above.

the interesting thing is as a human your eyes pick up on patterns in this image even though its just random - there is only limited order to this.

p5.js

p5.js is by fasr the biggest improvement i have made to my process of generating art with code. in just a few lines of code i have a well managed draw and setup funciton with a canvas ready to go. By all means you can code something yourself such as in example B but later you will find yourself needing many graphical and helper functions that are just too time consuming to organise and maintain especialy across projects.

p5.js setup

With just a few lines of code you can start your canvas project:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>

<script type="text/javascript"> 

function setup() {
	createCanvas(400, 400);
	}
function draw() {
	background(220);
	}

</script>

p5 Example functions

Im not going to go over all the functions there are plenty of tutorials out there but some good ones to mention to start you off are

translate(0,0);
push();
translate(width/2,height/2);
ellipse(0,0);
pop();
ellipse(0,0);

Example C - Recursive Tree (or bit of brocoli)

Eiser said than done on your first go round but pop all that with some if statements and some logic and your basicly setup to start going deeper

Steping out

As you saw in the first examples, the true art is working out what to randomise and what to structure. Herding random numbers into an ideal space even like in example B with the slight ofset, can bring us closer to replicating nature

Example D - Recursive tree with noise ...and lots more work

The main thing to think about when your creating something, like a tree, is that a tree is made up of thousands of variables. At the core is a recursive structure, branches, but after a set depth there is a leaf. Each branch tends to grow upright but along the path of its prececesor. In most trees a branch will split with one dominant and one subordinate branch. along the branches there are also random ofshoots. Some trees prioritise 3 pronged spit others two. Some conifers are esspcialy dense. On most trees leaves only apear at the end of the node strucutre and the more branches you have ofshooting the branch the larger the branch. You see!, it all comes down knowing your subject and how it actualy behaves. Obviously this is just an aproximation and rather than growing the tree im initialising it at it's final state.

The great thing about progrmming is you can change variables really easy. In this set there is arround 10 perameters. Some are tree specific some seem to be tree species specific.