majiayu000 Algorithmic Art
Overview
Create museum-quality generative art using computational techniques. This skill focuses on p5.js for browser-based creative coding with emphasis on seeded randomness, interactive parameters, and self-contained HTML artifacts.
Core Capabilities
- Generative Aesthetics: Develop unique visual philosophies expressed through code
- p5.js Integration: Create interactive sketches with parameter controls
- Seeded Randomness: Reproducible outputs for consistent artistic results
- Canvas Optimization: Performance-focused rendering for smooth animations
Quick Start
// Basic p5.js generative pattern
function setup() {
createCanvas(800, 800);
randomSeed(42); // Reproducible randomness
noLoop();
}
function draw() {
background(20);
for (let i = 0; i < 100; i++) {
let x = random(width);
let y = random(height);
let size = random(10, 50);
fill(random(255), random(255), random(255), 150);
ellipse(x, y, size);
}
}
Design Principles
- Seeded Randomness: Always use
randomSeed()for reproducible outputs - Parameter Controls: Expose key variables for interactive exploration
- Performance: Use
noLoop()for static pieces, optimize for animations - Self-Contained: Bundle as single HTML artifacts for easy sharing
Workflow
- Define aesthetic concept and visual philosophy
- Implement core algorithm with configurable parameters
- Add interactivity (mouse, keyboard, sliders)
- Optimize performance for target framerate
- Bundle as self-contained HTML artifact