<aside> 🥱 TLDR - Use alba.params.seed for all your randomness.

• Use alba.params.width to set the size of the canvas.
• Call alba.setMetadata(traits) to set metadata. - Call alba.setComplete(true) when you’re done rendering.

p5.js Boilerplate available here: https://editor.p5js.org/AlbaDotArt/sketches/oA8miXBPz

</aside>

Integrating with Alba

Integrating with Alba’s rendering stack is pretty simple. Alba automatically injects two scripts into your project:

• A small snippet which sets the data for seed and tokenId
• The Alba.js library which provides some functions for you to control rendering and metadata.

Alba.js injected script types:

This is the type definition for the Alba injected script. If you’re using TypeScript, you can drop this into your project. See below for an explanation of usage.

type Alba = typeof window & {
  alba: {
    params: {
      seed: string;
      tokenId: number;
      width?: number;
    };
    isComplete: () => boolean;
    setComplete: (a: boolean) => void;
    getMetadata: () => Record<string, any>;
    setMetadata: (a: Record<string, any>) => void;
    prng: (seed: string) => () => number;
    _testSeed: () => string;
  };
};

The Alba script is on-chain, but also hosted here for testing purposes. You should include it in your HTML file when developing:

https://www.alba.art/js/alba.min.js

<script src="<https://www.alba.art/js/alba.min.js>" crossorigin="anonymous"></script>

Resolution & Canvas

Output

The Alba renderer is designed to take the data from the first canvas element within the body of the page. Anything else output by your script will be ignored.

Resolution

The system is designed so that we can render your pieces at multiple resolutions. This allows us to generate appropriate previews and also generate high-res images for prints (if you enable them).

The Alba script will contain a width parameter, which you should use to set the width of the canvas you create. If you have a fixed aspect ratio, you should define it in terms of that width as well: