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.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
skills listSkill Instructions
name: algorithmic-art description: 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. source: anthropics/skills license: Apache-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 withsave('art.png') - Experiment with blend modes:
blendMode(ADD) - Layer transparency for depth
- Use frameCount for animation
More by skillcreatorai
View allCreate, update, and manage Jira issues from natural language. Use when the user wants to log bugs, create tickets, update issue status, or manage their Jira backlog.
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for creating new documents, modifying content, working with tracked changes, or adding comments.
Backend API design, database architecture, microservices patterns, and test-driven development. Use for designing APIs, database schemas, or backend system architecture.