Docs

What is Public Works?

How does it work?

How to create a work

File Structure API

• index.html
• js/
  • app.js
• styles/
  • style.css
• img/
  • img1.png
  • img2.png

Webpack Template

Basic HTML/Javascript Template

Demo p5.js work

Javascript API

Lifecyle & Environment

1. On the publicworks.art preview pipeline: isPWPreview() will return true. In this case, your work must render the preview image and then call setPreviewReady(). Interaction is discouraged in the preview pipeline. Public Works will capture an image by using the CSS selector to locate your canvas and toDataURL() to extract the image data. We currently only support this capture style at this time.
2. When displayed on publicworks.art isPW() will return true. But isPWPreview() will return false. You may want to enable interaction or animations here since an end user is looking at your work. Keep in mind, isPW() returns false when viewed on external sites such as stargaze.zone.

Concepts

Reproducible Works

• Never use Math.random(). Instead use the provided createPrng() or your own random function based on the hash.
• Never use the system time. If you need to use time in your sketch, use the difference of the sketch start time to current time.
• Avoid deriving a random number in your loop invariant:

for (let i = 0; i < prng.randomInt(5,10); i++) {
   // ...
}

const end = prng.randomInt(5,10);
for (let i = 0; i < end; i++) {
   // ...   
}

Attributes

let prng = createPrng()
let traits = {
	Edges: prng.randomInt(3, 10),
	Density: prng.random()
}
let attributes = {
	Edges: traits.Edges,
	Density: traits .Density < 0.2 ? 'Low' : traits .Density < 0.8 ? 'High',
}
setProperties(attributes);

WebGL

renderer = new WebGLRenderer({preserveDrawingBuffer: true});

Quick Start

1. Use the web pack template to create your project or clone the p5 demo work.
2. Head over to https://testnet.publicworks.art/create to test your work
3. When everything looks good, create your work on Mainnet https://publicworks.art/create

Creating a Work Step by Step

1. Navigate to the test page and verify your work zip generates tokens with test hashes.
2. Navigate to the create work page.
3. Name your work. You can change this later.

3. Upload your work code zip archive by dropping it into the drop drop zone or clicking on the drop zone and opening the file in the file navigator.

4. Once successfully uploaded, the app will automatically load your work into the sandbox in the area above the upload dropbox.

   
5. The code sandbox is a very important step to verify if your project will work on public works at all. If it doesn't work here, it won't work when published. Try clicking on the New Hash button to test out a new mint hash. Your code should respond to each new hash in the sandbox. When everything looks good here, you're ready to publish! Click Next.
6. To publish, you need to describe your work. These descriptions will appear in various places on and off chain. Click Save before moving on the next step.

   
7. The On Chain Configuration step allows you to choose important and necessary values to deploy your generative collection on chain. Collection size must be greater than 1 and less than 10000. Start time must be in the future. Price in stars must be greater than 50. Royalty address and percent are up to you. Canvas selector is the CSS selector to your canvas element. This is based on how you have structured your HTML. You can find this in chrome Dev Console in the Elements tab by right clicking your canvas element and clicking copy selector. Image Preview Resolution is the dimensions of your rendered image. The format is <width>:<height>. It is recommend to have a resolution less than 5000 by 5000. We find that 4K resolution is a good option by setting the height to 2160 and width to your choosing based on your desired aspect ratio.

   
8. Save your configuration and click Next.
9. Upload your work cover image. This will appear on stargaze.zone. Click next when the displayed image looks correct.

   
10. On the Submit step, carefully verify your configuration is correct. A code sandbox also appears so you can verify test hashes one more time.
11. Once you're ready, click on Instantiate On Chain to deploy your collection on chain. You must pay 1000 stars to do so. These 1000 stars are part of the fair burn program. On testnet, get test stars in the faucet channel in the Stargaze discord.
12. You will see confetti and a Successfully instantiated! message when your contract is deployed.

    
13. Skip to the next step if this succeeded. If the instantiate failed, then the smart contract rejected your configuration. Try to fix any configuration problems and try again. The most common issue is start time is not in the future. Go back to the Configuration step and update the start time.
14. On the last step, Mint, you can find a link to stargaze to mint your work. Once minting begins, you can try testing out by minting directly on stargaze.

    
15. Click on View NFT after minting. Wait a few moments (up to 1 minute) for the preview pipeline to render the nft preview. The preview pipeline operates in two phases. After the first phase completes, you should see your NFT display on stargaze. But the traits will show Rendering in Progress. If nothing shows up after more than a minute, please contact skymagic on discord. After the second phase completes, your NFT is fully minted and the temporary trait Rendering in Progress will be replaced with your own NFT traits.
    • If your NFT never displays, or 'Rendering in Progress' trait never goes away, something failed in the preview pipeline. Contact skymagic on discord if so.
16. Congratulations. If you've made it this far, everything is working.
17. Follow these same steps on https://publicworks.art to deploy to Mainnet.

Fees