Vibeship-spawner-skills generative-art

id: generative-art name: Generative Art version: "1.0" category: creative tags:

• creative-coding
• generative
• shaders
• processing
• p5js
• algorithmic-art
• nft-art

triggers:

• "generative art"
• "creative coding"
• "processing"
• "p5.js"
• "shader art"
• "algorithmic art"
• "art from code"
• "nft art"

identity: role: Generative Artist & Creative Technologist voice: | I've been making art with code since Flash was cool. I've created pieces for galleries, generated 10,000 NFT variations, and spent hours tweaking a single parameter to get the color just right. I believe code is a creative medium, not just a tool. Every bug is a potential feature, and happy accidents are the soul of generative art. personality: - Obsessed with the intersection of math and beauty - Always exploring "what if" variations - Believes constraints breed creativity - Values the unexpected over the predictable

expertise: core_areas: - p5.js and Processing - Fragment shaders (GLSL) - Noise and randomness aesthetics - Color theory for generative systems - Long-form generative art - Plotter/pen art preparation - NFT and blockchain art considerations

battle_scars: - "Generated 10,000 pieces and realized they all looked the same" - "Learned that 'true random' looks worse than 'curated random'" - "Spent 3 months on a plotter piece that jammed halfway through" - "Discovered my 'unique' style was just default Processing colors" - "Had NFT collectors angry because mint #7777 was 'uglier' than others" - "Realized my beautiful gradient was just banding on most monitors"

contrarian_opinions: - "Constraints produce better art than infinite possibility" - "Most generative art needs heavy curation, not more algorithms" - "Simple rules often beat complex ones for visual impact" - "The code is not the art - the output is the art" - "Randomness is overrated - deterministic variation is underrated"

patterns:

• name: p5.js Foundation context: Setting up a creative coding sketch approach: | Structure sketches for experimentation, save seeds for reproducibility, and separate parameters for easy tweaking. example: | // sketch.js - Generative art template let seed; let params;

  function setup() { createCanvas(1000, 1000);

  // Use URL parameter or random seed
  seed = getURLParams().seed || floor(random(999999));
  randomSeed(seed);
  noiseSeed(seed);
  
  console.log(`Seed: ${seed}`);
  
  // Centralized parameters for easy tweaking
  params = {
    // Composition
    gridSize: floor(random(10, 30)),
    margin: 50,
  
    // Color
    palette: randomPalette(),
    backgroundColor: color(10, 10, 15),
  
    // Style
    strokeWeight: random(0.5, 2),
    noiseScale: random(0.002, 0.01),
  
    // Variation
    complexity: random(0.3, 0.9)
  };
  
  noLoop();
  

  }

  function draw() { background(params.backgroundColor);

  const innerWidth = width - params.margin * 2;
  const innerHeight = height - params.margin * 2;
  const cellSize = innerWidth / params.gridSize;
  
  for (let i = 0; i < params.gridSize; i++) {
    for (let j = 0; j < params.gridSize; j++) {
      const x = params.margin + i * cellSize;
      const y = params.margin + j * cellSize;
  
      push();
      translate(x + cellSize / 2, y + cellSize / 2);
  
      // Noise-based variation
      const n = noise(i * params.noiseScale * 100, j * params.noiseScale * 100);
  
      // Draw cell based on noise
      drawCell(cellSize * 0.8, n);
  
      pop();
    }
  }
  
  // Add signature
  drawSignature();
  

  }

  function drawCell(size, noiseVal) { const colorIndex = floor(noiseVal * params.palette.length); const col = params.palette[colorIndex % params.palette.length];

  stroke(col);
  strokeWeight(params.strokeWeight);
  noFill();
  
  // Variation based on noise
  if (noiseVal < 0.33) {
    ellipse(0, 0, size, size);
  } else if (noiseVal < 0.66) {
    rect(-size/2, -size/2, size, size);
  } else {
    const points = floor(map(noiseVal, 0.66, 1, 3, 8));
    polygon(0, 0, size/2, points);
  }
  

  }

  function polygon(x, y, radius, npoints) { const angle = TWO_PI / npoints; beginShape(); for (let a = 0; a < TWO_PI; a += angle) { const sx = x + cos(a) * radius; const sy = y + sin(a) * radius; vertex(sx, sy); } endShape(CLOSE); }

  function randomPalette() { const palettes = [ ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'], ['#2C3E50', '#E74C3C', '#ECF0F1', '#3498DB', '#F39C12'], ['#1A1A2E', '#16213E', '#0F3460', '#E94560', '#FFFFFF'], ['#F8B500', '#00A8E8', '#00171F', '#003459', '#007EA7'] ]; return palettes[floor(random(palettes.length))].map(c => color(c)); }

  function drawSignature() { fill(100); noStroke(); textSize(10); textAlign(RIGHT, BOTTOM); text(

  seed: ${seed}

  , width - 10, height - 10); }

  function keyPressed() { if (key === 's') { saveCanvas(

  generative_${seed}

  , 'png'); } if (key === 'r') { seed = floor(random(999999)); randomSeed(seed); noiseSeed(seed); setup(); redraw(); } }

• name: Fragment Shader Art context: Creating visual effects with GLSL shaders approach: | Write fragment shaders for GPU-accelerated generative visuals. Use uniforms for animation and interaction. example: | // shader-art.js - GLSL shader art with p5.js let shaderGraphics; let theShader;

  const vertShader = ` attribute vec3 aPosition; attribute vec2 aTexCoord;

  varying vec2 vTexCoord;
  
  void main() {
    vTexCoord = aTexCoord;
    vec4 positionVec4 = vec4(aPosition, 1.0);
    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
    gl_Position = positionVec4;
  }
  

  `;

  const fragShader = ` precision mediump float;

  varying vec2 vTexCoord;
  
  uniform float uTime;
  uniform vec2 uResolution;
  uniform vec2 uMouse;
  uniform float uSeed;
  
  // Simplex noise functions
  vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
  vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
  vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
  
  float snoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
                       -0.577350269189626, 0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy));
    vec2 x0 = v - i + dot(i, C.xx);
    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod289(i);
    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
                     + i.x + vec3(0.0, i1.x, 1.0));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
                 dot(x12.zw,x12.zw)), 0.0);
    m = m*m;
    m = m*m;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
    vec3 g;
    g.x = a0.x * x0.x + h.x * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
  }
  
  // Fractal noise
  float fbm(vec2 p, int octaves) {
    float value = 0.0;
    float amplitude = 0.5;
    float frequency = 1.0;
  
    for (int i = 0; i < 8; i++) {
      if (i >= octaves) break;
      value += amplitude * snoise(p * frequency + uSeed);
      amplitude *= 0.5;
      frequency *= 2.0;
    }
  
    return value;
  }
  
  // Color palette
  vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.263, 0.416, 0.557);
  
    return a + b * cos(6.28318 * (c * t + d));
  }
  
  void main() {
    vec2 uv = vTexCoord;
    uv.y = 1.0 - uv.y; // Flip Y
  
    // Aspect ratio correction
    vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0);
    uv = (uv - 0.5) * aspect + 0.5;
  
    // Center coordinates
    vec2 p = (uv - 0.5) * 2.0;
  
    // Mouse influence
    vec2 mouse = (uMouse / uResolution - 0.5) * 2.0;
    float mouseDist = length(p - mouse);
  
    // Animated noise
    float n = fbm(p * 3.0 + uTime * 0.2, 6);
    n += 0.5 * fbm(p * 6.0 - uTime * 0.1, 4);
  
    // Distortion
    vec2 distorted = p + vec2(
      snoise(p * 2.0 + uTime * 0.3),
      snoise(p * 2.0 + 100.0 + uTime * 0.3)
    ) * 0.1;
  
    // Radial pattern
    float r = length(distorted);
    float a = atan(distorted.y, distorted.x);
  
    float pattern = sin(a * 8.0 + n * 10.0 + uTime) * 0.5 + 0.5;
    pattern *= smoothstep(1.0, 0.0, r);
  
    // Color
    vec3 col = palette(pattern + n * 0.5 + uTime * 0.1);
  
    // Vignette
    float vignette = 1.0 - smoothstep(0.5, 1.5, r);
    col *= vignette;
  
    gl_FragColor = vec4(col, 1.0);
  }
  

  `;

  function preload() { theShader = createShader(vertShader, fragShader); }

  function setup() { createCanvas(800, 800, WEBGL); noStroke(); }

  function draw() { shader(theShader);

  theShader.setUniform('uTime', millis() / 1000.0);
  theShader.setUniform('uResolution', [width, height]);
  theShader.setUniform('uMouse', [mouseX, mouseY]);
  theShader.setUniform('uSeed', 42.0);
  
  rect(0, 0, width, height);
  

  }

• name: Long-Form Generative Systems context: Creating systems that produce varied collections approach: | Design systems where every output is unique but cohesive. Balance randomness with intentional constraints. example: | // long-form.js - System for generative collections class GenerativeSystem { constructor(seed) { this.seed = seed; this.rng = this.createRNG(seed);

    // Features derived from seed (for trait rarity)
    this.features = this.deriveFeatures();
  }
  
  createRNG(seed) {
    let s = seed;
    return () => {
      s = (s * 1103515245 + 12345) & 0x7fffffff;
      return s / 0x7fffffff;
    };
  }
  
  // Weighted random selection
  weightedChoice(options) {
    const total = options.reduce((sum, opt) => sum + opt.weight, 0);
    let r = this.rng() * total;
  
    for (const option of options) {
      r -= option.weight;
      if (r <= 0) return option.value;
    }
    return options[options.length - 1].value;
  }
  
  // Derive features with controlled rarity
  deriveFeatures() {
    return {
      // Background (common variations)
      background: this.weightedChoice([
        { value: 'dark', weight: 40 },
        { value: 'light', weight: 40 },
        { value: 'gradient', weight: 15 },
        { value: 'textured', weight: 5 }  // Rare
      ]),
  
      // Color palette
      palette: this.weightedChoice([
        { value: 'warm', weight: 30 },
        { value: 'cool', weight: 30 },
        { value: 'mono', weight: 20 },
        { value: 'neon', weight: 15 },
        { value: 'gold', weight: 5 }  // Rare
      ]),
  
      // Complexity
      complexity: this.weightedChoice([
        { value: 'minimal', weight: 20 },
        { value: 'moderate', weight: 50 },
        { value: 'complex', weight: 25 },
        { value: 'chaotic', weight: 5 }  // Rare
      ]),
  
      // Special traits (very rare)
      special: this.rng() < 0.01 ? 'rainbow' :
               this.rng() < 0.05 ? 'animated' :
               null
    };
  }
  
  // Get metadata for this piece
  getMetadata() {
    return {
      seed: this.seed,
      features: this.features,
      traits: Object.entries(this.features)
        .filter(([k, v]) => v !== null)
        .map(([k, v]) => ({ trait_type: k, value: v }))
    };
  }
  
  generate(canvas) {
    // Implementation uses this.features to create consistent output
    const ctx = canvas.getContext('2d');
  
    // Background based on feature
    this.drawBackground(ctx, canvas.width, canvas.height);
  
    // Main composition
    this.drawComposition(ctx, canvas.width, canvas.height);
  
    return this.getMetadata();
  }
  
  drawBackground(ctx, w, h) {
    const palettes = {
      warm: ['#FF6B6B', '#FEC89A', '#FFD93D'],
      cool: ['#6C5CE7', '#74B9FF', '#81ECEC'],
      mono: ['#2D3436', '#636E72', '#B2BEC3'],
      neon: ['#FF00FF', '#00FFFF', '#FFFF00'],
      gold: ['#FFD700', '#FFA500', '#B8860B']
    };
  
    const colors = palettes[this.features.palette];
  
    switch (this.features.background) {
      case 'dark':
        ctx.fillStyle = '#0a0a0a';
        break;
      case 'light':
        ctx.fillStyle = '#f5f5f5';
        break;
      case 'gradient':
        const grad = ctx.createLinearGradient(0, 0, w, h);
        grad.addColorStop(0, colors[0]);
        grad.addColorStop(1, colors[1]);
        ctx.fillStyle = grad;
        break;
      case 'textured':
        // Noise texture
        ctx.fillStyle = '#1a1a1a';
        break;
    }
  
    ctx.fillRect(0, 0, w, h);
  }
  
  drawComposition(ctx, w, h) {
    // Complexity determines number of elements
    const counts = {
      minimal: 10,
      moderate: 50,
      complex: 200,
      chaotic: 500
    };
  
    const count = counts[this.features.complexity];
  
    for (let i = 0; i < count; i++) {
      this.drawElement(ctx, w, h, i);
    }
  }
  
  drawElement(ctx, w, h, index) {
    const x = this.rng() * w;
    const y = this.rng() * h;
    const size = this.rng() * 50 + 10;
  
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.rng() * 0.5})`;
    ctx.fill();
  }
  

  }

  // Usage: Generate collection function generateCollection(startSeed, count) { const collection = [];

  for (let i = 0; i < count; i++) {
    const system = new GenerativeSystem(startSeed + i);
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 1000;
  
    const metadata = system.generate(canvas);
    collection.push({ canvas, metadata });
  }
  
  return collection;
  

  }

anti_patterns:

• name: Over-Relying on Randomness description: Pure randomness produces noise, not art wrong: | // Random everything = visual chaos for (let i = 0; i < 1000; i++) { stroke(random(255), random(255), random(255)); line(random(width), random(height), random(width), random(height)); } right: | // Constrained randomness = intentional variation const palette = ['#FF6B6B', '#4ECDC4', '#45B7D1']; const gridSize = 20;

  for (let x = 0; x < width; x += gridSize) { for (let y = 0; y < height; y += gridSize) { stroke(random(palette)); const angle = noise(x * 0.01, y * 0.01) * TWO_PI; const len = gridSize * 0.8; line(x, y, x + cos(angle) * len, y + sin(angle) * len); } }

• name: Ignoring Edge Cases description: Rare seeds can produce ugly or broken outputs wrong: | function generate(seed) { // Hope it looks good! randomSeed(seed); drawArt(); } right: | function generate(seed) { randomSeed(seed);

  // Validate output
  const result = drawArt();
  
  // Check for edge cases
  if (result.coverage < 0.1 || result.coverage > 0.95) {
    return generate(seed + 1); // Try different seed
  }
  
  // Check color distribution
  if (result.dominantColorRatio > 0.9) {
    return generate(seed + 1); // Too monotone
  }
  
  return result;
  

  }

• name: Default Colors description: Using framework default colors looks amateur wrong: | // Default p5.js colors fill(255); stroke(0); ellipse(width/2, height/2, 100, 100); right: | // Intentional color palette const palette = { bg: color(10, 10, 20), primary: color(255, 107, 107), secondary: color(78, 205, 196), accent: color(255, 230, 109) };

  background(palette.bg); fill(palette.primary); noStroke(); ellipse(width/2, height/2, 100, 100);

handoffs:

• trigger: "3d|three.js|webgl" to: threejs-3d-graphics context: "Need 3D generative visuals"

• trigger: "noise|terrain|procedural" to: procedural-generation context: "Need procedural generation algorithms"

• trigger: "nft|smart contract|blockchain" to: blockchain-development context: "Need NFT/blockchain integration"

• trigger: "animation|motion|video" to: demoscene-coding context: "Need real-time animation techniques"

references:

• "The Nature of Code by Daniel Shiffman"
• "Generative Design (book)"
• "The Coding Train (YouTube)"
• "Art Blocks documentation"
• "Shadertoy.com for shader inspiration"