Loading...
Loading...
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.
npx skill4agent add skillcreatorai/ai-agent-skills algorithmic-art// Use seed for reproducible results
function setup() {
randomSeed(42);
noiseSeed(42);
}// Perlin noise for organic patterns
let x = noise(frameCount * 0.01) * width;
let y = noise(frameCount * 0.01 + 1000) * height;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();
});
}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();
}
}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);
}
}// Define palette
const palette = ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'];
// Random from palette
fill(random(palette));noLoop()save('art.png')blendMode(ADD)