Create Your First Sketch

This walkthrough creates a p5.js sketch from scratch using MCP tools. The same steps apply regardless of your client (Claude Desktop, Claude Code, VSCode, or desktop app).

Step 1: Create a workspace

Create a new workspace called "My First Workspace"

The create_workspace tool creates a .genart-workspace file that holds spatial layout for your sketches.

Step 2: Create a sketch

Create a p5.js sketch of concentric circles that pulse with noise

The create_sketch tool generates a .genart file with:

• A unique ID
• The p5.js renderer configuration
• Default canvas size (1200x1200)
• Your algorithm code
• A random seed

Step 3: Adjust parameters

Add a parameter called "ringCount" with range 5-30 and default 15

The set_parameters tool adds typed parameters that control your algorithm. Parameters are defined in the .genart file and passed to your algorithm via state.PARAMS.

Step 4: Set colors

Set colors to a dark background (#0A0A0A) and cyan rings (#22D3EE)

The set_colors tool defines a color palette available in your algorithm as state.COLORS.

Step 5: Explore variations

Try 5 different random seeds to find an interesting composition

The randomize_parameters tool generates random values within your parameter ranges. Use set_seed to lock in a seed you like.

Step 6: Capture and export

Take a screenshot and export as PNG

• capture_screenshot renders a high-resolution PNG
• export_sketch packages your sketch as a standalone HTML file, PNG, SVG, or ZIP

Step 7: Save

Save the sketch

The save_sketch tool writes the .genart file to disk.

The .genart file

Your sketch is stored as a single JSON file:

{
  "genart": "1.1",
  "id": "pulsing-circles",
  "title": "Pulsing Circles",
  "renderer": { "type": "p5", "version": "1.x" },
  "canvas": { "width": 1200, "height": 1200 },
  "parameters": [
    { "key": "ringCount", "type": "number", "min": 5, "max": 30, "default": 15 }
  ],
  "colors": [
    { "key": "background", "default": "#0A0A0A" },
    { "key": "rings", "default": "#22D3EE" }
  ],
  "state": { "seed": 42, "params": { "ringCount": 15 }, "colorPalette": ["#0A0A0A", "#22D3EE"] },
  "algorithm": "function sketch(p, state) { ... }"
}

Next steps

• Renderers — explore all 5 rendering engines
• MCP Tools — full tool reference
• Design Skills — composition and color theory guidance