For Creators
Dynamic NFTs
Tutorials
Basic Example

Basic Dynamic NFT Example

This tutorial will guide you through creating a simple Dynamic NFT using P5.js. We'll create a generative art piece that demonstrates the core concepts of Dynamic NFTs.

Project Setup

First, create a new project with the following files:

basic-example/
├── index.html
├── p5.js
├── genify.js
└── sketch.js

The Code

1. HTML File

<!DOCTYPE html>
<html>
  <head>
    <script src="p5.js"></script>
    <script src="genify.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main></main>
  </body>
</html>

2. Sketch Code

let colors = [
  ["#FF6B6B", "#4ECDC4", "#45B7D1"], // Bright
  ["#2C3E50", "#E74C3C", "#ECF0F1"], // Dark
  ["#FFF3E0", "#FFB74D", "#FF9800"], // Warm
];
 
function setup() {
  createCanvas(1024, 1024);
 
  // Set random seed from genify
  let seed = ~~(genify.random() * 123456789);
  randomSeed(seed);
  noiseSeed(seed);
 
  // Only render once
  noLoop();
}
 
function draw() {
  // Pick color scheme
  let scheme = genify.choice(colors);
  let bgColor = scheme[0];
  let primaryColor = scheme[1];
  let accentColor = scheme[2];
 
  // Set background
  background(bgColor);
 
  // Create grid
  let gridSize = genify.randInt(3, 7);
  let cellSize = width / gridSize;
 
  // Draw shapes
  for (let x = 0; x < gridSize; x++) {
    for (let y = 0; y < gridSize; y++) {
      let posX = x * cellSize + cellSize / 2;
      let posY = y * cellSize + cellSize / 2;
 
      // Randomly choose shape type
      let shapeType = genify.random();
 
      push();
      translate(posX, posY);
      rotate(genify.random() * TWO_PI);
 
      if (shapeType < 0.5) {
        // Draw circle
        fill(primaryColor);
        circle(0, 0, cellSize * 0.8);
      } else {
        // Draw rectangle
        fill(accentColor);
        rectMode(CENTER);
        rect(0, 0, cellSize * 0.7, cellSize * 0.7);
      }
      pop();
    }
  }
 
  // Set artwork attributes
  genify.setFeatures({
    colorScheme:
      scheme === colors[0] ? "bright" : scheme === colors[1] ? "dark" : "warm",
    gridSize: gridSize.toString(),
    complexity: gridSize > 5 ? "high" : "low",
  });
 
  // Notify completion
  genify.renderDone();
}

Understanding the Code

Color Selection

We define three color schemes and randomly select one using genify.choice(). This ensures consistent color selection based on the hash.

Grid System

The grid size is randomly determined using genify.randInt(3, 7), creating variations in complexity.

Shape Generation

For each grid cell, we:

  1. Randomly choose between circles and rectangles
  2. Apply random rotation
  3. Use colors from the selected scheme

Notice how we use genify.random() instead of Math.random() throughout the code. This ensures deterministic generation based on the hash.

Attributes

The example sets three attributes:

  • colorScheme: "bright", "dark", or "warm"
  • gridSize: The number of cells in the grid
  • complexity: "high" or "low" based on grid size

Result Preview

Basic Example Result

Different hash inputs will create different variations while maintaining the same overall style.

Next Steps

  • Try modifying the color schemes
  • Add more shape types
  • Experiment with different grid patterns
  • Check out the Advanced Usage Guide for more complex techniques
Getting StartedAdvanced Usage