Sr. Developer @easytechgreen

Week of the 29/03/2021 - #13



  • P5js
  • Twitter Generative Art Inspiration
  • Generative Art Framework?
  • Color for Generative Art


Inspired by this Twitter account created by Nina Lutz I decided to play a little with the P5js JavaScript library. I had been looking at some projects on Behance and came across this piece by Mario De Meyer.

Here are some of his process images from his Behance page:

Toroid 01 Toroid 02

As a basis to try and recreate something “similar” I needed to draw a toroid so started playing a little with p5js and got this:

Exploration 1 Exploration 2 Exploration 3 Exploration 4 Exploration 5 Exploration 6 Exploration 7

Source code:

Source code

Source code version here , here and here. What I’m doing is following the equation of a toroid in polar angles theta and phi. I choose the angles by doing arithmetic mod two prime numbers so that they don’t fall into a cycle (constants n1 and n2) and I change the color every 30 points by using a scale of colors found in In the last iteration I’m combining two toroids but with an offset phi angle and each uses a different palette.

Ideas to explore 💡

I will probably follow up from stuff inspired by this Pinterest board I keep with Graphic and Geometric designs I love.

Twitter Generative Art inspiration

This Twitter thread had a lot of examples of art generated by the simplr formula (x ^ y) % 9. The oparation can be XOR or OR and the modulus can vary. Some interesting values are 5, 9, 17, 33. Based on an HTML / Javascript sample in the thread and my experiments with the previous palette here are some intersting samples:

Pattern doing XOR Pattern doing OR

The source code for both images is suuper simple. The first on is:

Source code for pattern XOR

The second one is just as simple but you need to change let p = x^y with let p = x|y and the palette I used has basically these 3 colors: #f8f9fa, #6c757d and #212529 wich are 3 shades of gray.

Another example for the BBC Micro that blew my mind is this baby:


Source code is suuuper simple:

 10 MODE 0
 20 VDU 5
 30 FOR x=0 TO 1279 STEP 2
 40 t=x/1279
 50 f=t*40
 60 f=f-INTf
 70 IF f>t MOVE x,0:DRAW x,1023
 80 NEXT
 90 GCOL 3,1
100 r=300
110 FOR y=0 TO r STEP 4
120 w=SQR(r*r-y*y)
130 MOVE 640-w,512+y
140 DRAW 640+w,512+y
150 MOVE 640-w,512-y-4
160 DRAW 640+w,512-y-4
170 NEXT
180 REPEAT UNTIL FALSE Generative Art Framework?

In the thread they algo mention which is a minature visualization platform with a lot if incredible patterns generated by one liners: Here’s one

Tixy land example

Color for Generative Art

For generative art color is very important. For my latest experiments I used these palettes:

Color Palette

The values for those colors are in this Gist.

Related to colors I found these two interesting articles:

  • 3 Levels of Generative Colors - This article lists 3 generative approaches to color and is a personal account of this author.
  • Palettes - 1999 - Great article by Inigo Quilez. He has two shaders 3hat use the technique described in the article:

Shader Toy 01 [Shader Toy src]

Shader Toy 02 [Shader Toy src]

Shader Toy 02 [Shader Toy src]