🎨 Learn Vectors by Drawing with Code!
🎯 Vector Visualizer
🎨 Learn Vectors by Drawing with Code!
Hello young explorers! 👋
Have you ever heard of vectors? They are like arrows that point in a certain direction and have a size. In math, we use them to describe movement, force, or position — just like magic arrows in a video game! 🏹✨
Today, we’ll make a fun program that lets you:
-
📌 Type in two vectors,
-
🎯 See them drawn in different colors,
-
➕➖ Add or subtract them,
-
🟢 And see the result drawn too!
🧠 What is a Vector?
A vector is made of two parts:
-
An x value: how far to move sideways
-
A y value: how far to move up or down
Example:
If vector A = (50, 30), it means move:
-
➡️ 50 steps to the right
-
🔼 30 steps up
We’ll draw arrows for two vectors, and then show what happens when we add or subtract them.
🖥️ How Does the Program Work?
You will see:
-
A canvas where the arrows (vectors) are drawn.
-
Input boxes where you can type numbers for Vector A and Vector B.
-
A dropdown to pick if you want to Add or Subtract them.
-
A result that shows you the Vector C — the final arrow!
Each arrow has its own color:
-
🔴 Vector A = Red
-
🔵 Vector B = Blue
-
🟢 Vector C (Result) = Green
And guess what? It updates automatically when you change the numbers! 💡
🚀 Try It Yourself!
Here’s the full code — copy it into a .html file and open it in a browser!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Vector Visualizer</title>
<style>
body { font-family: sans-serif; text-align: center; }
canvas { border: 1px solid #ccc; margin-top: 10px; }
input { width: 50px; margin: 5px; }
select, button { margin: 10px; padding: 5px 15px; }
.vector-label { font-weight: bold; }
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
</style>
</head>
<body>
<h2>🎯 Vector Visualizer</h2>
<div>
<span class="vector-label red">Vector A:</span>
<input id="ax" type="number" value="50">
<input id="ay" type="number" value="30">
</div>
<div>
<span class="vector-label blue">Vector B:</span>
<input id="bx" type="number" value="20">
<input id="by" type="number" value="60">
</div>
<div>
<label for="mode">Operation:</label>
<select id="mode" onchange="calculate()">
<option value="add">Add</option>
<option value="sub">Subtract</option>
</select>
</div>
<canvas id="canvas" width="400" height="400"></canvas>
<div id="result" class="green vector-label" style="margin-top: 10px;"></div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
function drawArrow(fromX, fromY, toX, toY, color) {
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
const angle = Math.atan2(toY - fromY, toX - fromX);
const headlen = 10;
ctx.beginPath();
ctx.moveTo(toX, toY);
ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
ctx.lineTo(toX, toY);
ctx.fillStyle = color;
ctx.fill();
}
function calculate() {
const ax = parseInt(document.getElementById("ax").value) || 0;
const ay = parseInt(document.getElementById("ay").value) || 0;
const bx = parseInt(document.getElementById("bx").value) || 0;
const by = parseInt(document.getElementById("by").value) || 0;
const mode = document.getElementById("mode").value;
const rx = mode === 'add' ? ax + bx : ax - bx;
const ry = mode === 'add' ? ay + by : ay - by;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(centerX, 0);
ctx.lineTo(centerX, canvas.height);
ctx.moveTo(0, centerY);
ctx.lineTo(canvas.width, centerY);
ctx.strokeStyle = "#ccc";
ctx.stroke();
drawArrow(centerX, centerY, centerX + ax, centerY - ay, "red");
drawArrow(centerX, centerY, centerX + bx, centerY - by, "blue");
drawArrow(centerX, centerY, centerX + rx, centerY - ry, "green");
document.getElementById("result").textContent = `Vector C = (${rx}, ${ry})`;
}
// Refresh when user types
['ax', 'ay', 'bx', 'by'].forEach(id => {
document.getElementById(id).addEventListener('input', calculate);
});
calculate(); // Initial run
</script>
</body>
</html>
🌟 Ready to Play?
You can now build and explore with vectors just like a real scientist or game developer! Try changing the numbers to see how the arrows move.
Would you like to make this work with 3D vectors or even move arrows with your mouse next time? Let me know! 🧑💻💡
Comments
Post a Comment