Algorithmic Art

Create algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Build flow fields, particle systems, and generative visuals.

Generate algorithmic artwork with p5.js. Produce reproducible generative art through seeded randomness, explore parameter spaces, and build visual systems like flow fields and particle simulations.

p5jsgenerativeartcreative-coding

Version 1.3.0Updated Jan 15, 2026

Capabilities

Seeded randomness for reproducible outputs

Interactive parameter exploration

Flow field generation algorithms

Particle system simulations

Export to high-resolution images

Use cases

Generative art collections

Dynamic backgrounds and visuals

Data visualization art

NFT artwork creation

Interactive installations

Try it

Example prompts to use with this skill

Prompt

Create a flow field visualization with particles

Output

Here's a p5.js flow field with particles:

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

function setup() {
  createCanvas(800, 600);
  cols = floor(width / scale);
  rows = floor(height / scale);
  flowField = new Array(cols * rows);
  
  for (let i = 0; i < 500; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(0, 10);
  
  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();
  });
}

The result: particle trails following Perlin noise vectors.

Prompt

Generate a seeded random color palette

Output

Using seeded randomness for reproducible palettes:

function setup() {
  createCanvas(400, 100);
  randomSeed(42); // Change seed for different palettes
  noLoop();
}

function draw() {
  let palette = generatePalette(5);
  let w = width / palette.length;
  
  palette.forEach((c, i) => {
    fill(c);
    noStroke();
    rect(i * w, 0, w, height);
  });
}

function generatePalette(count) {
  let baseHue = random(360);
  return Array.from({length: count}, (_, i) => {
    let h = (baseHue + i * 30) % 360;
    let s = random(60, 90);
    let b = random(70, 100);
    return color(h, s, b);
  });
}

Seed 42 always produces the same palette—ideal for reproducible art.

Add to your AI assistant

Choose your AI assistant and run the command in your terminal

Gemini

curl -fsSL https://raw.githubusercontent.com/n3wth/newth-skills/main/skills/algorithmic-art.md -o ~/.gemini/skills/algorithmic-art.md

Copy

Claude

curl -fsSL https://raw.githubusercontent.com/n3wth/newth-skills/main/skills/algorithmic-art.md -o ~/.claude/skills/algorithmic-art.md

Copy

Cursor

curl -fsSL https://raw.githubusercontent.com/n3wth/newth-skills/main/skills/algorithmic-art.md -o ~/.cursor/skills/algorithmic-art.md

Copy

Windsurf

curl -fsSL https://raw.githubusercontent.com/n3wth/newth-skills/main/skills/algorithmic-art.md -o ~/.windsurf/skills/algorithmic-art.md

Copy

Copilot

curl -fsSL https://raw.githubusercontent.com/n3wth/newth-skills/main/skills/algorithmic-art.md -o ~/.copilot/skills/algorithmic-art.md

Copy

Discussions

Related skills

Canvas Design

Create visual art in PNG and PDF using design philosophy. Build posters, art pieces, and static visuals.

designartvisual

Slack GIF Creator

Create animated GIFs optimized for Slack with file-size constraints, validation tools, and animation concepts.

gifslackanimation