Comment on page
Generative series FAQs

For reference, please see here the Highlight Github repository.
I get the following error when uploading my zip file: "package is missing index.html file". 
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.
Why are my traits not loading?
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.
Snippet below from our example script, which can be found here:
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); }
Reloading the same transaction hash gives me a different output.
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)
I'm using timestamp in my project. Is there a way to update to the minter’s local timezone?
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.
Fonts in the "Live view" look different from 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.
​
Testing and deploying
Releasing generative art on Highlight with Cables.gl
Last modified 1mo ago