Algorithmic Art

2. Design the Algorithm

• Choose core mathematical concepts (fractals, noise, recursion, symmetry)
• Define the parameter space
• Plan the color palette strategy

3. Implement in p5.js

Use this template structure:

// Algorithmic Art: [Title]
// Seed: [seed_value]

let seed;
let params = {
  // Define adjustable parameters
};

function setup() {
  createCanvas(800, 800);
  seed = params.seed || floor(random(999999));
  randomSeed(seed);
  noiseSeed(seed);

  // Setup code
}

function draw() {
  // Drawing code
}

// Parameter controls
function keyPressed() {
  if (key === 's') saveCanvas('artwork', 'png');
  if (key === 'r') { seed = floor(random(999999)); redraw(); }
}

4. Add Interactivity

• Keyboard controls for saving and regenerating
• Mouse interaction for parameter adjustment
• Real-time parameter display

Techniques

Noise-Based Patterns

for (let x = 0; x < width; x += step) {
  for (let y = 0; y < height; y += step) {
    let n = noise(x * scale, y * scale);
    // Use noise value for color, size, or position
  }
}

Recursive Structures

function branch(len, depth) {
  if (depth <= 0) return;
  line(0, 0, 0, -len);
  translate(0, -len);

  push();
  rotate(angle);
  branch(len * 0.7, depth - 1);
  pop();

  push();
  rotate(-angle);
  branch(len * 0.7, depth - 1);
  pop();
}

Particle Systems

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D();
    this.acc = createVector();
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  applyForce(force) {
    this.acc.add(force);
  }
}

Color Strategies

Complementary Palettes

function complementaryPalette(baseHue) {
  colorMode(HSB, 360, 100, 100);
  return [
    color(baseHue, 80, 90),
    color((baseHue + 180) % 360, 80, 90),
    color((baseHue + 30) % 360, 60, 95),
    color((baseHue + 210) % 360, 60, 95)
  ];
}

Gradient Interpolation

function gradientColor(t, colors) {
  let idx = floor(t * (colors.length - 1));
  let frac = (t * (colors.length - 1)) % 1;
  return lerpColor(colors[idx], colors[min(idx + 1, colors.length - 1)], frac);
}

Output

Always provide:

1. Complete, runnable p5.js code
2. The seed value used
3. Description of the algorithm's concept
4. Instructions for parameter adjustment
5. Suggestions for variations

Example Styles

• Flow Fields: Particles following noise-based vector fields
• Fractals: Self-similar recursive patterns
• Cellular Automata: Grid-based emergent patterns
• Voronoi: Point-based tessellation
• L-Systems: Grammar-based growth patterns
• Attractor Systems: Chaotic mathematical attractors