Project Format

Structure of a developer project — sketch.js, metadata, components, and libraries.

A developer project is a directory containing source files that compile to a single .genart file.

Directory Structure

my-sketch/
  sketch.js          # Main algorithm (required)
  sketch.meta.json   # Metadata — title, renderer, parameters, colors (required)
  components/        # Local component files (optional)
  lib/               # Additional source files — bundled (optional)

sketch.js

The main algorithm file. The code format matches the .genart algorithm field — it varies by renderer:

p5.js:

function sketch(p, state) {
  p.setup = () => {
    p.createCanvas(state.canvas.width, state.canvas.height);
  };
  p.draw = () => {
    p.background(state.colorPalette[0]);
    // ... drawing code
    p.noLoop();
  };
  return { initializeSystem() {} };
}

sketch.meta.json

{
  "id": "my-sketch",
  "title": "My Sketch",
  "renderer": "p5",
  "canvas": { "preset": "square-1200" },
  "parameters": [
    { "key": "count", "label": "Count", "min": 1, "max": 100, "default": 20 }
  ],
  "colors": [
    { "key": "bg", "label": "Background", "default": "#1a1a1a" }
  ],
  "philosophy": "# My Sketch\n\nDesign notes here.",
  "skills": ["golden-ratio"]
}

Local Components

Files in components/ are available as imports within the algorithm. The compiler bundles them into the final .genart file.

Library Files

Files in lib/ are bundled into the algorithm. Use this for helper functions, data, or shared utilities.