ICM final drum and music

ML5 face-calculate the range of two eyes to detect the distance between screen and player

get face position infomation

get distance data

Music interaction

lerp——smooth transition of audio change

Audio Bar

class Bar {
  constructor(x) {
    this.x = x;
    this.height = 0;
    this.targetHeight = 0;
    this.color = color(random(50, 255), random(50, 255), random(50, 255));
    this.alpha = 180;
    this.velocity = 0;
    this.damping = 0.85;
    this.springForce = 0.2;
  }
  
  update(targetHeight) {
    // Apply spring physics
    let force = (targetHeight - this.height) * this.springForce;
    this.velocity += force;
    this.velocity *= this.damping;
    this.height += this.velocity;
    
    // Ensure height doesn't go below 0
    this.height = max(0, this.height);
  }
  
  display() {
    push();
    // Add glow effect
    drawingContext.shadowBlur = 15;
    drawingContext.shadowColor = color(
      red(this.color),
      green(this.color),
      blue(this.color),
      this.alpha
    );
    
    // Draw main body
    fill(
      red(this.color),
      green(this.color),
      blue(this.color),
      this.alpha
    );
    noStroke();
    rect(this.x, height - this.height, width/NUM_BARS - 10, this.height, 5);
    pop();
  }
}

update(targetHeight) { let force = (targetHeight - this.height) * this.springForce; this.velocity += force; this.velocity *= this.damping; this.height += this.velocity; this.height = max(0, this.height); }

Particle system

class Particle {
  constructor(x, y, hue) {
    this.position = createVector(x, y);
    this.velocity = p5.Vector.random2D().mult(random(2, 5));
    this.acceleration = createVector(0, 0);
    this.lifespan = 255;
    this.size = random(10, 15);
    this.hue = hue;
    this.originalHue = hue;
  }

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

  update(audioLevel) {
    this.size = map(audioLevel, 0, 1, 10, 15);
    this.hue = map(audioLevel, 0, 1, this.originalHue, this.originalHue + 50);
    
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
    this.lifespan -= 2;
  }

  isDead() {
    return this.lifespan < 0;
  }

  show() {
    colorMode(HSB);
    noStroke();
    fill(this.hue, 80, 100, this.lifespan);
    ellipse(this.position.x, this.position.y, this.size);
    colorMode(RGB);
  }
}

invoke it when score increase

Score

let distance = dist(noseXp, noseYp, targetX, targetY);
if (distance < SCORE_RANGE && millis() - lastScoreTime > SCORE_INTERVAL) 
score += POINTS_PER_TICK;

Iterations

Create an effect where the musical frequency of your voice, the left and right of your vocal tract changes with the video capture, with your nose, and with your expression

using spring effect preview work

Put music library after head