Comment on page
Generative series FAQs
If you receive this error when your folder includes an index.html file, it could be that the folder versus the actual assets are compressed. Be sure to zip/compress the assets themselves instead of the folder.

Our platform requires hl.token.setTraits() to be called as early as possible (either in the setup() or before that).
If your script is calling hl.token.setTraits() within draw(), the traits might not load properly within the viewing window.
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 1);
noLoop(); frameRate(60);
pixelDensity(2);
// Choose colors
backgroundColor = hl.randomElement(["#ffffff", "#000000"]);
color1 = color(hl.random(0, 360), 20, 100);
color2 = color(hl.random(0, 360), 20, 100);
color3 = color(hl.random(0, 360), 20, 100);
color4 = color(hl.random(0, 360), 20, 100);
chosenColors = [color1, color2, color3, color4];
// Set attributes
let attributes = {
"Background Color": backgroundColor,
"Hue 1": hue(color1).toFixed(2),
"Hue 2": hue(color2).toFixed(2),
"Hue 3": hue(color3).toFixed(2),
"Hue 4": hue(color4).toFixed(2), };
hl.token.setAttributes(attributes); }
We often see this when the script calls to the random() method from p5.js. Use random methods provided by hl-gen.js to keep the art consistent on each render.
Incorrect:
// Choose colors
backgroundColor = randomElement(["#ffffff", "#000000"]);
color1 = color(random(0, 360), 20, 100);
color2 = color(random(0, 360), 20, 100);
color3 = color(random(0, 360), 20, 100);
color4 = color(random(0, 360), 20, 100);
chosenColors = [color1, color2, color3, color4];
Correct:
// Choose colors
backgroundColor = hl.randomElement(["#ffffff", "#000000"]);
color1 = color(hl.random(0, 360), 20, 100);
color2 = color(hl.random(0, 360), 20, 100);
color3 = color(hl.random(0, 360), 20, 100);
color4 = color(hl.random(0, 360), 20, 100);
chosenColors = [color1, color2, color3, color4];
This would generate the same random output each time given the same transaction hash.
The "Live view" shows a portion of the output and not the full canvas.
We often see this happening when the canvas size is set to a fixed height and width. Canvas size should be dynamic to ensure the artwork responds to different window sizes.
Fixed canvas size:
(createCanvas(800, 800))
Dynamic canvas size:
createCanvas(windowWidth, windowHeight)
Why is the "Live view" different from the "Preview image"?
There could be a variety of reasons, some common culprits:
- 1.Ensure your preview image is set correctly under the "Preview images" tab. This will dictate the thumbnail on third-party platforms such as OpenSea. You can set this with the trigger on the tab or in your script via hl.token.capturePreview()
- 2.The preview image can look different from the live view if variables are fixed rather than based on the window size Fixed variable:
let x = (y - z * 50)
Dynamic variable:let wndwSize = windowWidth/5; let x = (y - z * wndwSize)
Unfortunately, no. The reason is that the server that renders the preview will sometimes be in a different time zone than the user, which can cause a mismatch between the token and the preview image.
The font called in the local browser might not be available in the remote browser (rendering engine). To fix this, include the font within the zip file and reference it within the HTML file.