How to use it

In its current state this project is too complicated to use and it has a long way to go to before being useful for anybody, including me. But if you're curious here is how it works.

"Patina" runs inside the browser, so you need a HTML-file. Have a look at the minimalistic example in action.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Patina | the minimalistic example</title>
    </head>

    <body>
        <div id="js-patina-goes-here" style="width: 64px; height: 64px;" ></div>
    </body>

    <script>
    const target = document.getElementById('js-patina-goes-here');
    const pixelPaintingInstructions =
        `{ "patina" : {
            "type"          : "createPattern",
            "patternName"   : "noise_1D"
        }}`;
    import('./scripts/modules/mel_patina.js')
        .then((patina) => {
            new patina.default(target, pixelPaintingInstructions);
        });
    </script>
</html>

These three things are neccessary to create a Patina:

The JavaScript

For now, you have to download the package from GitHub and use the JavaScript files from within this folder: "scripts/modules".

root
├── scripts
│   ├── mel_patina.js
│   └── mel_the_other_files.js
└── patina.html

After importing mel_patina.js (see the minimalistic example above) into your website you can create a background image for a dom element.

The Dom Element

In the example, the dom element (div#js-patina-goes-here) is assigned to the variable "target". It needs to have a height and width. The JavaScript will create a background image for this dom element.

The Pixel Painting Instructions

The JSON string "pixelPaintingInstructions" defines how the Patina is being constructed. It is a binary tree, where the end nodes are images or patterns that are then combined, two at a time, to create the patina.

Next: Play with the Pixel Painting Instructions.

. . .