Sketch 2026-04-04 11:46

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Initialize p5.sound
  osc = new p5.Oscillator();
  osc.setType('sine'); // Sine wave for a smooth sound
  osc.amp(0); // Start with 0 volume
  osc.start(); // Start the oscillator
  userStartAudio(); // Required to allow audio playback

  tigerColor = color(255, 165, 0); // Orange
  dragonColor = color(0, 150, 200); // Blue
  noStroke();
}

function draw() {
  background(20); // Dark background

  // Map mouse position to sound parameters
  let freq = map(mouseX, 0, width, 100, 1000); // Frequency from 100Hz to 1000Hz
  let amp = map(mouseY, 0, height, 0, 0.5, true); // Amplitude from 0 to 0.5, constrained
  osc.freq(freq);
  osc.amp(amp, 0.1); // Smooth transition over 0.1 seconds

  // --- Animation Cycle for Fighting ---
  let cycleDuration = 300; // Frames for one full fight cycle (5 seconds at 60 fps)
  let currentFrameInCycle = frameCount % cycleDuration;

  let tigerStart = width * 0.15;
  let tigerEnd = width * 0.4;
  let dragonStart = width * 0.85;
  let dragonEnd = width * 0.6;

  let tigerX, dragonX;
  let tigerY = height * 0.7;
  let dragonY = height * 0.3;

  // Phase 1: Advance towards each other (first half of cycle)
  if (currentFrameInCycle < cycleDuration / 2) {
    let progress = map(currentFrameInCycle, 0, cycleDuration / 2, 0, 1);
    tigerX = lerp(tigerStart, tigerEnd, progress);
    dragonX = lerp(dragonStart, dragonEnd, progress);
  } else { // Phase 2: Retreat or hold position (second half of cycle)
    let progress = map(currentFrameInCycle, cycleDuration / 2, cycleDuration, 0, 1);
    tigerX = lerp(tigerEnd, tigerStart, progress);
    dragonX = lerp(dragonEnd, dragonStart, progress);
  }

  // Draw tiger and dragon with dynamic positions
  drawTiger(tigerX, tigerY, currentFrameInCycle);
  drawDragon(dragonX, dragonY, currentFrameInCycle);
}

function drawTiger(x, y, animationPhase) {
  push();
  translate(x, y);

  // Time-based animation for tiger's 'pounce' or 'growl'
  let pounceOffset = sin(animationPhase * 0.05) * 20; // Vertical bob
  let rotateAngle = sin(animationPhase * 0.03) * 0.1; // Slight rotation

  translate(0, pounceOffset);
  rotate(rotateAngle);

  fill(tigerColor);

  // Body
  ellipse(0, 0, 100, 60);

  // Head
  ellipse(50, -20, 40, 40);
  fill(255); // White muzzle
  ellipse(60, -10, 20, 15);
  fill(tigerColor);
  rect(60, -15, 10, 5); // Nose

  // Ears
  triangle(40, -40, 50, -50, 60, -40);

  // Stripes (simple lines)
  fill(0);
  rect(0, -10, 5, 20);
  rect(-20, -5, 5, 20);
  rect(20, 5, 5, 20);
  rect(40, -30, 5, 10); // Head stripe

  // Eyes (simple dots)
  ellipse(45, -25, 5, 5);
  ellipse(55, -25, 5, 5);

  pop();
}

function drawDragon(x, y, animationPhase) {
  push();
  translate(x, y);

  // Time-based animation for dragon's 'snaking' movement
  let snakeOffset = cos(animationPhase * 0.04) * 30; // Horizontal bob
  let rotateAngle = cos(animationPhase * 0.02) * 0.15; // Body rotation

  translate(snakeOffset, 0);
  rotate(rotateAngle);

  fill(dragonColor);

  // Head
  ellipse(0, 0, 80, 60);
  fill(255); // White eye
  ellipse(20, -10, 15, 15);
  fill(0);
  ellipse(22, -10, 5, 5); // Pupil
  fill(dragonColor);
  rect(20, 10, 10, 5); // Snout

  // Horns
  fill(100);
  triangle(-10, -20, 0, -40, 10, -20);
  triangle(-20, -10, -10, -30, 0, -10);

  // Body segments (simplified)
  for (let i = 0; i < 5; i++) {
    ellipse(-i * 50 - 50, 0, 60 - i * 10, 50 - i * 8);
  }

  // Tail (simple triangle)
  triangle(-280, 0, -300, -20, -300, 20);

  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}