algorithmic-art

skillcreatorai's avatarfrom skillcreatorai

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.

⭐327stars🔀27forks📁View on GitHub🕐Updated Dec 26, 2025
[Visual Content Workflows]

When & Why to Use This Skill

This Claude skill enables the seamless creation of sophisticated algorithmic and generative art using the p5.js library. It specializes in transforming code into visual masterpieces by leveraging seeded randomness for reproducibility, Perlin noise for organic patterns, and complex systems like flow fields and recursive trees. It is a powerful tool for designers and developers looking to bridge the gap between programming and creative expression.

Use Cases

  • 1. Generative Design Assets: Creating unique, high-resolution textures, patterns, and backgrounds for web, print, and digital branding projects.
  • 2. Creative Coding Education: Teaching and demonstrating mathematical concepts such as recursion, vector physics, and noise functions through immediate visual feedback.
  • 3. Interactive Web Prototyping: Developing dynamic, canvas-based animations and interactive visual elements for modern user interfaces.
  • 4. Digital Art Exploration: Rapidly iterating on complex generative concepts like particle systems and flow fields to produce unique pieces of algorithmic art.
namealgorithmic-art
descriptionCreating 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.
sourceanthropics/skills
licenseApache-2.0

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