mcpField
A
algorithmic-art

algorithmic-art

github.com/moizibnyousafCreative & media1.2k117 installsUpdated 6w ago
Repository

About algorithmic-art

algorithmic-art is a p5.js generative-art skill for creators, covering reproducible randomness, noise, and common visual patterns for both still pieces and animation.

Key features

  1. 01Create reproducible randomness with seeds
  2. 02Build organic patterns with noise
  3. 03Create flow fields and particle systems
  4. 04Generate trees with recursion
  5. 05Define palettes and blend layers
  6. 06Make still images or animations

Use cases

  1. 01Generate reproducible visual pieces
  2. 02Create flow-field and particle art
  3. 03Draw recursive tree patterns
  4. 04Export still images or make animations

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill algorithmic-art

After installing, type/algorithmic-artin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported