monkey chase 3 by corbun

function preload() {
  uiFont = loadFont(
    "https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff"
  );

  // Main sprite image (the monkey face)
  monkeyImg = loadImage(
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbl5eODr1SJybpcuw7MsYEbPVUhhVmITXjng&s"
  );

  // First crash screen image (fades in after collision)
  crashImg = loadImage(
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgtFQUdSVRY_u5I8be9kJcbHGia5PLCg3OVQ&s"
  );

  // Second crash screen image (fades in after 2 more minutes)
  crashImg2 = loadImage(
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKtsduK6_gd19NEyj2MizOpjz2ZaPHYrvT2g&s"
  );
}

function setup() {
  // WEBGL renderer for 3D/sprite
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  canvas.elt.style.display = "none"; // Hide canvas initially

  // Spawn sprite near the top-left corner (but fully on screen)
  const spawnX = MONKEY_SIZE * 0.6;
  const spawnY = MONKEY_SIZE * 0.6;
  monkey = new Monkey(spawnX, spawnY);

  textFont(uiFont);
  textSize(16);
  textAlign(CENTER, CENTER);

  lastMouseX = mouseX;
  lastMouseY = mouseY;

  // Create static noise generator (p5.sound)
  staticNoise = new p5.Noise("white");
  staticNoise.amp(0);    // start silent
  staticNoise.start();

  // TAUNT button via p5
  tauntButton = createButton("TAUNT");
  tauntButton.id("taunt-button");          // CSS positions it bottom-left
  tauntButton.style("display", "none");    // hidden until game starts
  tauntButton.mousePressed(triggerTaunt);  // TAUNT works on click/tap

  // Startup warning logic
  const startupWarning = document.getElementById("startup-warning");
  const startGameButton = document.getElementById("start-game-button");
  startGameButton.addEventListener("click", () => {
    // unlock audio on user gesture
    if (typeof userStartAudio === "function") {
      userStartAudio();
    }

    startupWarning.classList.add("hidden");
    canvas.elt.style.display = "block";    // Show canvas
    tauntButton.style("display", "block"); // Show taunt button
    gameState = "play";
    loop();                                // Start draw loop
  });

  // Pause draw loop until game starts
  noLoop();
}

function draw() {
  if (gameState === "play") {
    drawScene();
  } else if (gameState === "crashing") {
    drawCrashTransition();
  }
  // When gameState === "crashed", noLoop() has run and draw() stops.
}

function drawScene() {
  background(15, 20, 35);

  // Lights (not necessary for sprite but harmless)
  ambientLight(80);
  directionalLight(200, 200, 230, 0.3, -0.7, -1);
  pointLight(
    255, 190, 150,
    monkey.pos.x - width / 2,
    monkey.pos.y - height / 2,
    250
  );

  // Predictive target
  const mouseVel = createVector(mouseX - lastMouseX, mouseY - lastMouseY);
  let target = createVector(mouseX, mouseY);
  if (mouseVel.mag() > 0.5) {
    const lead = mouseVel.copy().mult(12);
    target.add(lead);
  }
  target.x = constrain(target.x, 0, width);
  target.y = constrain(target.y, 0, height);

  // Always chasing
  const dToMouse = dist(monkey.pos.x, monkey.pos.y, mouseX, mouseY);
  monkey.setState("chasing");

  monkey.update(target);
  monkey.display3D(); // draws your image as a sprite

  // 2D overlay
  resetMatrix();
  translate(-width / 2, -height / 2, 0);
  noLights();

  drawHUD();

  // Collision → start crash transition
  const catchRadius = monkey.size * 0.45;
  if (dToMouse < catchRadius) {
    triggerCrash();
  }

  lastMouseX = mouseX;
  lastMouseY = mouseY;
}

function drawCrashTransition() {
  background(0);
  resetMatrix();
  translate(-width / 2, -height / 2, 0);
  noLights();

  const elapsed = millis() - crashStartTime;

  // Draw the frozen last frame underneath
  if (freezeFrame) {
    image(freezeFrame, 0, 0, width, height);
  }

  if (elapsed < PHASE1_DURATION) {
    // Phase 1: 0 → 5 minutes: fade in crashImg over the frozen frame
    const t1 = constrain(elapsed / PHASE1_DURATION, 0, 1);
    if (crashImg) {
      tint(255, 255 * t1);
      image(crashImg, 0, 0, width, height);
      noTint();
    }
  } else if (elapsed < PHASE1_DURATION + PHASE2_DURATION) {
    // Phase 2: 5 → 7 minutes: crashImg is solid; fade in crashImg2 on top
    const t2 = constrain(
      (elapsed - PHASE1_DURATION) / PHASE2_DURATION,
      0, 1
    );
    if (crashImg) {
      image(crashImg, 0, 0, width, height);
    }
    if (crashImg2) {
      tint(255, 255 * t2);
      image(crashImg2, 0, 0, width, height);
      noTint();
    }
  } else {
    // Final state: crashImg2 fully visible, stop all sound and drawing
    if (crashImg2) {
      image(crashImg2, 0, 0, width, height);
    }

    if (staticNoise && !soundStopped) {
      // Fade out static over 1 second and stop the noise
      staticNoise.amp(0, 1);
      if (typeof staticNoise.stop === "function") {
        staticNoise.stop(1); // stop after 1 second
      }
      soundStopped = true;
    }

    gameState = "crashed";
    noLoop();
  }
}

class Monkey {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(2);
    this.acc = createVector(0, 0);

    this.baseMaxSpeed = 4.0;
    this.baseMaxForce = 0.2;
    this.maxSpeed = this.baseMaxSpeed;
    this.maxForce = this.baseMaxForce;

    this.size = MONKEY_SIZE;

    this.state = "wandering";
    this.justChangedState = false;

    this.wanderTheta = random(TWO_PI);
  }

  setState(newState) {
    if (newState !== this.state) {
      this.state = newState;
      this.justChangedState = true;
    }
  }

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

  update(target) {
    this.maxSpeed = this.baseMaxSpeed * speedMultiplier;
    this.maxForce = this.baseMaxForce * speedMultiplier;

    let steering;
    if (this.state === "chasing") {
      steering = this.seek(target);
    } else {
      steering = this.wander();
    }

    this.applyForce(steering);

    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);

    this.handleEdges();
  }

  seek(target) {
    const desired = p5.Vector.sub(target, this.pos);
    const d = desired.mag();

    if (d === 0) return createVector(0, 0);

    let speed = this.maxSpeed;
    if (d < 120) {
      speed = map(d, 0, 120, 0, this.maxSpeed);
    }
    desired.setMag(speed);

    const steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxForce * 1.8);
    return steer;
  }

  wander() {
    const noiseScale = 0.005;
    this.wanderTheta = noise(frameCount * noiseScale) * TWO_PI * 2;

    const desired = p5.Vector.fromAngle(this.wanderTheta);
    desired.setMag(this.maxSpeed * 0.7);

    const steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxForce * 0.8);
    return steer;
  }

  handleEdges() {
    const r = this.size * 0.5;

    if (this.pos.x < r) {
      this.pos.x = r;
      this.vel.x *= -0.7;
    } else if (this.pos.x > width - r) {
      this.pos.x = width - r;
      this.vel.x *= -0.7;
    }

    if (this.pos.y < r) {
      this.pos.y = r;
      this.vel.y *= -0.7;
    } else if (this.pos.y > height - r) {
      this.pos.y = height - r;
      this.vel.y *= -0.7;
    }
  }

  // Draw your image as a billboard sprite in WEBGL
  display3D() {
    if (!monkeyImg) return;

    push();
    noStroke();

    // Convert screen coords to WEBGL coords
    translate(this.pos.x - width / 2, this.pos.y - height / 2, 0);

    // Small up‑down bob
    const bob = sin(frameCount * 0.08 + this.pos.x * 0.01) * 4;
    translate(0, bob, 0);

    // Keep sprite facing camera; disable lights for flat image
    noLights();
    texture(monkeyImg);
    plane(this.size, this.size); // draw the image on a square plane

    pop();
  }
}

function drawHUD() {
  push();
  textAlign(LEFT, TOP);
  textSize(16);
  fill(255, 240);
  text("AI Sprite: avoid letting it touch your cursor!", 16, 16);
  text("Move the mouse. If it catches you, the scene freezes and glitch screens fade in with static.", 16, 36);
  text(
    "Press 'T' or tap TAUNT to enrage it (speed x2 each time).",
    16, 56
  );
  text(`Taunts: ${tauntCount}    Speed: x${speedMultiplier}`, 16, 76);
  pop();
}

function triggerCrash() {
  if (gameState !== "play") return;

  // Capture the last drawn frame (includes sprite & HUD)
  freezeFrame = get(0, 0, width, height);

  gameState = "crashing";
  crashStartTime = millis();
  soundStopped = false;

  // Remove TAUNT UI
  if (tauntButton) {
    tauntButton.remove();
    tauntButton = null;
  }

  // Start static noise
  if (staticNoise) {
    staticNoise.amp(0.2, 0.05); // ramp up quickly to 0.2 volume
  }
}

function keyPressed() {
  if (gameState === "crashing" || gameState === "crashed") return;
  if (key === "t" || key === "T") {
    triggerTaunt();
  }
}

function triggerTaunt() {
  if (gameState !== "play") return;

  tauntCount++;
  speedMultiplier *= 2;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // TAUNT button is positioned via CSS; no change needed
}