🎯 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

🍓 Fun Fruit Math Game for Kids – Learn Multiplication & Division with Smiles!

-
Image
🍓 Fruit Math Game 🍌 Check 🍓 Fun Fruit Math Game for Kids – Learn Multiplication & Division with Smiles! Learning math can be fun—especially when fruits and emojis get involved! 🎉 If you're looking for a simple, colorful way to help elementary school students practice multiplication and division, this interactive Fruit Math Game is perfect for you. 👶 Who's it for? This game is designed for: Elementary school students (Grades 1–3) Kids just starting to learn multiplication and division Parents or teachers looking for fun math learning tools 🧠 What does it teach? The game randomly generates problems for: Multiplication (e.g. 3 × 2) Division (e.g. 12 ÷ 4) Instead of just numbers, it uses fruit emojis like 🍎🍌🍓 to make math more visual and engaging. ✨ Key Features Colorful fruit emojis Randomized math problems Instant feedback (correct or try again!) Kid-friendly design 🖥️ How to Use Copy th...
Read more

Visualize Permutations and Combinations with Fruits!

-
Image
Fruit Permutation & Combination Visualizer Select number of fruits (n): Generate 🍎 Apple 🍌 Banana 🍇 Grapes 🍓 Strawberry 🍍 Pineapple Combinations (order doesn't matter) Permutations (order matters) Have you ever wondered how many different ways you can arrange fruits when choosing some from a basket? Today, let’s explore permutations and combinations with a fun and simple program using fruit emojis! 🍏 What You Will Learn The difference between permutations and combinations How to calculate them How to see them visually using fruit icons! 🥧 Meet the Fruits We have five fruits in our basket: 🍎 Apple 🍌 Banana 🍇 Grapes 🍓 Strawberry 🍍 Pineapple You can choose any number of fruits from 1 to 5. Once you choose, the program shows you: All combinations (order doesn’t matter) All permutations (order ma...
Read more