Agent Skills: Algorithmic Art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

UncategorizedID: plurigrid/asi/algorithmic-art

Install this agent skill to your local

pnpm dlx add-skill https://github.com/plurigrid/asi/tree/HEAD/plugins/asi/skills/algorithmic-art

Skill Files

Browse the full folder contents for algorithmic-art.

Download Skill

Loading file tree…

plugins/asi/skills/algorithmic-art/SKILL.md

Skill Metadata

Name
algorithmic-art
Description
Creating algorithmic art using p5.js with seeded randomness and interactive

Algorithmic Art

Create generative art with code using p5.js, featuring seeded randomness for reproducibility.

Core Concepts

Seeded Randomness

// Use seed for reproducible results
function setup() {
  randomSeed(42);
  noiseSeed(42);
}

Noise Functions

// Perlin noise for organic patterns
let x = noise(frameCount * 0.01) * width;
let y = noise(frameCount * 0.01 + 1000) * height;

Common Patterns

Flow Fields

let cols, rows, scale = 20;
let particles = [];
let flowfield;

function setup() {
  createCanvas(800, 800);
  cols = floor(width / scale);
  rows = floor(height / scale);
  flowfield = new Array(cols * rows);

  for (let i = 0; i < 1000; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      let angle = noise(xoff, yoff) * TWO_PI * 2;
      let v = p5.Vector.fromAngle(angle);
      flowfield[x + y * cols] = v;
      xoff += 0.1;
    }
    yoff += 0.1;
  }

  particles.forEach(p => {
    p.follow(flowfield);
    p.update();
    p.show();
  });
}

Recursive Trees

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);

  if (len > 4) {
    push();
    rotate(PI / 6);
    branch(len * 0.67);
    pop();

    push();
    rotate(-PI / 6);
    branch(len * 0.67);
    pop();
  }
}

Particle Systems

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
  }

  follow(flowfield) {
    let x = floor(this.pos.x / scale);
    let y = floor(this.pos.y / scale);
    let force = flowfield[x + y * cols];
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  show() {
    stroke(255, 5);
    point(this.pos.x, this.pos.y);
  }
}

Color Palettes

// Define palette
const palette = ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'];

// Random from palette
fill(random(palette));

Best Practices

  • Use noLoop() for static pieces, save with save('art.png')
  • Experiment with blend modes: blendMode(ADD)
  • Layer transparency for depth
  • Use frameCount for animation

Scientific Skill Interleaving

This skill connects to the K-Dense-AI/claude-scientific-skills ecosystem:

Graph Theory

  • networkx [○] via bicomodule
    • Universal graph hub

Bibliography References

  • algorithms: 19 citations in bib.duckdb

Cat# Integration

This skill maps to Cat# = Comod(P) as a bicomodule in the equipment structure:

Trit: 0 (ERGODIC)
Home: Prof
Poly Op: ⊗
Kan Role: Adj
Color: #26D826

GF(3) Naturality

The skill participates in triads satisfying:

(-1) + (0) + (+1) ≡ 0 (mod 3)

This ensures compositional coherence in the Cat# equipment structure.