just-vibes/line-segment-intersection/src/App.svelte

<script>
  import { onMount } from 'svelte';

  let canvas;
  let ctx;
  const GRID_SIZE = 40; // pixels per grid unit
  const WIDTH = 800;
  const HEIGHT = 640;

  let userPoint = { x: 5, y: 2 };

  $: if (ctx && userPoint) {
    redraw();
  }

  onMount(() => {
    ctx = canvas.getContext('2d');
    redraw();
  });

  function redraw() {
    drawGrid();
    drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)');
    drawRectangle(userPoint.x, userPoint.y, 1, 6, 'rgba(255, 0, 0, 0.3)');
    drawLineSegment(1, 1, 6, 7, '#ff3e00');
    drawLabel('A', 1, 1);
    drawLabel('B', 6, 7);
    drawUserPoint();
  }

  function drawRectangle(x1, y1, x2, y2, color) {
    const corner1 = toCanvasCoords(x1, y1);
    const corner2 = toCanvasCoords(x2, y2);

    const x = Math.min(corner1.x, corner2.x);
    const y = Math.min(corner1.y, corner2.y);
    const width = Math.abs(corner2.x - corner1.x);
    const height = Math.abs(corner2.y - corner1.y);

    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
  }

  function handleMouseMove(event) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    userPoint = toCartesianCoords(mouseX, mouseY);
  }

  function toCanvasCoords(x, y) {
    const centerX = WIDTH / 2;
    const centerY = HEIGHT / 2;
    return {
      x: centerX + x * GRID_SIZE,
      y: centerY - y * GRID_SIZE
    };
  }

  function toCartesianCoords(canvasX, canvasY) {
    const centerX = WIDTH / 2;
    const centerY = HEIGHT / 2;
    return {
      x: (canvasX - centerX) / GRID_SIZE,
      y: (centerY - canvasY) / GRID_SIZE
    };
  }

  function drawLineSegment(x1, y1, x2, y2, color = '#ff3e00') {
    const start = toCanvasCoords(x1, y1);
    const end = toCanvasCoords(x2, y2);

    ctx.strokeStyle = color;
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.lineTo(end.x, end.y);
    ctx.stroke();

    // Draw endpoints
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(start.x, start.y, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(end.x, end.y, 5, 0, Math.PI * 2);
    ctx.fill();
  }

  function drawLabel(label, x, y) {
    const coords = toCanvasCoords(x, y);

    ctx.fillStyle = '#fff';
    ctx.font = 'bold 16px monospace';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText(label, coords.x, coords.y - 10);
  }

  function drawUserPoint() {
    const coords = toCanvasCoords(userPoint.x, userPoint.y);

    // Draw point
    ctx.fillStyle = '#646cff';
    ctx.beginPath();
    ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
    ctx.fill();

    // Draw label
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 16px monospace';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('C', coords.x, coords.y - 12);
  }

  function drawGrid() {
    // Clear canvas
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    const centerX = WIDTH / 2;
    const centerY = HEIGHT / 2;

    // Draw grid lines
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1;

    // Vertical grid lines
    for (let x = 0; x <= WIDTH; x += GRID_SIZE) {
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, HEIGHT);
      ctx.stroke();
    }

    // Horizontal grid lines
    for (let y = 0; y <= HEIGHT; y += GRID_SIZE) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(WIDTH, y);
      ctx.stroke();
    }

    // Draw axes
    ctx.strokeStyle = '#666';
    ctx.lineWidth = 2;

    // Y-axis
    ctx.beginPath();
    ctx.moveTo(centerX, 0);
    ctx.lineTo(centerX, HEIGHT);
    ctx.stroke();

    // X-axis
    ctx.beginPath();
    ctx.moveTo(0, centerY);
    ctx.lineTo(WIDTH, centerY);
    ctx.stroke();

    // Draw axis labels
    ctx.fillStyle = '#888';
    ctx.font = '12px monospace';
    ctx.textAlign = 'center';

    // X-axis labels
    for (let x = GRID_SIZE; x <= WIDTH; x += GRID_SIZE) {
      const value = Math.round((x - centerX) / GRID_SIZE);
      if (value !== 0) {
        ctx.fillText(value, x, centerY + 20);
      }
    }

    // Y-axis labels
    ctx.textAlign = 'right';
    for (let y = GRID_SIZE; y <= HEIGHT; y += GRID_SIZE) {
      const value = Math.round((centerY - y) / GRID_SIZE);
      if (value !== 0) {
        ctx.fillText(value, centerX - 10, y + 5);
      }
    }

    // Origin label
    ctx.fillText('0', centerX - 10, centerY + 20);
  }
</script>

<main>
  <h1>Line Segment Intersection</h1>
  <div class="canvas-container">
    <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove}></canvas>
  </div>
</main>

<style>
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
  }

  h1 {
    margin-bottom: 1rem;
    color: #fff;
  }

  .canvas-container {
    border: 2px solid #444;
    border-radius: 8px;
    overflow: hidden;
  }

  canvas {
    display: block;
  }
</style>