🎯 Visualizing the Dot Product with Arrows and Colors!

-

Dot Product Visualizer


Dot Product Formula:
A · B = |A||B| cos(θ) = Ax×Bx + Ay×By
Scalar Projection of A onto B:
|A| cos(θ) = (A · B) / |B|

🎯 Visualizing the Dot Product with Arrows and Colors!

Understanding math is easier when we can see it. That’s why I built this fun, interactive Dot Product Visualizer to help children (and curious learners) grasp the concept of vector math visually.

🔍 What Is the Dot Product?

The dot product is a way to measure how much one vector goes in the direction of another. It’s used in physics, 3D graphics, and even AI!

If we have:

  • Vector A = (Ax, Ay)

  • Vector B = (Bx, By)

Then the dot product is:

A · B = Ax × Bx + Ay × By

Or using lengths and angles:

A · B = |A| × |B| × cos(θ)

📏 What About Scalar Projection?

This tells us how far vector A reaches in the direction of vector B. It's like the "shadow" of A on B.

The formula is:

|A| × cos(θ) = (A · B) / |B|

🧑‍🏫 What Does the Program Do?

This interactive tool:

  • Lets you input any 2D vectors A and B.

  • Shows those vectors on a coordinate grid.

  • Draws arrowheads to make directions clear.

  • Automatically calculates:

    • The dot product

    • The scalar projection

    • The angle between the vectors

It even shows the red projection line so you can see how vector A “lands” on vector B!

🖌️ Why It’s Great for Learning

Kids love colors and movement. By letting them change the vectors and see immediate feedback, they understand:

✅ How vector directions affect the dot product
✅ What it means when vectors are perpendicular (dot product = 0!)
✅ Why projections matter in real life (like shadows or force directions)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dot Product Visualizer</title>
  <style>
    body { font-family: sans-serif; text-align: center; margin-top: 20px; }
    canvas { border: 1px solid #ccc; background: #f9f9f9; margin-top: 20px; }
    #controls { margin: 20px 0; }
    label.blue { color: blue; }
    label.green { color: green; }
    .formula { font-family: monospace; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Dot Product Visualizer</h1>
  <div id="controls">
    <label class="blue">Vector A: ( <input type="number" id="ax" value="1"> , <input type="number" id="ay" value="0"> )</label>
    <label class="green">Vector B: ( <input type="number" id="bx" value="0"> , <input type="number" id="by" value="1"> )</label>
    <button onclick="draw()">Visualize</button>
  </div>
  <canvas id="canvas" width="400" height="400"></canvas>
  <p id="result"></p>
  <p id="projection"></p>
  <p id="angle"></p>
  <div class="formula">
    <strong>Dot Product Formula:</strong><br>
    A · B = |A||B| cos(θ) = Ax×Bx + Ay×By
  </div>
  <div class="formula">
    <strong>Scalar Projection of A onto B:</strong><br>
    |A| cos(θ) = (A · B) / |B|
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const scale = 50; // scale for vector length

    function drawArrow(x, y, color) {
      const endX = centerX + x * scale;
      const endY = centerY - y * scale;

      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.lineTo(endX, endY);
      ctx.strokeStyle = color;
      ctx.lineWidth = 3;
      ctx.stroke();

      // draw arrowhead
      const headlen = 10; // length of head in pixels
      const angle = Math.atan2(centerY - endY, endX - centerX);
      ctx.beginPath();
      ctx.moveTo(endX, endY);
      ctx.lineTo(endX - headlen * Math.cos(angle - Math.PI / 6), endY + headlen * Math.sin(angle - Math.PI / 6));
      ctx.lineTo(endX - headlen * Math.cos(angle + Math.PI / 6), endY + headlen * Math.sin(angle + Math.PI / 6));
      ctx.lineTo(endX, endY);
      ctx.fillStyle = color;
      ctx.fill();
    }

    function drawDashedLine(x, y) {
      ctx.beginPath();
      ctx.setLineDash([5, 5]);
      ctx.moveTo(centerX + x * scale, centerY - y * scale);
      ctx.lineTo(centerX + x * scale, centerY);
      ctx.strokeStyle = 'gray';
      ctx.stroke();
      ctx.setLineDash([]);
    }

    function draw() {
      const ax = parseFloat(document.getElementById('ax').value);
      const ay = parseFloat(document.getElementById('ay').value);
      const bx = parseFloat(document.getElementById('bx').value);
      const by = parseFloat(document.getElementById('by').value);

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw axes
      ctx.strokeStyle = '#ccc';
      ctx.beginPath();
      ctx.moveTo(centerX, 0);
      ctx.lineTo(centerX, canvas.height);
      ctx.moveTo(0, centerY);
      ctx.lineTo(canvas.width, centerY);
      ctx.stroke();

      // Draw vectors A and B
      drawArrow(ax, ay, 'blue');
      drawArrow(bx, by, 'green');

      // Dot product
      const dot = ax * bx + ay * by;

      // Magnitudes
      const magA = Math.sqrt(ax * ax + ay * ay);
      const magB = Math.sqrt(bx * bx + by * by);

      // Angle (in radians and degrees)
      const cosTheta = dot / (magA * magB);
      const angleRad = Math.acos(Math.min(Math.max(cosTheta, -1), 1));
      const angleDeg = (angleRad * 180 / Math.PI).toFixed(2);

      // Scalar projection
      const scalarProjection = (magA * cosTheta).toFixed(2);

      // Draw projection line
      const projLength = (dot / (magB * magB));
      drawArrow(bx * projLength, by * projLength, 'red');

      // Results
      document.getElementById('result').innerText = `Dot Product = ${dot.toFixed(2)}`;
      document.getElementById('projection').innerText = `Scalar Projection of A onto B = ${scalarProjection}`;
      document.getElementById('angle').innerText = `Angle between A and B = ${angleDeg}°`;
    }

    draw();
  </script>
</body>
</html>


Comments

Post a Comment

Popular posts from this blog

🧠 Building a Korean Character Recognition Model with PyTorch

-
Image
Hangul, the Korean writing system, is both elegant and systematic. Each character is a combination of components called Jamo: 초성 (initial), 중성 (medial), and 종성 (final). In this project, I built a deep learning model using PyTorch to recognize these components from rendered character images. Here's how I did it. ✨ Project Overview This project involves: Generating synthetic images of Hangul characters with their bounding boxes. Decomposing characters into Jamo components. Training a convolutional neural network to classify each character's 초성, 중성, and 종성. Performing inference on single or multiple images and visualizing the results. Let’s break it down. 🏗️ Step 1: Generate Hangul Character Dataset We use a TrueType font (like Malgun Gothic ) to render images of Hangul syllables and compute their bounding boxes. Each image is saved along with Jamo annotations in JSON. generate_korean_chars.py from PIL import Image , ImageDraw , ImageFont import os i...
Read more

🧠 Bayes' Theorem Interactive Game – Understand Conditional Probability Through Play

-
Bayes' Theorem Game This game helps you understand Bayes' Theorem: P(A|B) = [P(B|A) × P(A)] / P(B) You're a doctor testing for a disease. Fill in the values: P(Disease): P(Positive | Disease): P(Positive | No Disease): Calculate P(Disease | Positive) Explanation: P(A) = probability of the disease P(B|A) = probability of a positive test given disease P(B|¬A) = probability of a positive test without disease P(B) = total probability of a positive test P(A|B) = probability of having the disease if the test is positive Visualize the Effect of Each Variable 🧠 Bayes' Theorem Interactive Game – Understand Conditional Probability Through Play Bayes' Theorem is a powerful tool in probability theory that helps us reason about uncertain events. While it's often introdu...
Read more

🎯 Building an Object Detection Model for MNIST with PyTorch (COCO-style Dataset)

-
Image
Object detection is one of the core tasks in computer vision, and in this post, we'll walk through a complete pipeline: from downloading and converting the MNIST dataset to COCO format, to building and training a custom object detector in PyTorch. We'll also visualize predictions, plot training history, and analyze failure cases! This project demonstrates how to: Convert a dataset to the COCO format. Build a lightweight CNN-based object detector. Train and validate the model with bounding box and class predictions. Evaluate model performance visually and statistically. 🔧 1. Step-by-Step: Convert MNIST to COCO Format We’ll start by downloading MNIST and converting each digit into a COCO-style annotation: each image will have one bounding box and one label. 🗂 mnist_download.py import torch import torchvision from torchvision import datasets import os import json from PIL import Image import numpy as np from tqdm import tqdm import matplotli...
Read more