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

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


Integrating with Alba

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

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:


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

Resolution & Canvas


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.


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: