Publishing & Portfolio

Where to publish code-based art

Web platforms

Physical/installation

For gallery shows and public installations, always prepare:

• A standalone executable (Electron wrapper around your web sketch)
• A touch-screen kiosk mode (kiosk browser, hidden cursor, auto-restart)
• Documentation: resolution requirements, hardware spec, interaction notes

Preparing for fxhash (generative NFTs)

fxhash executes your sketch inside an iframe and passes a hash to your code. You use the hash as a seed to deterministically generate the artwork:

// fxhash boilerplate (provided by the platform)
let fxhash = window.fxhash || 'oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo';

function fxrand() {
  // Convert hash characters to floats deterministically
  // (actual implementation provided by fxhash's snippet)
  return Math.random();  // placeholder
}

// In your sketch, replace random() with fxrand():
function setup() {
  createCanvas(1000, 1000);
  noLoop();
  noiseSeed(hashToInt(fxhash));
  randomSeed(hashToInt(fxhash));
  generate();
}

function hashToInt(hash) {
  return parseInt(hash.slice(2, 10), 16);
}

fxhash’s full boilerplate includes $fx.rand() and feature reporting for traits:

// Report traits for collectors
$fx.features({
  "palette": paletteName,
  "density": numElements,
  "dominant colour": dominantHex
});

Print editions

For print, size matters. A5 at 300dpi = 1748 × 2480px. A3 at 300dpi = 3508 × 4961px.

const PRINT_W = 4960;  // ~A3 at 300dpi (square)
const PRINT_H = 4960;

function setup() {
  // Use pixelDensity(1) and a large canvas for print output
  pixelDensity(1);
  createCanvas(PRINT_W, PRINT_H);
  noLoop();
}

function draw() {
  generate(seed);
  // Export immediately
  saveCanvas(`print-${seed}-${PRINT_W}x${PRINT_H}`, 'png');
}

For SVG/vector output, use the p5.svg renderer (covered in article 5). SVG scales to any print resolution without quality loss.

Print services: Hahnemühle FineArt papers, Giclée printing services, Shutterstock Print, and local fine-art print shops all accept PNG/SVG files.

Exhibition tech rider

A tech rider tells the venue exactly what you need. Template:

TECHNICAL REQUIREMENTS — [Piece Title]

Display:
  - Screen: 27–32" monitor or TV, 1920×1080 minimum, 4K preferred
  - Orientation: Landscape / Portrait [specify]
  - Brightness: Full
  - No screen saver / power saving

Computer:
  - Modern laptop or NUC (macOS or Windows 10+)
  - GPU: dedicated preferred for sketch performance
  - Chrome/Firefox browser, latest version
  - Kiosk mode: browser fullscreen, no OS chrome visible

Interaction (if any):
  - Mouse / trackpad / touchscreen [specify]
  - USB MIDI controller [model if specific]
  - USB-A port required [if using Arduino/Touch Board]

Network:
  - Offline capable: YES / requires internet for [API name]
  - If internet required: stable WiFi or ethernet

Audio (if any):
  - Stereo speakers or headphones
  - Line out from laptop
  - Volume at [x%] of system

File delivery:
  - Browser-based: URL or ZIP file containing index.html
  - Self-contained: Electron app [provide .dmg / .exe]

Setup time: 30 minutes
Contact: [your email / phone]

Documentation practice

Good documentation preserves work that might otherwise be lost:

// Add metadata as a comment header to every sketch
/**
 * Piece Title
 * Created: 2025-03-15
 * Seed range: 0–9999
 * Dimensions: 1200 × 1200px
 * Edition: 1/1 | Open | Timed
 *
 * Description:
 * A flow field generated from two superposed noise fields.
 * The colour palette shifts based on the seed's parity.
 *
 * Parameters:
 * - density: 0.2–0.8 (controls curve count)
 * - palette: 'cool' | 'warm' | 'earth'
 *
 * Dependencies:
 * - p5.js 1.11.0
 */

Document the process with:

• Screen recordings of the sketch running
• Photos/video of physical output (prints, installations)
• Notes on interesting seeds and what makes them special
• A README with installation instructions

Portfolio structure

For a creative coding portfolio site:

• Index: curated selection, best works first
• Process: making-of videos, sketches, iterations
• Code: links to source (GitHub) — collectors and curators appreciate transparency
• Exhibitions: where work has been shown, any press
• Contact: for commissions and collaborations

Key takeaways

• fxhash requires deterministic generation from a hash seed; use $fx.rand() and $fx.features()
• Print output needs large canvas dimensions (4000px+ for A3 at 300dpi) and pixelDensity(1)
• Prepare an exhibition tech rider that specifies hardware, software, and setup requirements exactly
• Document code with metadata headers: date, seed range, parameters, dependencies
• A strong portfolio shows process, not just finished pieces — sketches and iterations matter
• SVG output is ideal for plotter art and large-format print; PNG for screen and digital editions