Code Checker

PreviousGenerative Art NextPreparation for the Drop

Last updated 8 months ago

Was this helpful?

Code Checker

If you followed the , and you finished with your art, its time to test it. Your art should include everything that is needed to be deployed on KodaDot. To be sure that you did not miss anything, we created our KodaDot Code Checker to help you find any missing details in the code.

KodaDot's Code Checker

Open and prepare your zip file to be uploaded. once you upload it, wait a few moments. Your code validation will appear on the screen.

Code Validation

CanvasSize: if its dynamic, then its ok
Name of the collection: doublecheck if the collection name is right
Local p5js: testing if the p5js code is in the folder or its using it from the internet

There are other categories we are evaluating. Read below to understand what each category means and what to change in your code in case you are not fulfilling it.

1) Correct HTML name

An issue in this category means that the HTML should have a title tag, and the title should be different from kodaHash. Like this:

<!DOCTYPE html><html>
  <head>
    <title>artwork name goes here</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
    <script src="./p5.min.js"></script>
  
  </head>
  <body>
    <script src="./sketch.js"></script>
  </body>
</html>

2) Using Kodahash Render

function postMessageKoda() {
  console.log('Talking')
  const canvas = document.querySelector('canvas')
  const message = {
    id: Date.now(),
    type: 'kodahash/render/completed',
    payload: {
      hash: hash,
      type: 'image/png',
      image: canvas ? canvas.toDataURL('image/png') : null,
      search: location.search,
      attributes: [],
    },
  }
  console.log('Sending', message)

  window.parent.postMessage(message, '*')
}

3) Kodahash Render Called Once

Kodahash Render Called Once should be called only once, make sure that its not calling more than that.

4) Not Using External Resources

This check ensures that your artwork doesn't rely on external resources that might not be available when the NFT is rendered. All necessary files (such as images, scripts, or styles) should be included in your project folder. For example, instead of linking to an online p5.js library, you should include the p5.min.js file in your project. This ensures that your artwork will always render correctly, regardless of internet connectivity or the availability of external resources.

To pass this check: - Include all necessary JavaScript libraries in your project folder. - Use relative paths to reference local files instead of URLs to external resources. - Ensure all images, fonts, or other assets used in your artwork are included in the project folder.

5) Param Hash From Url For Rendering

Your artwork is expected to use hash url param. Like this:

const params = getURLParams()

  hash = params.hash || DEFAULT_HASH

6) Valid Image Sent to Kodahash Render

This check verifies that a valid image is being sent to the Kodahash render process. The image should be in a supported format (typically PNG) and should accurately represent your artwork.

To pass this check: - Ensure your code correctly captures the canvas content. - Convert the canvas content to a valid data URL. - Include this data URL in the postMessageKoda function.

Example code:

functi>postMessageKoda() {
  c>document.querySelector('canvas');
  c>canvas.toDataURL('image/png');
  
  const message = {
    // ... other message properties ...
    payload: {
      // ... other payload properties ...
      image: imageDataURL,
    },
  };
  
  window.parent.postMessage(message, '*');
}

7 ) Art Is Consistent

This check ensures that your artwork renders consistently across different instances. When using the same hash input, your artwork should produce the same output every time.

To pass this check: - Use a deterministic random number generator seeded with the hash. - Avoid using JavaScript's built-in Math.random() function. - Ensure all variable aspects of your artwork are controlled by the hash-seeded random number generator.

Example implementation:

let seed;

functi>setup() {
  seed = parseInt(hash, 16);
  randomSeed(seed);
  // Rest of your setup code
}

functi>draw() {
  // Use random() for all variable aspects of your artwork
  let randomColor = color(random(255), random(255), random(255));
  // Rest of your draw code
}

By implementing these features correctly, you can ensure your artwork passes these important checks in the KodaDot Code Checker, making it ready for deployment on the platform.

8) Automatic Sizing - Responsiveness

Failure means the art is not responsive to screen size changes. In order to fix need to use resizeCanvas like this:

function windowResized() {  canvasSize = min(windowWidth, windowHeight)

  resizeCanvas(canvasSize, canvasSize)
}

9) Variation loading time

The time between the start of render and message kodahash/render/completed is measured. As we mentioned in the documentation, art should be quick to improve the user experience. Loading time check could fail if:

Artwork is not rendered in the checker.
Takes too long to render, no clear way to fix that, the artist needs to find a way to cut down time.
Your art is animated or it is in infinite loop - which is acceptable

Question marks

You may get a question mark if when the item cannot be determined: For example, if the art doesn't use kodahash render, loading time and art consistency cannot be determined.

Performance and Capture service

Under the image, you can also find tests for Performance and Capture Service

Performance test: Time Per Variation. Select a number of outputs, and it will test the average time needed to create one variation.
Capture Service test is very important test (especially if you are using WebGL). It tests how the preview of the NFT will look like. It is also important if you have a loop or animated NFT to test this so you can see what the final previews of the NFTs will look like. If previews are not working, you need to adjust the code.

Export the NFTs

Under the picture, you should see an option to export art. You can select several art pieces you want to download (1x, 3x, 5x, 10x, 15x, 20x).

Use this option to export the maximum amount of NFTs - this will help you to see more variations at once, and you can assess if your art has enough variations. Keep in mind the size of your collection. The bigger the collection, the more variations it should have. So everyone can get their unique NFT!

PreviousGenerative Art NextPreparation for the Drop

Last updated 8 months ago

Was this helpful?

KodaDot's Code Checker

Open and prepare your zip file to be uploaded. once you upload it, wait a few moments. Your code validation will appear on the screen.

Code Validation

CanvasSize: if its dynamic, then its ok
Name of the collection: doublecheck if the collection name is right
Local p5js: testing if the p5js code is in the folder or its using it from the internet

There are other categories we are evaluating. Read below to understand what each category means and what to change in your code in case you are not fulfilling it.

1) Correct HTML name

An issue in this category means that the HTML should have a title tag, and the title should be different from kodaHash. Like this:

<!DOCTYPE html><html>
  <head>
    <title>artwork name goes here</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
    <script src="./p5.min.js"></script>
  
  </head>
  <body>
    <script src="./sketch.js"></script>
  </body>
</html>

2) Using Kodahash Render

Once the rendering of art is done, a message needs to be sent signaling the end of the render. This message is necessary for art to work properly on KodaDot. More details can be found in the . This message should look like this:

function postMessageKoda() {
  console.log('Talking')
  const canvas = document.querySelector('canvas')
  const message = {
    id: Date.now(),
    type: 'kodahash/render/completed',
    payload: {
      hash: hash,
      type: 'image/png',
      image: canvas ? canvas.toDataURL('image/png') : null,
      search: location.search,
      attributes: [],
    },
  }
  console.log('Sending', message)

  window.parent.postMessage(message, '*')
}

3) Kodahash Render Called Once

Kodahash Render Called Once should be called only once, make sure that its not calling more than that.

4) Not Using External Resources

5) Param Hash From Url For Rendering

Your artwork is expected to use hash url param. Like this:

const params = getURLParams()

  hash = params.hash || DEFAULT_HASH

6) Valid Image Sent to Kodahash Render

This check verifies that a valid image is being sent to the Kodahash render process. The image should be in a supported format (typically PNG) and should accurately represent your artwork.

To pass this check: - Ensure your code correctly captures the canvas content. - Convert the canvas content to a valid data URL. - Include this data URL in the postMessageKoda function.

Example code:

functi>postMessageKoda() {
  c>document.querySelector('canvas');
  c>canvas.toDataURL('image/png');
  
  const message = {
    // ... other message properties ...
    payload: {
      // ... other payload properties ...
      image: imageDataURL,
    },
  };
  
  window.parent.postMessage(message, '*');
}

7 ) Art Is Consistent

This check ensures that your artwork renders consistently across different instances. When using the same hash input, your artwork should produce the same output every time.

Example implementation:

let seed;

functi>setup() {
  seed = parseInt(hash, 16);
  randomSeed(seed);
  // Rest of your setup code
}

functi>draw() {
  // Use random() for all variable aspects of your artwork
  let randomColor = color(random(255), random(255), random(255));
  // Rest of your draw code
}

By implementing these features correctly, you can ensure your artwork passes these important checks in the KodaDot Code Checker, making it ready for deployment on the platform.

8) Automatic Sizing - Responsiveness

Failure means the art is not responsive to screen size changes. In order to fix need to use resizeCanvas like this:

function windowResized() {  canvasSize = min(windowWidth, windowHeight)

  resizeCanvas(canvasSize, canvasSize)
}

9) Variation loading time

Artwork is not rendered in the checker.
Takes too long to render, no clear way to fix that, the artist needs to find a way to cut down time.
Your art is animated or it is in infinite loop - which is acceptable

Question marks

You may get a question mark if when the item cannot be determined: For example, if the art doesn't use kodahash render, loading time and art consistency cannot be determined.

Performance and Capture service

Under the image, you can also find tests for Performance and Capture Service

Performance test: Time Per Variation. Select a number of outputs, and it will test the average time needed to create one variation.
Capture Service test is very important test (especially if you are using WebGL). It tests how the preview of the NFT will look like. It is also important if you have a loop or animated NFT to test this so you can see what the final previews of the NFTs will look like. If previews are not working, you need to adjust the code.

Export the NFTs

Under the picture, you should see an option to export art. You can select several art pieces you want to download (1x, 3x, 5x, 10x, 15x, 20x).

If you followed the , your code should pass all tests. This is our first version of code checker, so there may be something you need help with. In case you are having any issues, questions, or suggestions on how to improve our Code Checker, please connect with the team on or .