Sketch 2026-02-14 08:55

function preload() {
  // Use preload() to load external assets if needed, but for sound generation, setup() is fine.
  // For example, if you had a specific scary sound file:
  // scarySoundFile = loadSound('path/to/your/scary_sound.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  entityColor = color(50, 0, 0); // Dark red/brown for the entity's body

  // Create some glowing eyes
  for (let i = 0; i < numEyes; i++) {
    eyes.push({
      x: random(width / 4, 3 * width / 4), // Eyes within the central area
      y: random(height / 4, 3 * height / 4),
      size: random(30, 80), // Size of the eye
      eyeColor: color(255, 200, 0), // Yellowish for the eye's glow
      pupilColor: color(0), // Black pupil
      pupilSize: random(0.2, 0.5) // Pupil size relative to eye size
    });
  }

  // --- Initialize p5.sound elements for an unsettling atmosphere ---

  // White noise for a static/hissing sound
  scaryNoise = new p5.Noise('white');
  scaryNoise.amp(0); // Start quietly
  scaryNoise.start();
  scaryNoise.disconnect(); // Disconnect to apply reverb without direct output
  let reverb = new p5.Reverb();
  reverb.process(scaryNoise, 3, 2); // Add reverb: wetness 3, delay 2 seconds
  reverb.drywet(0.5); // Mix 50% dry signal with 50% reverberated signal

  // Low-frequency sine wave for a subtle, deep hum
  lowHum = new p5.Oscillator('sine');
  lowHum.freq(random(30, 60)); // Very low frequency (30-60 Hz)
  lowHum.amp(0);
  lowHum.start();
  lowHum.disconnect(); // Disconnect to apply delay without direct output
  let delay = new p5.Delay();
  delay.process(lowHum, 0.75, 0.5, 2300); // Delay: 0.75s, feedback 0.5, filter 2300Hz
  delay.drywet(0.3); // Mix 70% dry signal with 30% delayed signal

  // Fade in the sounds over a few seconds
  scaryNoise.amp(0.1, 2); // Fade in noise to 0.1 amplitude over 2 seconds
  lowHum.amp(0.05, 3); // Fade in hum to 0.05 amplitude over 3 seconds
}

function draw() {
  background(20); // Very dark background

  // --- Draw the scary entity's body ---
  noStroke();
  fill(entityColor);
  beginShape();
  // Use noise() to create a distorted, organic blob shape
  for (let i = 0; i < TWO_PI; i += 0.1) {
    let r = map(noise(cos(i) * 0.5, sin(i) * 0.5, frameCount * 0.01), 0, 1, width * 0.1, width * 0.3);
    let x = width / 2 + r * cos(i);
    let y = height / 2 + r * sin(i);
    vertex(x, y);
  }
  endShape(CLOSE);

  // --- Draw the glowing eyes that follow the mouse ---
  for (let eye of eyes) {
    fill(eye.eyeColor);
    ellipse(eye.x, eye.y, eye.size); // The main glowing part of the eye
    fill(eye.pupilColor);
    // Calculate pupil position based on mouseX and mouseY
    let pupilX = map(mouseX, 0, width, -eye.size * eye.pupilSize * 0.5, eye.size * eye.pupilSize * 0.5);
    let pupilY = map(mouseY, 0, height, -eye.size * eye.pupilSize * 0.5, eye.size * eye.pupilSize * 0.5);
    ellipse(eye.x + pupilX, eye.y + pupilY, eye.size * eye.pupilSize); // The pupil
  }

  // --- "Coming out of its game" effects ---

  // 1. Draw shapes partially outside the canvas boundaries
  // These semi-transparent red bars appear at the edges, suggesting something lurking beyond.
  fill(100, 0, 0, 150); // Semi-transparent red
  rect(-50, height / 3, 100, height / 3); // Left edge
  rect(width - 50, height / 3, 100, height / 3); // Right edge

  // 2. Manipulate DOM elements (e.g., change body background for a glitchy effect)
  // This uses p5.js's select() function to access the HTML body and change its style.
  if (frameCount % 60 === 0) { // Every second (60 frames)
    let r = random(10, 50);
    let g = random(0, 10);
    let b = random(0, 10);
    select('body').style('background-color', `rgb(${r}, ${g}, ${b})`); // Glitchy dark background
  }
  // The cursor is already hidden via style.css, which is another "out of game" effect.
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-calculate eye positions when the window is resized to keep them centered
  eyes = [];
  for (let i = 0; i < numEyes; i++) {
    eyes.push({
      x: random(width / 4, 3 * width / 4),
      y: random(height / 4, 3 * height / 4),
      size: random(30, 80),
      eyeColor: color(255, 200, 0),
      pupilColor: color(0),
      pupilSize: random(0.2, 0.5)
    });
  }
}