How to use it

This HowTo is outdated since i updated the way the JavaScript modules are getting loaded. I threw out require.js and now use native JavaScript modules that are supported by all the modern browsers.

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.

The minimalistic example

"Patina" runs inside the browser, so you need a HTML-file. Copy the following code and save it in your root folder as "minimalistic_example.html".

<!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>

Have a look at the minimalistic example in action.

The JavaScript

For the patina to work you need two JavaScript files. First download patina.js and save it in a folder called "scripts".
download patina.js

Within the "scripts"-folder create a subfolder named "vendor". Download the latest requireJs and save it under "scripts/vendor".
latest require.js

Your file structure should look something like this now.

WWW
├── scripts
│   ├── vendor
│   │   └── require.js
│   └── patina.js
└── patina_test.html

Explanation

Open patina_test.html in a text editor and include the following line at the bottom of your html-file. (data-main="scripts/patina" is the path to patina.js without the file extension)

<script data-main="scripts/patina" src="scripts/vendor/require.js"></script>

You also need a <div> or any other HTML-element that you want to decorate with patina.

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

Now you can call the patina-function and apply a randomly generated background image to your <div> like this:

<script>
    require(['patina'], function( patina ) {
        const target = document.getElementById('js-patina-goes-here');
        const pixelPaintingInstructions =
	    `{"patina" : {
                "type"          : "createPattern",
                "patternName"   : "noise_1D"
            } }`;
        new patina(target, pixelPaintingInstructions);
    });
</script>

Pixel Painting Instructions

The "pixelPaintingInstructions" in the example above is the data structure, that defines how the patina is being created. This is a very basic example and the Pixel Painting Instructions can get very unmanageable.

Next: How to create the Pixel Painting Instructions. . . .