HeadshotsExplorationAboutIndex

Themed Generative Art

Theme-Aware Generative Art

These artworks automatically adapt to your site’s color scheme and theme. They use your CSS variables to create cohesive visual experiences that change with light/dark mode.

Theme Color Palette

p.setup = function() {
  p.createCanvas(800, 120);
  p.noStroke();
}

p.draw = function() {
  p.background(p.theme.background);
  
  let colors = [
    p.theme.red, p.theme.orange, p.theme.yellow, p.theme.green,
    p.theme.cyan, p.theme.blue, p.theme.purple, p.theme.pink
  ];
  
  let rectWidth = p.width / colors.length;
  
  for(let i = 0; i < colors.length; i++) {
    p.fill(colors[i]);
    p.rect(i * rectWidth, 0, rectWidth, p.height);
    
    // Add a subtle pulse effect
    let pulse = 0.8 + 0.2 * p.sin(p.frameCount * 0.05 + i * 0.5);
    p.fill(colors[i]);
    p.rect(i * rectWidth, p.height * (1 - pulse), rectWidth, p.height * pulse);
  }
}

Your theme colors displayed as living swatches that pulse with gentle animation.

Themed Particles

let particles = [];

p.setup = function() {
  p.createCanvas(600, 300);
  
  for(let i = 0; i < 50; i++) {
    particles.push({
      x: p.random(p.width),
      y: p.random(p.height),
      vx: p.random(-2, 2),
      vy: p.random(-2, 2),
      colorName: p.random(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'pink'])
    });
  }
}

p.draw = function() {
  // Use theme background with transparency for trails
  p.fill(p.theme.background + '20'); // Add alpha
  p.noStroke();
  p.rect(0, 0, p.width, p.height);
  
  for(let particle of particles) {
    // Update position
    particle.x += particle.vx;
    particle.y += particle.vy;
    
    // Bounce off edges
    if(particle.x < 0 || particle.x > p.width) particle.vx *= -1;
    if(particle.y < 0 || particle.y > p.height) particle.vy *= -1;
    
    // Keep in bounds
    particle.x = p.constrain(particle.x, 0, p.width);
    particle.y = p.constrain(particle.y, 0, p.height);
    
    // Draw particle with theme color
    p.fill(p.theme[particle.colorName]);
    p.noStroke();
    p.ellipse(particle.x, particle.y, 8);
  }
}

Particles that dance using your site’s accent colors, creating a cohesive visual experience.

Typography-Inspired Waves

p.setup = function() {
  p.createCanvas(700, 200);
  p.noFill();
}

p.draw = function() {
  p.background(p.theme.background);
  
  // Header color wave
  p.stroke(p.theme.header);
  p.strokeWeight(4);
  p.beginShape();
  for(let x = 0; x <= p.width; x += 5) {
    let y = p.height/3 + 30 * p.sin(x * 0.01 + p.frameCount * 0.02);
    p.vertex(x, y);
  }
  p.endShape();
  
  // Accent color wave
  p.stroke(p.theme.accent);
  p.strokeWeight(3);
  p.beginShape();
  for(let x = 0; x <= p.width; x += 5) {
    let y = p.height/2 + 25 * p.sin(x * 0.008 + p.frameCount * 0.025 + p.PI/3);
    p.vertex(x, y);
  }
  p.endShape();
  
  // Foreground color wave
  p.stroke(p.theme.foreground);
  p.strokeWeight(2);
  p.beginShape();
  for(let x = 0; x <= p.width; x += 5) {
    let y = 2*p.height/3 + 20 * p.sin(x * 0.012 + p.frameCount * 0.03 + p.PI/2);
    p.vertex(x, y);
  }
  p.endShape();
}

Flowing waves that echo your typography colors, creating harmony between text and art.

Adaptive Geometric Pattern

p.setup = function() {
  p.createCanvas(500, 400);
  p.noFill();
}

p.draw = function() {
  p.background(p.theme.background);
  
  let time = p.frameCount * 0.01;
  
  for(let y = 40; y < p.height - 40; y += 40) {
    for(let x = 40; x < p.width - 40; x += 40) {
      let distance = p.dist(x, y, p.width/2, p.height/2);
      let wave = p.sin(distance * 0.02 + time);
      
      // Choose color based on position and wave
      let colorIndex = p.floor((wave + 1) * 4); // 0-7 range
      let colors = [p.theme.red, p.theme.orange, p.theme.yellow, p.theme.green, 
                   p.theme.cyan, p.theme.blue, p.theme.purple, p.theme.pink];
      
      p.stroke(colors[colorIndex % colors.length]);
      p.strokeWeight(2 + wave);
      
      let size = 20 + 15 * wave;
      p.ellipse(x, y, size);
    }
  }
}

A geometric mandala that pulses with your theme colors, adapting to your site’s aesthetic.

Themed Text Animation

let words = ["CREATE", "EXPLORE", "DISCOVER", "IMAGINE"];
let currentWord = 0;

p.setup = function() {
  p.createCanvas(600, 150);
  p.textAlign(p.CENTER, p.CENTER);
  p.textSize(48);
  p.textFont('Arial', 48);
}

p.draw = function() {
  p.background(p.theme.background);
  
  // Switch words every 120 frames (2 seconds at 60fps)
  if(p.frameCount % 120 === 0) {
    currentWord = (currentWord + 1) % words.length;
  }
  
  let word = words[currentWord];
  let colors = [p.theme.accent, p.theme.header, p.theme.blue, p.theme.purple];
  
  // Draw each letter with individual animation
  let letterSpacing = p.textWidth(word) / word.length;
  let startX = p.width/2 - p.textWidth(word)/2;
  
  for(let i = 0; i < word.length; i++) {
    let x = startX + i * letterSpacing + letterSpacing/2;
    let y = p.height/2 + 10 * p.sin(p.frameCount * 0.1 + i * 0.5);
    
    p.fill(colors[i % colors.length]);
    p.text(word[i], x, y);
  }
  
  // Add subtle background elements
  p.fill(p.theme.foreground + '10');
  p.noStroke();
  for(let i = 0; i < 20; i++) {
    let x = p.width * p.noise(i * 0.1, p.frameCount * 0.005);
    let y = p.height * p.noise(i * 0.1 + 100, p.frameCount * 0.003);
    p.ellipse(x, y, 4);
  }
}

Animated typography that cycles through inspirational words using your theme’s text colors.

Using Theme Colors

Access your CSS variables in any p5.js sketch:

p.setup = function() {
  p.createCanvas(400, 200);
  
  // Access individual colors
  console.log(p.theme.accent);     // Your accent color
  console.log(p.theme.background); // Background color
  console.log(p.theme.blue);       // Theme blue
  
  // Or get any CSS variable directly
  let customColor = p.getCSSVariable('--my-custom-color');
}

p.draw = function() {
  p.background(p.theme.background);
  p.fill(p.theme.accent);
  p.ellipse(p.width/2, p.height/2, 100);
}

Available theme properties:

Your generative art now speaks the same visual language as your website, creating a unified and professional aesthetic that automatically adapts to theme changes.

Francis Fontaine