This is a library for creating abstract pixel art with code by utilizing randomized alghorithms --- pictures would be different each time they are generated.
I made this for illustrating my novel, for a demo of what it can do, see the illustrations I made for it (may take some time to load them all).
This is not intended for public use, mainly publishing it in case someone is interested in looking at the code and making their own version of this.
The basic syntax for creating a picture is creating a canvas element with class art and filling it with splasher elements, each element representing a layer.
<canvas
class="art"
width=800
height=600
data-pixel="4"
data-repeat="2000"
data-colors="black,pink,grey"
>
<splasher
data-size="intensoReversed"
data-size-params="50"
data-map="diagonals"
data-params="1000"
>
</splasher>
</canvas>
<canvas
class="art"
width=800
height=600
data-pixel="4"
data-repeat="2000"
data-colors="black,pink,grey"
>
<!-- insert layers here -->
</canvas>
Parameters that are valid for the whole picture, specified as a data attributes to the canvas object:
Specify anything more than 1 for scalling the the size of the pixel in the picture.
If you want for the picture to be rerendered, specify the number of milliseconds you want this to happen.
A comma-separated list of colors that you want to use in the picture, can be overwritten on layer level.
A splasher is a layer that "splashes" pixels around the screen, according to a set of rules, specified by the parameters.
<splasher
data-map="diagonals"
data-params="1000"
data-size="intensoReversed"
data-size-params="50"
>
</splasher>
The type of the map function to use. The map function determines where to place squares on the screen usually in a non-deterministic fashion.
Params that go to the map function. Most map functions accept a single number as a parameter.
The type of the size function to use. The size functoon determines how big should each square be.
Params that go to the size function. Most size functions accept a single number as a parameter.
The map function determines where to place squares on the screen usually in a non-deterministic fashion.
Here are some map functions:
Splashes squares in a constant i.e. completely random fashion.
Same as constant, but the output is symmetric
Places more squares in the diagonals of the picture.
For more info, see maps.ts.
The size functoon determines how big should each square be. Here are some size functions.
Each square is the same size - the size is given as a parameter.
Squares are random size.
Squares are rendered, based on the intensity of the pixel, that is determined by the map.
For more info, see sizers.ts.
A plasher is a layer type that is like "splasher", the only difference is that the pixels aren't overlapping.