1 / 24
📐 🧮 🎮

แบบฝึกหัดเรื่องเวกเตอร์

สำหรับนักศึกษาปี 1 CS (พร้อมแนะนำเครื่องมือ)

สไลด์นี้ประกอบด้วยส่วนแนะนำเครื่องมือ และกิจกรรม 3 ส่วน ที่จะช่วยให้คุณเข้าใจเวกเตอร์ทั้งในเชิงภาพ การเขียนโปรแกรม และการพัฒนาเกม

📖 แนะนำ Python · Colab · Unity · C# Part 1 GeoGebra – 15-20 นาที Part 2 Python / NumPy – 20-25 นาที Part 3 Unity / C# – 20-25 นาที

👉 ใช้ปุ่มลูกศรหรือปุ่มซ้าย/ขวาเพื่อเปลี่ยนสไลด์

2 / 24

ภาพรวมกิจกรรม

ส่วนเครื่องมือเวลาโดยประมาณเป้าหมาย
Part 1GeoGebra15-20 นาทีเข้าใจเวกเตอร์เชิงภาพ: ขนาด ทิศทาง การบวก และการคูณด้วยสเกลาร์
Part 2Python / NumPy20-25 นาทีใช้เวกเตอร์แทนข้อมูลและคำนวณด้วยโค้ด
Part 3Unity / C#20-25 นาทีใช้เวกเตอร์แทนตำแหน่ง ทิศทาง และการเคลื่อนที่ในเกม

💡 เป้าหมายรวม: เชื่อมโยงแนวคิดเวกเตอร์จากคณิตศาสตร์ สู่วิทยาการข้อมูล และการพัฒนาเกม

3 / 24

รู้จักเครื่องมือทั้ง 4 ตัว

เครื่องมือที่ใช้ในแบบฝึกหัดนี้

เครื่องมือประเภทใช้ทำอะไรในแบบฝึกหัดนี้
🐍 Pythonภาษาโปรแกรมเขียนโค้ดคำนวณเวกเตอร์ จัดการข้อมูล
☁️ Google Colabคลาวด์ Notebookเขียน Python บนเว็บ ไม่ต้องติดตั้ง ใช้ GPU ฟรี
🎮 UnityGame Engineจำลองการเคลื่อนที่ 3 มิติด้วย Vector3
#️⃣ C#ภาษาโปรแกรมเขียนสคริปต์ควบคุมวัตถุใน Unity

🔗 ทุกเครื่องมือฟรี! Python, Colab, Unity (Personal) และ C# (ใน Unity) ใช้งานได้ไม่มีค่าใช้จ่าย

4 / 24

🐍 Python คืออะไร?

ภาษาโปรแกรมยอดนิยม เรียนง่าย ใช้ได้หลากหลาย

  • เรียนรู้ง่าย — ไวยากรณ์คล้ายภาษาอังกฤษ อ่านและเขียนเข้าใจง่าย
  • ใช้งานได้หลากหลาย — Web, Data Science, AI, Automation, Game (Pygame)
  • มีไลบรารีมากมาย — NumPy (คำนวณเวกเตอร์), Pandas (ข้อมูล), Matplotlib (พล็อตกราฟ)
  • ชุมชนใหญ่ — หาคำตอบและความช่วยเหลือได้ง่ายทั่วโลก

ตัวอย่างโค้ด Python พื้นฐาน:

# ประกาศตัวแปรและแสดงผล
name = "CS Student"
scores = [85, 90, 78] # list เปรียบเสมือนเวกเตอร์ 1 มิติ
print(f"ยินดีต้อนรับ {name}!")
print("คะแนนเฉลี่ย:", sum(scores)/len(scores))

✅ ใน Part 2 เราจะใช้ Python + NumPy ในการคำนวณเวกเตอร์โดยตรง

5 / 24

☁️ Google Colab คืออะไร?

Colaboratory — เขียน Python บนคลาวด์ ฟรี! ไม่ต้องติดตั้ง

  • ไม่ต้องติดตั้งซอฟต์แวร์ — ใช้ผ่านเว็บเบราว์เซอร์เท่านั้น
  • เชื่อมต่อกับ Google Drive — บันทึกไฟล์อัตโนมัติ แชร์ง่าย
  • มี GPU / TPU ฟรี — เหมาะกับงาน Machine Learning และการคำนวณหนัก
  • รูปแบบ Notebook — ผสานโค้ด, ผลลัพธ์, และคำอธิบาย (Markdown) ไว้ในไฟล์เดียว
  • ทำงานร่วมกันได้ — แชร์ลิงก์ให้เพื่อนแก้ไขพร้อมกันแบบเรียลไทม์

🚀 เริ่มต้นง่าย: ไปที่ colab.research.google.com → Login Google → สร้าง Notebook ใหม่

💡 ใน Part 2 เราจะรันโค้ด Python บน Colab กัน!

6 / 24

🎮 Unity & #️⃣ C#

เครื่องมือสร้างเกม 3D / 2D ชั้นนำของโลก

Unity คือ Game Engine (เอนจินเกม) ที่รองรับการสร้างเกม, แอนิเมชัน, VR/AR และจำลองสถานการณ์

  • ข้ามแพลตฟอร์ม — สร้างครั้งเดียว เล่นได้ทั้ง PC, Mobile, Console
  • ใช้ C# ในการเขียนสคริปต์ — ควบคุมพฤติกรรมของวัตถุในเกม

C# (ซีชาร์ป) คือภาษาโปรแกรมเชิงวัตถุ (OOP) ที่ทันสมัย มีประสิทธิภาพสูง

  • ไวยากรณ์คล้าย Java และ C++ — แต่เรียนรู้และใช้งานง่ายกว่า
  • โครงสร้าง Vector3 — ใช้แทนตำแหน่ง (x, y, z) และทิศทางใน Unity
// ตัวอย่าง C# ใน Unity: เคลื่อนที่วัตถุ
void Update() {
    Vector3 direction = new Vector3(1, 0, 0);
    transform.position += direction * speed * Time.deltaTime;
}

✅ ใน Part 3 เราจะใช้ Unity + C# เพื่อให้ Cube เคลื่อนที่ด้วยเวกเตอร์

7 / 24

Part 1: GeoGebra Concept Exercise

เวลา 15-20 นาที

จุดประสงค์ หลังทำกิจกรรมนี้ นักศึกษาควรอธิบายได้ว่า

  • เวกเตอร์มีขนาดและทิศทาง
  • เวกเตอร์ \([2, 4]\) หมายถึงเคลื่อนที่ตามแกน x 2 หน่วย และแกน y 4 หน่วย
  • การบวกเวกเตอร์คือการรวมการเคลื่อนที่
  • การคูณเวกเตอร์ด้วยสเกลาร์ทำให้เวกเตอร์ยาวขึ้น สั้นลง หรือกลับทิศทาง

🛠 เครื่องมือ: เปิด GeoGebra Graphing Calculator

8 / 24

กิจกรรม 1.1: สร้างเวกเตอร์จากจุดสองจุด

คำสั่ง:

  1. เปิด GeoGebra
  2. สร้างจุด \(A = (0, 0)\)
  3. สร้างจุด \(B = (2, 4)\)
  4. สร้างเวกเตอร์ \(\overrightarrow{AB}\)
  5. สังเกตทิศทางและความยาว

คำถาม:

  • เวกเตอร์ \(\overrightarrow{AB}\) เคลื่อนที่ไปทางแกน x กี่หน่วย?
  • เวกเตอร์ \(\overrightarrow{AB}\) เคลื่อนที่ไปทางแกน y กี่หน่วย?
  • เวกเตอร์นี้เขียนในรูป list ได้อย่างไร?

คำตอบที่คาดหวัง:

\(\overrightarrow{AB} = [2, 4]\) หมายถึงไปทางแกน x 2 หน่วย และแกน y 4 หน่วย
9 / 24

กิจกรรม 1.2: เปลี่ยนตำแหน่งปลายเวกเตอร์

คำสั่ง: เปลี่ยนจุด B เป็น \(B = (3, 5)\) แล้วสังเกตเวกเตอร์ใหม่

คำถาม:

  • เวกเตอร์ใหม่คืออะไร?
  • เวกเตอร์ใหม่ยาวขึ้นหรือสั้นลงเมื่อเทียบกับ \([2, 4]\)?
  • ทิศทางเปลี่ยนหรือไม่?

คำตอบที่คาดหวัง:

\(\overrightarrow{AB} = [3, 5]\) เวกเตอร์เปลี่ยนทั้งขนาดและทิศทางเล็กน้อย เพราะค่าตามแกน x และ y เปลี่ยน

10 / 24

กิจกรรม 1.3: การบวกเวกเตอร์

คำสั่ง: สร้างเวกเตอร์ \(u = [2, 4]\) และ \(v = [3, 1]\) จากนั้นสร้างผลบวก \(u+v\)

คำถาม:

  • ผลบวกของเวกเตอร์คืออะไร?
  • ถ้าคิดแบบการเคลื่อนที่ หมายความว่าอย่างไร?
  • ผลลัพธ์สุดท้ายอยู่ที่จุดใด ถ้าเริ่มจาก \((0,0)\)?

คำตอบที่คาดหวัง:

\(u+v = [2+3, 4+1] = [5, 5]\)
ถ้าเริ่มจาก (0,0) จะไปสิ้นสุดที่จุด (5,5)
11 / 24

กิจกรรม 1.4: การคูณเวกเตอร์ด้วยสเกลาร์

คำสั่ง: ใช้ \(u = [2, 4]\) แล้วสร้าง \(2u, 0.5u, -u\)

คำถาม:

  • \(2u\) มีขนาดเปลี่ยนอย่างไร?
  • \(0.5u\) มีขนาดเปลี่ยนอย่างไร?
  • \(-u\) มีทิศทางอย่างไร?

คำตอบที่คาดหวัง:

\(2u = [4, 8]\) ยาวขึ้น 2 เท่า
\(0.5u = [1, 2]\) สั้นลงครึ่งหนึ่ง
\(-u = [-2, -4]\) มีทิศทางตรงข้ามกับเวกเตอร์เดิม
12 / 24

Part 2: Python / Data Science

เวลา 20-25 นาที

จุดประสงค์ หลังทำกิจกรรมนี้ นักศึกษาควรอธิบายได้ว่า

  • เวกเตอร์ใน Python สามารถแทนข้อมูลหนึ่งรายการได้
  • NumPy array ใช้แทนเวกเตอร์ได้
  • สามารถบวกเวกเตอร์ คำนวณ dot product และหาขนาดของเวกเตอร์ได้
  • เวกเตอร์ใน Data Science มักใช้เป็น feature vector

🐍 เกร็ดความรู้: Python & NumPy
Python เป็นภาษาโปรแกรมที่นิยมใน Data Science
NumPy เป็นไลบรารีสำหรับคำนวณเวกเตอร์ เมทริกซ์ และการดำเนินการเชิงตัวเลข มีประสิทธิภาพสูง

13 / 24

กิจกรรม 2.1: สร้างเวกเตอร์ข้อมูลนักศึกษา

คำสั่ง: รันโค้ดต่อไปนี้ใน Colab หรือ Jupyter

import numpy as np
student = np.array([70, 165, 3, 85])
print(student)

โดยกำหนดให้ข้อมูลหมายถึง [น้ำหนัก, ส่วนสูง, จำนวนวิชา, คะแนนสอบ]

คำถาม:

  • เวกเตอร์นี้มีทั้งหมดกี่ค่า?
  • ค่า 165 หมายถึงอะไร?
  • ค่า 85 หมายถึงอะไร?
  • เวกเตอร์นี้แทนการเคลื่อนที่หรือแทนข้อมูล?
  • (เพิ่มเติม) ถ้าเราต้องการเปลี่ยนน้ำหนักเป็น 75 และส่วนสูงเป็น 170 จงเขียนเวกเตอร์ใหม่

คำตอบที่คาดหวัง:

เวกเตอร์นี้มี 4 ค่า ค่า 165 หมายถึงส่วนสูง ค่า 85 หมายถึงคะแนนสอบ เวกเตอร์นี้แทนข้อมูล
เวกเตอร์ใหม่: [75, 170, 3, 85]

14 / 24

กิจกรรม 2.2: เปรียบเทียบข้อมูลนักศึกษา 2 คน

student_a = np.array([70, 165, 3, 85])
student_b = np.array([60, 160, 4, 90])
print("Student A:", student_a)
print("Student B:", student_b)

คำถาม:

  • นักศึกษาคนที่ A มีคะแนนสอบเท่าไร?
  • นักศึกษาคนที่ B ลงทะเบียนกี่วิชา?
  • เวกเตอร์ทั้งสองมีจำนวนมิติเท่ากันหรือไม่?
  • ทำไมจำนวนมิติของเวกเตอร์ต้องเท่ากันเมื่อต้องการนำมาบวกกัน?
  • (เพิ่มเติม) ถ้านักศึกษา C มีเวกเตอร์ [65, 175, 3, 95] จงเปรียบเทียบกับ A และ B (คะแนน, น้ำหนัก)

คำตอบที่คาดหวัง: Student A คะแนน 85, Student B ลง 4 วิชา, ทั้งสองมี 4 มิติเท่ากัน, ถ้าบวกต้องบวกที่ตำแหน่งเดียวกัน ดังนั้นมิติต้องเท่ากัน
Student C มีน้ำหนัก 65, สูง 175, เรียน 3 วิชา, คะแนน 95 (สูงกว่า A และ B)

15 / 24

กิจกรรม 2.3: การบวกเวกเตอร์ด้วย NumPy

a = np.array([2, 4])
b = np.array([3, 5])
result = a + b
print(result)

คำถาม:

  • ผลลัพธ์คืออะไร?
  • ผลลัพธ์เหมือนกับที่เห็นใน GeoGebra หรือไม่?
  • การบวกนี้เป็นการบวกแบบ component-wise หรือไม่?
  • (เพิ่มเติม) จงทดลองบวกเวกเตอร์ \(c = [1,2,3]\) และ \(d = [4,5,6]\) ด้วย NumPy แล้วแสดงผล

คำตอบที่คาดหวัง: \([2,4] + [3,5] = [5,9]\) ใช่ เป็นการบวกทีละตำแหน่ง
\(c+d = [5,7,9]\)

16 / 24

กิจกรรม 2.4: Dot Product และ Magnitude

x = np.array([3, 4])
y = np.array([1, 2])
dot = np.dot(x, y)
mag_x = np.linalg.norm(x)
print("Dot:", dot)
print("Magnitude x:", mag_x)

คำถาม:

  • ค่า dot product เท่ากับเท่าไร?
  • ขนาดของ \(x = [3,4]\) เท่ากับเท่าไร?
  • ทำไมขนาดของ \([3,4]\) จึงเท่ากับ 5?
  • Dot product ให้ผลลัพธ์เป็น scalar หรือ vector?
  • (เพิ่มเติม) จงหาขนาดของเวกเตอร์ \([1,2,3]\) และ \([4,5,6]\) และ dot product ของทั้งคู่

คำตอบที่คาดหวัง: \(x\cdot y = 3(1)+4(2)=11\), \(|x| = \sqrt{3^2+4^2}=5\), dot ให้ scalar
\(|[1,2,3]| = \sqrt{14}\), \(|[4,5,6]| = \sqrt{77}\), dot = 1*4+2*5+3*6 = 32

17 / 24

กิจกรรม 2.5: Mini Challenge

คำสั่ง: สร้างเวกเตอร์ของตนเอง 2 ตัว เช่น \(a = [4, 2]\), \(b = [1, 6]\)

คำถาม:

  • จงคำนวณ \(a+b\), \(a-b\), \(2a\), \(-b\) ด้วย NumPy
  • จงคำนวณ \(a\cdot b\) (dot product) และ \(|a|\), \(|b|\)
  • (เพิ่มเติม) ถ้า \(a = [4,2]\) และ \(b = [1,6]\) จงหาเวกเตอร์ \(a+b\), \(a-b\), \(2a\), \(-b\) ด้วยมือแล้วเปรียบเทียบกับผลลัพธ์จาก NumPy
  • (เพิ่มเติม) สร้างเวกเตอร์สุ่ม 2 ตัว (ขนาด 4 มิติ) แล้วคำนวณผลบวก ผลต่าง ดอทโปรดัก และขนาด

คำตอบตัวอย่าง:

a + b = [5, 8]
a - b = [3, -4]
2a = [8, 4]
-b = [-1, -6]
a·b = 4(1)+2(6) = 16
|a| = √(4²+2²) = √20, |b| = √(1²+6²) = √37
18 / 24

Part 3: Unity / Game Development

เวลา 20-25 นาที

จุดประสงค์ หลังทำกิจกรรมนี้ นักศึกษาควรอธิบายได้ว่า

  • Vector3 ใช้แทนตำแหน่งหรือทิศทางใน Unity
  • การบวกเวกเตอร์สามารถใช้เปลี่ยนตำแหน่งวัตถุได้
  • Vector3(1, 0, 0) หมายถึงการเคลื่อนที่ตามแกน x
  • แนวคิดเวกเตอร์ใน Unity เชื่อมโยงกับ GeoGebra และ Python ได้

🎮 เกร็ดความรู้: Unity & C#
Unity เป็นเกมเอนจินยอดนิยม ใช้ภาษา C# ในการเขียนสคริปต์
Vector3 เป็นโครงสร้างข้อมูลสำหรับเวกเตอร์ 3 มิติ (x, y, z) ใช้แทนตำแหน่ง ทิศทาง และความเร็ว

19 / 24

กิจกรรม 3.1: เข้าใจ Vector3

ใน Unity เวกเตอร์ 3 มิติใช้รูปแบบ Vector3(x, y, z)

  • x: ซ้าย-ขวา
  • y: ขึ้น-ลง
  • z: หน้า-หลัง

คำถาม:

  • Vector3(1, 0, 0) หมายถึงทิศทางใด?
  • Vector3(0, 1, 0) หมายถึงทิศทางใด?
  • Vector3(0, 0, 1) หมายถึงทิศทางใด?

คำตอบ: Vector3(1,0,0) = แกน x, (0,1,0) = แกน y, (0,0,1) = แกน z

20 / 24

กิจกรรม 3.2: สร้างสคริปต์ให้วัตถุเคลื่อนที่

คำสั่ง:

  1. สร้าง Cube ใน Unity
  2. สร้าง C# Script ชื่อ VectorMoveDemo
  3. ใส่โค้ดนี้:
using UnityEngine;
public class VectorMoveDemo : MonoBehaviour {
    void Start() {
        Vector3 moveDirection = new Vector3(1, 0, 0);
        transform.position = transform.position + moveDirection;
    }
}

คำถาม:

  • Cube เคลื่อนที่ไปทางแกนใด?
  • ตำแหน่งใหม่เปลี่ยนจากเดิมอย่างไร?
  • บรรทัด transform.position = transform.position + moveDirection; หมายความว่าอะไร?

คำตอบ: เคลื่อนที่ทางแกน x 1 หน่วย, บรรทัดนี้หมายถึง ตำแหน่งใหม่ = ตำแหน่งเดิม + เวกเตอร์การเคลื่อนที่

21 / 24

กิจกรรม 3.3: ทดลองเปลี่ยนทิศทาง

คำสั่ง: เปลี่ยนค่า moveDirection เป็น

  • รอบ 1: new Vector3(0, 1, 0)
  • รอบ 2: new Vector3(0, 0, 1)
  • รอบ 3: new Vector3(1, 1, 0)

คำถาม:

  • รอบที่ 1 Cube เคลื่อนที่ไปทางใด?
  • รอบที่ 2 Cube เคลื่อนที่ไปทางใด?
  • รอบที่ 3 Cube เคลื่อนที่แบบใด?
  • ค่า Vector3(1,1,0) คล้ายกับการบวกเวกเตอร์ใน GeoGebra อย่างไร?

คำตอบ: รอบ 1 ขึ้น (y), รอบ 2 หน้า (z), รอบ 3 แนวทแยงระหว่าง x และ y, คล้ายกับการบวกเวกเตอร์ (1,0,0)+(0,1,0) = (1,1,0)

22 / 24

กิจกรรม 3.4: เคลื่อนที่ต่อเนื่องด้วย Time.deltaTime

using UnityEngine;
public class VectorMoveDemo : MonoBehaviour {
    public float speed = 2.0f;
    void Update() {
        Vector3 moveDirection = new Vector3(1, 0, 0);
        transform.position += moveDirection * speed * Time.deltaTime;
    }
}

คำถาม:

  • Update() ต่างจาก Start() อย่างไร?
  • speed มีหน้าที่อะไร?
  • Time.deltaTime ช่วยเรื่องอะไร?
  • ถ้าเปลี่ยน speed จาก 2 เป็น 5 จะเกิดอะไรขึ้น?

คำตอบ: Start() ทำงานครั้งเดียว, Update() ทำงานทุก frame, speed ควบคุมความเร็ว, Time.deltaTime ทำให้เคลื่อนที่ราบรื่นและสัมพันธ์กับเวลา, ถ้าเพิ่ม speed วัตถุจะเคลื่อนที่เร็วขึ้น

23 / 24

กิจกรรม 3.5: Mini Challenge

คำสั่ง: แก้โค้ดเพื่อให้ Cube เคลื่อนที่แนวทแยงไปข้างหน้าและขวา ใช้ Vector3 moveDirection = new Vector3(1, 0, 1);

คำถาม:

  • Cube เคลื่อนที่ตามแกนใดบ้าง?
  • ถ้าต้องการให้ Cube เคลื่อนที่ขึ้นด้วย ต้องเปลี่ยนเป็นเวกเตอร์อะไร?
  • ถ้าต้องการให้ Cube เคลื่อนที่กลับทิศทาง ต้องทำอย่างไร?

คำตอบ: เคลื่อนที่ตามแกน x และ z (แนวทแยง), ถ้าต้องการขึ้นด้วย ใช้ (1,1,1) หรือ (1,1,0) ตามต้องการ, กลับทิศทางโดยใช้ค่าลบ เช่น (-1,0,0)

💡 สรุป: การใช้เวกเตอร์ใน Unity ช่วยให้ควบคุมการเคลื่อนที่ของวัตถุได้อย่างยืดหยุ่น คล้ายกับที่เราเรียนรู้ใน GeoGebra และ Python

24 / 24

ขอบคุณที่เรียน!

แบบฝึกหัดนี้ครอบคลุมเวกเตอร์ใน 3 มิติ
ทั้งคณิตศาสตร์ วิทยาการข้อมูล และการพัฒนาเกม

📌 จัดทำโดย

deepseek.com

แหล่งข้อมูลเพิ่มเติม: GeoGebra · NumPy · Unity

สไลด์แนะนำ Python, Colab, Unity และ C#

กดลูกศรหรือปุ่มนำทางเพื่อทบทวนอีกครั้ง