const donutRadius = 100;      // Outer radius of the donut
const donutTubeRadius = 40;   // Inner radius of the donut
const backgroundColor = "pink";
const donutColor = "cyan";

let angleX = 0;
let angleY = 0;
let zoom = 1.0; // Initial zoom level

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(backgroundColor);
  fill(donutColor);
  
  // Allow the mouse to control the rotation
  const donutX = mouseX - width / 2;
  const donutY = mouseY - height / 2;

  // Adjust the rotation angles based on mouse position
  angleX = map(donutY, -height / 2, height / 2, -PI, PI);
  angleY = map(donutX, -width / 2, width / 2, -PI, PI);

  // Apply zoom
  scale(zoom);

  // Apply rotations
  rotateX(angleX);
  rotateY(angleY);

  // Draw the torus (donut)
  torus(donutRadius, donutTubeRadius);
}

function mouseWheel(event) {
  // Adjust the zoom level based on the mouse scroll event
  const delta = event.delta;
  zoom += delta * 0.01; // You can adjust the zoom sensitivity by changing the multiplier
  // Ensure zoom doesn't go too small or too large
  zoom = constrain(zoom, 0.1, 3.0);
  return false; // Prevent the page from scrolling
}