Contents
art
- P5js
- Twitter Generative Art Inspiration
- Tixy.land Generative Art Framework?
- Color for Generative Art
P5js
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:
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:
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 https://colors.co. 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:
The source code for both images is suuper simple. The first on is:
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
Tixy.land Generative Art Framework?
In the thread they algo mention https://tixy.land which is a minature visualization platform with a lot if incredible patterns generated by one liners: Here’s one
Color for Generative Art
For generative art color is very important. For my latest experiments I used these palettes:
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:
