really bad game by corbun

function preload() {
  // Load the custom shaders
  // Ensure 'vertex.glsl' and 'fragment.glsl' files are present and contain GLSL code
  myShader = loadShader('vertex.glsl', 'fragment.glsl');
  
  // Load a font for text in WEBGL mode
  // Using Fontsource CDN for reliable WEBGL-compatible fonts
  myFont = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');

  // Initialize velocity variables for the first frame
  prevMouseX = mouseX;
  prevMouseY = mouseY;
  velocityX = 0;
  velocityY = 0;
  velocityMagnitude = 0;
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke(); // No p5.js strokes, shader handles all rendering

  // Set the loaded font and text size for the "made by corbun" text
  textFont(myFont);
  textSize(16); // Increased text size
  fill(255); // White text color

  // Initialize p5.sound components for techno music
  // Using a sawtooth wave for a typical techno synth sound
  technoSynth = new p5.Oscillator('sawtooth');
  technoSynth.amp(0); // Start silent
  technoSynth.freq(100); // Base frequency
  technoSynth.start();

  // Add reverb for a spacious, metallic sound
  technoReverb = new p5.Reverb();
  technoReverb.process(technoSynth, 3, 2); // 3 seconds decay, 2% dry/wet
  technoReverb.amp(0.1); // Subtle reverb volume

  // Add delay for a rhythmic echo effect
  technoDelay = new p5.Delay();
  technoDelay.process(technoSynth, 0.25, 0.5, 2300); // 0.25 delay time, 0.5 feedback, 2300 ms filter frequency
  technoDelay.amp(0.1); // Subtle delay volume

  // Add a distortion effect for the glitchy sound
  technoDistortion = new p5.Distortion(0.0); // Start with no distortion
  technoDistortion.process(technoSynth);
  technoDistortion.amp(0.1); // Subtle distortion volume

  // Start the Web Audio context. This is required for audio to play in modern browsers.
  userStartAudio();
}

function draw() {
  // Calculate mouse velocity for this frame
  // Multiply by 0.5 to make the effect less aggressive and allow for smoother transitions
  velocityX = (mouseX - prevMouseX) * 0.5;
  velocityY = (mouseY - prevMouseY) * 0.5;

  // Store current mouse position for the next frame's velocity calculation
  prevMouseX = mouseX;
  prevMouseY = mouseY;

  // Smoothly decay velocity over time, making ripples settle
  // This gives the "liquid mercury" feel where movement creates ripples that fade
  velocityX *= 0.95;
  velocityY *= 0.95;

  // Calculate the magnitude (length) of the velocity vector
  velocityMagnitude = sqrt(velocityX * velocityX + velocityY * velocityY);

  // Modulate techno music based on velocityMagnitude
  // Map velocityMagnitude to frequency and amplitude of the synth
  // This makes the music more intense and glitchy as you move the mouse faster

  // Base frequency mapping
  let baseFreq = map(velocityMagnitude, 0, 100, 50, 400); // Map velocity (0-100) to frequency (50-400 Hz)
  let freq = baseFreq;

  // Add random frequency jumps for glitchiness when velocity is high
  if (velocityMagnitude > 30) {
    freq += random(-20, 20); // Add a small random offset
  }
  if (velocityMagnitude > 60) {
    freq += random(-50, 50); // Add a larger random offset
  }
  freq = constrain(freq, 50, 600); // Keep frequency within a reasonable range

  let amp = map(velocityMagnitude, 0, 100, 0, 0.2); // Map velocity (0-100) to amplitude (0-0.2 volume)

  technoSynth.freq(freq);
  technoSynth.amp(amp, 0.1); // Smooth amplitude change over 0.1 seconds

  // Modulate distortion amount based on velocityMagnitude
  // Faster movement = more distortion
  let distortionAmount = map(velocityMagnitude, 0, 100, 0, 0.5); // Map velocity to distortion amount (0-0.5)
  technoDistortion.amount.value = distortionAmount;

  // Randomize delay feedback slightly for glitchiness when velocity is high
  if (velocityMagnitude > 40) {
    let delayFeedback = map(velocityMagnitude, 0, 100, 0.5, 0.7); // Base feedback
    delayFeedback += random(-0.05, 0.05); // Add random variation
    delayFeedback = constrain(delayFeedback, 0.4, 0.8); // Keep feedback within a reasonable range
    technoDelay.feedback.value = delayFeedback;
  } else {
    technoDelay.feedback.value = 0.5; // Default feedback when calm
  }

  // Set the custom shader to be used for rendering
  shader(myShader);

  // Pass uniforms (variables) to the fragment shader
  myShader.setUniform('u_resolution', [width, height]); // Canvas resolution
  myShader.setUniform('u_mouse', [mouseX, mouseY]);     // Mouse position
  myShader.setUniform('u_velocityMagnitude', velocityMagnitude); // Mouse velocity magnitude
  myShader.setUniform('u_time', millis() / 1000.0);      // Time in seconds

  // Draw a rectangle that covers the entire canvas.
  // The shader will then render the liquid chrome effect on this rectangle.
  rect(0, 0, width, height);

  // Draw "made by corbun" text
  // In WEBGL, (0,0) is the center. To place in bottom-left, use negative width/2 and positive height/2.
  text("made by corbun", -width/2 + 10, height/2 - 10);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Update the resolution uniform in the shader when the canvas is resized
  myShader.setUniform('u_resolution', [width, height]);
}