A while ago I saw an interesting pattern generated by a pure mathematical rule, which inspired me to implement a function to recreate the pattern with minimal syntax.
The beauty lies in its rule. Simple yet the results are appealing.
I've then found several other patterns but soon the limitation of grid size
32x32 bothered me.
Creating so many DOM elements to represent cells in the grid is also a bit slow.
Later one night, I came across another pattern from the book TAOCP Vol.4.
It uses a similar rule in a
I really wanted to draw this out myself, so I decided to look for other implementations.
I tried Canvas2D but using shader is much faster for large size grids. The only thing to deal with is to map each pixel to a defined grid cell.
In order to do explorations more quickly I added another function that uses shader programs as the bottom layer. Now the above code can be simplified as:
In shader programs, colors are in RGBA format. How to transform CSS color from all other formats into RGBA?
A color library might help
but I noticed that the built-in
getComputedStyle() function will always normalize
colors into RGBA format. Life is much easier this way.
grid property defines the grid dimension.
gap property yet.
fill property fills the grid cell with the given color value.
I didn't use
color because other properties may also need colors.
The third keyword is the
It accepts an expression that will be passed to the underneath shader program.
Combining with trigonometric functions.
I'm not satisfied with the syntax inside the
match selector, as you can see the value types in the shader program are being strictly defined.
Anyway this is a good start.
I'm happy and excited when the idea comes true.