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 = 320;
  const HEIGHT = 320;

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

  // Rectangle coordinates
  const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
  const redRect = { x1: 1, y1: 7 }; // Red rectangle corner

  // Calculate rectangle areas
  $: blueWidth = Math.abs(blueRect.x1 - userPoint.x);
  $: blueHeight = Math.abs(blueRect.y1 - userPoint.y);
  $: blueArea = blueWidth * blueHeight;

  $: redWidth = Math.abs(redRect.x1 - userPoint.x);
  $: redHeight = Math.abs(redRect.y1 - userPoint.y);
  $: redArea = redWidth * redHeight;

  $: 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, 7, 'rgba(255, 0, 0, 0.3)');
    drawLineSegment(1, 1, 6, 7, '#ff3e00');
    drawLabel('A', 1, 1);
    drawLabel('C', 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.beginPath();
    ctx.roundRect(x, y, width, height, 1);
    ctx.fillStyle = color;
    ctx.fill();

    // Add border
    ctx.strokeStyle = color.replace('0.3', '0.8'); // Make border more opaque
    ctx.lineWidth = 2;
    ctx.stroke();
  }

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

    // Snap to closest grid intersection
    userPoint = {
      x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE),
      y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE)
    };
  }

  function toCanvasCoords(x, y) {
    return {
      x: x * GRID_SIZE,
      y: HEIGHT - y * GRID_SIZE
    };
  }

  function toCartesianCoords(canvasX, canvasY) {
    return {
      x: canvasX / GRID_SIZE,
      y: (HEIGHT - 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('B', coords.x, coords.y - 12);
  }

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

    // 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 (left and bottom edges)
    ctx.strokeStyle = '#666';
    ctx.lineWidth = 2;

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

    // X-axis (bottom edge)
    ctx.beginPath();
    ctx.moveTo(0, HEIGHT);
    ctx.lineTo(WIDTH, HEIGHT);
    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 / GRID_SIZE);
      ctx.fillText(value, x, HEIGHT - 5);
    }

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

    // Origin label
    ctx.textAlign = 'left';
    ctx.fillText('0', 5, HEIGHT - 5);
  }
</script>

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

  <div class="calculations">
    <h2>Rectangle Areas</h2>
    <p class="point-c">Point B: ({userPoint.x}, {userPoint.y})</p>

    <div class="rect-calc blue" class:largest={blueArea > redArea}>
      <h3>Blue Rectangle</h3>
      <p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
      <p>Width = |{blueRect.x1} - {userPoint.x}| = {blueWidth}</p>
      <p>Height = |{blueRect.y1} - {userPoint.y}| = {blueHeight}</p>
      <p class="area">Area = {blueWidth} x {blueHeight} = <strong>{blueArea}</strong></p>
    </div>

    <div class="rect-calc red" class:largest={redArea > blueArea}>
      <h3>Red Rectangle</h3>
      <p>Corner: ({redRect.x1}, {redRect.y1})</p>
      <p>Width = |{redRect.x1} - {userPoint.x}| = {redWidth}</p>
      <p>Height = |{redRect.y1} - {userPoint.y}| = {redHeight}</p>
      <p class="area">Area = {redWidth} x {redHeight} = <strong>{redArea}</strong></p>
    </div>
  </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;
    cursor: pointer;
  }

  .calculations {
    margin-top: 2rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .calculations h2 {
    width: 100%;
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
  }

  .point-c {
    width: 100%;
    text-align: center;
    color: #646cff;
    font-family: monospace;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .rect-calc {
    background: #242424;
    border-radius: 8px;
    padding: 1.5rem;
    min-width: 300px;
    border: 2px solid;
  }

  .rect-calc.blue {
    border-color: #646cff;
  }

  .rect-calc.red {
    border-color: #ff0000;
  }

  .rect-calc.largest {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3),
                0 0 40px rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
    transition: all 0.3s ease;
  }

  .rect-calc h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #fff;
  }

  .rect-calc.blue h3 {
    color: #646cff;
  }

  .rect-calc.red h3 {
    color: #ff0000;
  }

  .rect-calc p {
    margin: 0.5rem 0;
    color: #ccc;
    font-family: monospace;
  }

  .rect-calc .area {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #444;
    font-size: 1.1em;
  }

  .rect-calc strong {
    color: #fff;
    font-size: 1.2em;
  }
</style>