SpacialPoints.ts

import './style.css';

const canvas = document.querySelector<HTMLCanvasElement>('#myCanvas')!
const ctx: CanvasRenderingContext2D | null = canvas.getContext("2d");

const pointsWanted = 10;

export function drawBoundingBox() {
  if (!ctx) return;
  const side = Math.min(canvas.width, canvas.height);
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = side / 2;

  ctx.beginPath();
  ctx.moveTo(centerX + radius, centerY);
  for (let i = 1; i <= 7; i++) {
    const angle = i * Math.PI / 4;
    const x = centerX + radius * Math.cos(angle);
    const y = centerY + radius * Math.sin(angle);
    ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 0.7;
  ctx.stroke();
  createRandomPoints();
}


export function createRandomPoints() {
  if (!ctx) return;

  const side = Math.min(canvas.width, canvas.height);
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = side / 2;

  for (let index = 0; index < pointsWanted; index++) {
    const angle = Math.random() * Math.PI * 2;
    const r = Math.sqrt(Math.random()) * radius - 100;
    const x = centerX + r * Math.cos(angle);
    const y = centerY + r * Math.sin(angle);
    drawPath(x, y);
  }
}

export function drawPath(elementOne: number, elementTwo: number) {
  if (!ctx) return;
  ctx.lineWidth = 0.5;
  ctx.strokeStyle = 'pink';
  ctx.strokeRect(elementOne, elementTwo, 1, 1);
}

const main = () => drawBoundingBox();
main();