Overview
While experimenting with some ideas, i stumbled into the idea of "bitart".
"Bitart" can refer to various forms of digital art, but in my case, it was a "bitart" generated by mathematical function.
The initial idea was a krzysckh's bitart. I really liked the idea and decided to create my own vision of its implementation.
That's how Patrn was born.
How It Works?
So, we have a function, this function have 4 optional arguments refer to some values:
x: number— represents the horizontal coordinate of the current pixel being processedy: number— represents the vertical coordinate of the current pixel being processedw: number— represents the width of the canvash: number— represents the height of the canvas
Then it will calculate a color, represented in 0-255 range for every pixel based on provided mathematical formula for function, we can do any calculations in this function, for example, we can use sin, cos, random functions from Math object to create something cool.
Lets take something simple as an example, the formula (x * 255 / w) is a horizontal gradient.
(x * 255 / w)(x * 255 / w) is calculating a proportional value, based on the ratio of current pixel on x and canvas width in w, then scaling it up to a maximum of 255. It represents color in RGB color space, it's equal to white color. That creates a smooth gradient of number from black(0) to white(255).
Let's check more complicated example. It's a function, using a ternary operator (x + y) % 50 === 0 ? 120 : 35 — It's a vertical lines pattern. Let's break it down:
(x + y) % 50 === 0— This part checks if the sum ofxandyis divided to 50, leaving no remainder. In other words, it checks if the sum is divisible to 50.? 120 : 35— This is the ternary operator syntax. If the condition (x + y) % 50 === 0 is true, it returns 120, otherwise, it returns 35.
In current context, it will create a simple 45 degree line pattern.
(x + y) % 50 === 0 ? 120 : 35Examples
Some of the examples are already provided in Patrn gallery, so you can just open it and render/modify, here some of my favorite creations:
(((Math.floor(x / 30) % 2 === 0 ? Math.floor(x / 30) / 2 : Math.floor(x / 30 / 2) + 0.5) + Math.floor(y / 30)) % 2 === 0) ? 59 : 31((x % 50 === 0) || (y % 50 === 0)) ? 59 : 31(Math.sin(Math.sqrt((x - w / Math.random() / 500) ** 2 + (y - h / Math.random() / 500) ** 2) / 20 + Math.atan2(y - h / 2, x - w / 2) * 10) > 0) ? 59 : 31You can also check the collection with some of the patterns in the gallery.