make this grid array of 3d matrix to center in canvas and zoom.: const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const rotationSpeed = 0.001;
const gridSize = 50;
const gridSpacing = 25;
const zoomStep = 5;
const minZoom = 100;
const maxZoom = 10000;
const centerFocus = 180;

let grid = [];
for (let x = -gridSize; x <= gridSize; x += gridSpacing) {
  for (let y = -gridSize; y <= gridSize; y += gridSpacing) {
    for (let z = -gridSize; z <= gridSize; z += gridSpacing) {
      grid.push({ x, y, z });
    }
  }
}

let lastClickedPoint = null;
const clickedPoints = [];
let angleX = 0;
let angleY = 0;
let zoom = 800;
let dragStart = null;

function rotate(point, angleX, angleY) {
  const { x, y, z } = point;

  const offsetX = ((centerFocus - minZoom) / (centerFocus - minZoom)) * gridSize / 2;
  const offsetZ = ((maxZoom - centerFocus) / (maxZoom - minZoom)) * gridSize / 2;

  const xPos = x - offsetX;
  const yPos = y - offsetX;
  const zPos = z - offsetZ;

  const cosX = Math.cos(angleX);
  const sinX = Math.sin(angleX);
  const cosY = Math.cos(angleY);
  const sinY = Math.sin(angleY);

  const newY = yPos * cosX - zPos * sinX;
  const newZ = yPos * sinX + zPos * cosX;
  const newX = xPos * cosY - newZ * sinY;
  const newZ2 = xPos * sinY + newZ * cosY;

  return { x: newX + offsetX, y: newY + offsetX, z: newZ2 + offsetZ };
}

function project(point, width, height) {
  const { x, y, z } = point;

  const scale = zoom / (centerFocus + z);
  const newX = x * scale + width / 2;
  const newY = y * scale + height / 2;

  return { x: newX, y: newY, scale };
}

function findClosestPoint(point) {
  const threshold = 20;
  let minDist = Infinity;
  let minIndex = -1;

  for (let i = 0; i < grid.length; i++) {
    const projected = project(rotate(grid[i], angleX, angleY), canvas.width, canvas.height);
    const dx = point.x - projected.x;
    const dy = point.y - projected.y;
    const dist = Math.sqrt(dx * dx + dy * dy);

    if (dist < minDist && dist <= threshold) {
      minDist = dist;
      minIndex = i;
    }
  }

  return minIndex !== -1 ? grid[minIndex] : null;
}

let mouseDown = false;
let activeLine = null;
const lines = [];

canvas.addEventListener("wheel", (e) => {
  e.preventDefault();
  zoom += e.deltaY * -0.1 * zoomStep;
  zoom = Math.min(Math.max(zoom, minZoom), maxZoom); // Limit zoom to min and max thresholds
});

canvas.addEventListener("mousedown", (e) => {
  dragStart = { x: e.clientX, y: e.clientY };
});

canvas.addEventListener("mousemove", (e) => {
  if (dragStart) {
    const deltaX = e.clientX - dragStart.x;
    const deltaY = e.clientY - dragStart.y;
    angleX += deltaY * 0.01;
    angleY += deltaX * 0.01;
    dragStart = { x: e.clientX, y: e.clientY };
  }
});

canvas.addEventListener("mouseup", (e) => {
mouseDown = false;
dragStart = null;
if (activeLine !== null) {
const canvasRect = canvas.getBoundingClientRect();
const mouseX = e.clientX - canvasRect.left;
const mouseY = e.clientY - canvasRect.top;
const endPoint = findClosestPoint({ x: mouseX, y: mouseY });

if (endPoint !== activeLine[activeLine.length - 1]) {
activeLine.push(endPoint);
lines.push(activeLine);
}
activeLine = null;
}

if (lastClickedPoint !== null) {
const canvasRect = canvas.getBoundingClientRect();
const mouseX = e.clientX - canvasRect.left;
const mouseY = e.clientY - canvasRect.top;
const clickedPoint = findClosestPoint({ x: mouseX, y: mouseY });

if (clickedPoint !== null) {
if (lastClickedPoint === clickedPoint) {
lastClickedPoint = null;
} else {
lines.push([lastClickedPoint, clickedPoint]);
clickedPoints.push(clickedPoint);
lastClickedPoint = null;
}
}
} else {
const canvasRect = canvas.getBoundingClientRect();
const mouseX = e.clientX - canvasRect.left;
const mouseY = e.clientY - canvasRect.top;
const clickedPoint = findClosestPoint({ x: mouseX, y: mouseY });

if (clickedPoint !== null) {
lastClickedPoint = clickedPoint;
clickedPoints.push(clickedPoint);
}
}
});
function drawLine(line) {
  ctx.beginPath();

  for (let i = 0; i < line.length - 1; i++) {
    const projectedStart = project(rotate(line[i], angleX, angleY), canvas.width, canvas.height);
    const projectedEnd = project(rotate(line[i + 1], angleX, angleY), canvas.width, canvas.height);

    ctx.moveTo(projectedStart.x, projectedStart.y);
    ctx.lineTo(projectedEnd.x, projectedEnd.y);
  }

  ctx.strokeStyle = "rgba(25,200,25,0.2)";
  ctx.lineWidth = 2;
  ctx.stroke();
}

function calculateGridCenter(grid) {
  let totalX = 0;
  let totalY = 0;
  let totalZ = 0;
  const pointsCount = grid.length;

  for (const point of grid) {
    totalX += point.x;
    totalY += point.y;
    totalZ += point.z;
  }

  return {
    x: totalX / pointsCount,
    y: totalY / pointsCount,
    z: totalZ / pointsCount,
  };
}

const gridCenter = calculateGridCenter(grid);

function project(point, width, height, center) {
  const { x, y, z } = point;

  const offsetX = (x - gridCenter.x) * zoom / 1000;
  const offsetY = (y - gridCenter.y) * zoom / 1000;
  const offsetZ = (z - gridCenter.z) * zoom / 1000;

  const scale = zoom / (zoom / 2 + offsetZ);
  const newX = offsetX * scale + width / 2;
  const newY = offsetY * scale + height / 2;

  return { x: newX, y: newY, scale };
}

function draw() {
  ctx.fillStyle = "rgba(1,2,1,0.8)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (const point of grid) {
    const rotated = rotate(point, angleX, angleY);
    const projected = project(rotated, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(projected.x, projected.y, 2 * projected.scale, 0, Math.PI * 2);
    ctx.closePath();
    const gradient = ctx.createRadialGradient(projected.x, projected.y, 0, projected.x, projected.y, 2 * projected.scale);
    gradient.addColorStop(0, "rgba(255,155,255,0.5)");
    gradient.addColorStop(0.5, "rgba(55,255,25,0.8)");
    gradient.addColorStop(1, "rgba(55,25,255,0.2)");
    ctx.fillStyle = gradient;
    ctx.fill();
  }

  // Drawing clicked points in green
  ctx.fillStyle = "rgba(255,200,50,0.5)";
  for (const clickedPoint of clickedPoints) {
    const rotated = rotate(clickedPoint, angleX, angleY);
    const projected = project(rotated, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(projected.x, projected.y, 4 * projected.scale, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }

  for (const line of lines) {
    drawLine(line);
  }

  if (activeLine !== null) {
    drawLine(activeLine);
  }
  
  angleX += rotationSpeed;
  angleY += rotationSpeed;

  requestAnimationFrame(draw);
}


draw();