p5.js Sketches for M3Data Site

p5.js Sketches for M3Data Site

This directory contains p5.js animation sketches for the mycopunk-themed site.

Available Sketches

1. Hero Particles (hero-particles.js)

Electric spores/data particles that float across the hero section with mouse interaction.

Features:

  • Particle trails
  • Mouse repulsion/attraction
  • Neon glow effects
  • Configurable particle count

Options:

{
  particleCount: 40,        // Number of particles
  mouseInfluence: true      // Enable mouse interaction
}

2. Mycelial Network (mycelial-network.js)

Organic, growing network inspired by mycelium with connecting nodes.

Features:

  • Organic node movement
  • Dynamic connections based on distance
  • Pulsing glow effects
  • Gradually growing network

Options:

{
  maxNodes: 25,            // Maximum number of nodes
  maxDistance: 150,        // Connection distance threshold
  growthRate: 0.3          // How fast nodes are added
}

Creating New Sketches

  1. Create a new file in this directory (e.g., my-sketch.js)
  2. Use the p5.js instance mode pattern:
function mySketchName(p, options = {}) {
  // Your setup and draw functions
  p.setup = function() {
    // Initialize canvas
    const canvas = p.createCanvas(width, height);
    // ... setup code
  };

  p.draw = function() {
    // Animation loop
  };

  p.windowResized = function() {
    // Handle responsive resizing
    p.resizeCanvas(newWidth, newHeight);
  };
}
  1. Add to your layout:
<div id="my-sketch-canvas"></div>

<script src="/assets/js/sketches/my-sketch.js"></script>
<script>
  window.sketchManager.register('my-sketch-canvas', mySketchName, {
    // your options
  });
</script>

Color Palette

Use the mycopunk color palette in your sketches:

const cryptoLime = [174, 255, 0];    // Neon lime green
const mycoMagenta = [255, 0, 204];   // Neon magenta
const biolumeCyan = [0, 255, 255];   // Bioluminescent cyan

Performance Tips

  • Keep particle counts reasonable (30-50 for background animations)
  • Use p.frameRate() to limit FPS if needed
  • Consider using p.noStroke() to reduce rendering overhead
  • Use p.blendMode() sparingly as it’s computationally expensive

Accessibility

All sketches are automatically disabled for users with prefers-reduced-motion enabled. Users can also toggle animations using the floating button.