Creative Coding with ml5.js + p5.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

<script>
function explainCreativeCoding() {
  const explanation = `
    <h4>🎨 Creative Coding with Machine Learning</h4>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
      <h5>What is Creative Coding?</h5>
      <p>Creative coding is the practice of using programming as a medium for creative expression. When combined with machine learning, it opens up new possibilities for interactive and generative art.</p>
      
      <h5>✨ p5.js + ml5.js = Magic</h5>
      <ul>
        <li><strong>p5.js:</strong> Creative coding library for drawing, animation, and interaction</li>
        <li><strong>ml5.js:</strong> Machine learning library for real-time AI features</li>
        <li><strong>Together:</strong> Intelligent, responsive, and beautiful applications</li>
      </ul>
    </div>
    
    <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h5>🚀 Creative Possibilities</h5>
      <ul>
        <li><strong>Interactive Installations:</strong> Art that responds to movement and gestures</li>
        <li><strong>Generative Art:</strong> Visuals that evolve based on sound or environment</li>
        <li><strong>Data Visualization:</strong> Beautiful representations of ML predictions</li>
        <li><strong>Performance Tools:</strong> Real-time VJ/DJ applications</li>
        <li><strong>Educational Games:</strong> Learning through interactive experiences</li>
      </ul>
    </div>
  `;
  
  document.getElementById('creative-explanation').innerHTML = explanation;
}

explainCreativeCoding();
</script>

<div id="creative-explanation"></div>

<script>
// Create an interactive art piece that responds to body poses
const poseArtCode = `
let poseNet;
let poses = [];
let video;
let particles = [];

function setup() {
  createCanvas(640, 480);
  
  // Create video capture
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
  
  // Initialize PoseNet
  poseNet = ml5.poseNet(video, modelReady);
  poseNet.on('pose', gotPoses);
  
  colorMode(HSB, 360, 100, 100, 100);
}

function modelReady() {
  console.log('PoseNet ready!');
}

function gotPoses(results) {
  poses = results;
}

function draw() {
  background(0, 0, 10, 20); // Transparent background for trails
  
  // Create particles from pose keypoints
  for (let pose of poses) {
    for (let keypoint of pose.pose.keypoints) {
      if (keypoint.score > 0.2) {
        // Create particle at keypoint
        particles.push(new Particle(keypoint.position.x, keypoint.position.y));
        
        // Draw connections between keypoints
        drawPoseConnections(pose.pose);
      }
    }
  }
  
  // Update and draw particles
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();
    
    if (particles[i].isDead()) {
      particles.splice(i, 1);
    }
  }
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D();
    this.vel.mult(random(0.5, 2));
    this.acc = createVector(0, 0);
    this.life = 255;
    this.hue = frameCount % 360;
  }
  
  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.life -= 2;
    
    // Add some physics
    let gravity = createVector(0, 0.05);
    this.acc.add(gravity);
  }
  
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    
    fill(this.hue, 70, 90, this.life);
    noStroke();
    
    let size = map(this.life, 0, 255, 0, 20);
    ellipse(0, 0, size);
    
    pop();
  }
  
  isDead() {
    return this.life <= 0;
  }
}
`;

function showPoseArtExample() {
  const output = document.getElementById('pose-art-output');
  
  output.innerHTML = `
    <h4>🎭 Interactive Pose Art Example</h4>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
      <h5>✨ What This Creates:</h5>
      <ul>
        <li><strong>Particle Trail:</strong> Colorful particles follow your body movements</li>
        <li><strong>Skeleton Drawing:</strong> Your pose is traced with flowing lines</li>
        <li><strong>Dynamic Colors:</strong> Hues change over time creating a rainbow effect</li>
        <li><strong>Physics Simulation:</strong> Particles have gravity and momentum</li>
      </ul>
    </div>
    
    <details style="margin: 15px 0;">
      <summary style="cursor: pointer; font-weight: bold; padding: 10px; background: #f0f0f0; border-radius: 4px;">
        👁️ View Complete Code
      </summary>
      <pre style="background: #f8f9fa; padding: 15px; border-radius: 4px; overflow-x: auto; margin-top: 10px;"><code>${poseArtCode}</code></pre>
    </details>
  `;
}

showPoseArtExample();
</script>

<div id="pose-art-output"></div>