ผู้เขียนบทความ : นายอดิเทพ พลายด้วง
คณะวิศวกรรมศาสตร์ : สาขาวิชาวิศวกรรมไฟฟ้า
วิชา : 04000104 การโปรแกรมคอมพิวเตอร์ 1/2567
1.ความเป็นมา
การคำนวณสมการการเคลื่อนที่ในแนวตรงเป็นพื้นฐานสำคัญของฟิสิกส์ ซึ่งใช้ในการศึกษาวัตถุที่เคลื่อนที่ในแนวตรงภายใต้ความเร่งต่าง ๆ โปรแกรมนี้ถูกพัฒนาขึ้นเพื่อช่วยให้การคำนวณและการเข้าใจเรื่องการเคลื่อนที่ในแนวตรงเป็นเรื่องง่าย โดยการจำลองภาพการเคลื่อนที่ของวัตถุในรูปแบบกราฟิกเพื่อเพิ่มความรู้เพิ่มความเข้าใจในการเรียนให้ได้มีประสิทธิภาพเพิ่มยิ่งขึ้น
2.วัตถุประสงค์
- เพื่อช่วยให้ผู้ใช้สามารถคำนวณระยะทางที่วัตถุเคลื่อนที่ได้ภายใต้ความเร็วและความเร่ง
- เพื่อเพิ่มความรู้ความเข้าใจในเรื่องของการเคลื่อนที่ในฟิสิกส์
- เพื่อแสดงภาพกราฟิกการเคลื่อนที่ของวัตถุให้ผู้ใช้เห็นการเคลื่อนที่ในลักษณะจำลอง
- เพื่อให้การเรียนรู้เป็นอย่างสนุกสนานน่าสนใจ
3.ขอบเขต
• คำนวณระยะทางที่วัตถุเคลื่อนที่ในแนวตรงภายใต้ความเร็วและความเร่ง
• แสดงภาพกราฟิกการเคลื่อนที่ของวัตถุที่เป็นหัวกระสุน
• สามารถปรับค่าเริ่มต้นของความเร็ว ความเร่ง และเวลาในการคำนวณ
4.ประโยชน์ที่คาดว่าจะได้รับ
• เข้าใจพื้นฐานของการเคลื่อนที่ในแนวตรงได้ง่ายขึ้นผ่านการคำนวณและแอนิเมชัน
• สามารถใช้เป็นเครื่องมือช่วยในการเรียนการสอนฟิสิกส์
• เห็นภาพการเคลื่อนที่ของวัตถุในลักษณะจำลองเสมือนจริง
5.ความรู้ที่เกี่ยวข้อง
• ฟิสิกส์พื้นฐานเรื่องการเคลื่อนที่ในแนวตรง
• สูตรการคำนวณระยะทาง
• การใช้ภาษา HTML, CSS และ JavaScript ในการสร้างโปรแกรมคำนวณและแอนิเมชัน
6.การดำเนินงาน
• การออกแบบอินเทอร์เฟซสำหรับรับข้อมูลและแสดงผลลัพธ์
• การเขียนโปรแกรมคำนวณระยะทางที่วัตถุเคลื่อนที่โดยใช้สูตรการเคลื่อนที่ในแนวตรง
• การเขียนแอนิเมชันเพื่อแสดงภาพการเคลื่อนที่ของวัตถุให้สัมพันธ์กับการคำนวณ
7.วิธีใช้งานโปรแกรม
- กรอกค่าความเร็วเริ่มต้น ความเร่ง และเวลาในช่องข้อมูลที่เตรียมไว้
2. กดปุ่ม “คำนวณและแสดงผล” เพื่อเริ่มการคำนวณระยะทางและแสดงภาพการเคลื่อนที่
3. โปรแกรมจะแสดงระยะทางที่วัตถุเคลื่อนที่ได้ และแสดงแอนิเมชันวัตถุเคลื่อนที่ตามความเร็วและเวลาที่กำหนด
8.การทดลอง
ทดลองใช้โปรแกรมโดยกรอกข้อมูลหลายค่าเพื่อดูผลการคำนวณและแอนิเมชันการเคลื่อนที่ที่เกิดขึ้น เช่น การตั้งค่าให้ความเร่งมีค่าเป็นบวกหรือลบเพื่อดูการเปลี่ยนแปลงในระยะทางที่คำนวณได้
9.เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพ
• ปรับการใช้เทคโนโลยี Canvas และ JavaScript ให้เหมาะสมกับการแสดงแอนิเมชันที่ซับซ้อนขึ้น
• เพิ่มตัวเลือกการปรับแต่ง เช่น ความหน่วงของวัตถุและแรงต้านทานของอากาศ
10.สรุปผลและข้อเสนอแนะ
โปรแกรมสามารถช่วยให้ผู้ใช้เข้าใจการเคลื่อนที่ในแนวตรงได้ง่ายขึ้นผ่านการจำลองกราฟิก อย่างไรก็ตาม ควรพัฒนาฟีเจอร์เพิ่มเติม เช่น การปรับแรงเสียดทานหรือการแสดงกราฟความสัมพันธ์ระหว่างความเร็วและระยะทาง
11.ข้อมูลอ้างอิง
• หนังสือฟิสิกส์พื้นฐานเกี่ยวกับการเคลื่อนที่ในแนวตรง
• คู่มือการพัฒนาเว็บด้วย HTML, CSS, JavaScript
โค้ทสำหรับการทดลองใช้งาน
<!DOCTYPE html>
<html>
<head>
<title>Linear Distance Calculator</title> <!-- ชื่อของหน้าเพจแสดงในแท็บเบราว์เซอร์ -->
<style>
/* CSS styles */
body {
font-family: Arial, sans-serif; /* ฟอนต์ Arial */
text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
background-image: url('images 2.jpg'); /* ใช้ภาพเป็นพื้นหลัง */
background-size: cover; /* ทำให้ภาพคลุมเต็มหน้าจอ */
background-position: center; /* จัดตำแหน่งภาพพื้นหลังให้อยู่ตรงกลาง */
background-attachment: fixed; /* ทำให้ภาพพื้นหลังคงที่เมื่อเลื่อนหน้า */
color: #333; /* กำหนดสีข้อความเป็นสีเทาเข้ม */
}
h1 {
color: #ff0000; /* กำหนดสีของหัวข้อเป็นสีแดง */
}
p {
color: #ccff00; /* กำหนดสีข้อความของย่อหน้าเป็นสีเหลืองอมเขียว */
}
form {
margin-bottom: 30px; /* กำหนดระยะห่างจากฟอร์มด้านล่าง 30px */
padding: 20px; /* กำหนดระยะห่างภายในฟอร์ม 20px */
background-color: rgba(200, 210, 255, 0.8); /* กำหนดสีพื้นหลังพร้อมความโปร่งใส */
border-radius: 10px; /* ทำให้มุมของฟอร์มโค้งมน */
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.1); /* ใส่เงาบางๆ ให้กับฟอร์ม */
}
input {
padding: 5px; /* ระยะห่างภายในของอินพุต */
margin: 10px; /* ระยะห่างระหว่างอินพุต */
border: 2px solid#ecf0f1; /* สีของเส้นขอบอินพุต */
border-radius: 5px; /* มุมของอินพุตโค้งมน */
font-size: 16px; /* ขนาดฟอนต์ของอินพุต */
}
button {
padding: 10px 20px; /* ระยะห่างภายในของปุ่ม */
background-color: #3498db; /* สีพื้นหลังของปุ่ม */
color: white; /* สีของข้อความในปุ่ม */
border: none; /* ไม่มีเส้นขอบของปุ่ม */
border-radius: 8px; /* มุมของปุ่มโค้งมน */
cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อเอาเมาส์ชี้เป็นมือ */
font-size: 16px; /* ขนาดฟอนต์ของปุ่ม */
}
button:hover {
background-color: #2980b9; /* เปลี่ยนสีพื้นหลังเมื่อเอาเมาส์ชี้ที่ปุ่ม */
}
#canvas {
border: 2px solid #2980b9; /* เส้นขอบของแคนวาส */
margin-top: 20px; /* ระยะห่างจากด้านบน */
border-radius: 10px; /* มุมของแคนวาสโค้งมน */
background-color: #ecf0f1; /* พื้นหลังของแคนวาสเป็นสีเทาอ่อน */
}
#distance-traveled, #time-traveled {
font-size: 18px; /* ขนาดฟอนต์ */
font-weight: bold; /* ทำให้ข้อความหนา */
margin-top: 10px; /* ระยะห่างจากด้านบน */
color: #27ae60; /* สีข้อความเป็นสีเขียว */
}
h2 {
color: #ff3333; /* สีหัวข้อเป็นสีแดงเข้ม */
margin-top: 30px; /* ระยะห่างจากด้านบน */
}
</style>
</head>
<body>
<h1>คำนวนระยะทางในแนวราบ</h1> <!-- หัวข้อหลักของหน้า -->
<form>
<label for="initialVelocity">ความเร็วเริ่มต้น (u) m/s:</label> <!-- ป้ายข้อความสำหรับใส่ความเร็วเริ่มต้น -->
<input type="number" id="initialVelocity" name="initialVelocity"><br><br> <!-- อินพุตสำหรับรับค่าความเร็วเริ่มต้น -->
<label for="acceleration">ความเร่ง (a) m/s²:</label> <!-- ป้ายข้อความสำหรับใส่ค่าความเร่ง -->
<input type="number" id="acceleration" name="acceleration"><br><br> <!-- อินพุตสำหรับรับค่าความเร่ง -->
<label for="time">เวลา (t) s:</label> <!-- ป้ายข้อความสำหรับใส่เวลา -->
<input type="number" id="time" name="time"><br><br> <!-- อินพุตสำหรับรับค่าเวลา -->
<button type="button" onclick="calculateAndAnimate()">คำนวณและแสดงผล</button> <!-- ปุ่มสำหรับคำนวณและเริ่มแอนิเมชัน -->
</form>
<p id="result"></p> <!-- ข้อความแสดงผลลัพธ์การคำนวณ -->
<canvas id="canvas" width="500" height="200"></canvas> <!-- แคนวาสสำหรับแสดงแอนิเมชันการเคลื่อนที่ของวัตถุ -->
<p id="distance-traveled">ระยะทางที่วัตถุเคลื่อนที่ได้: 0 เมตร</p> <!-- ข้อความแสดงระยะทางที่เคลื่อนที่ -->
<p id="time-traveled">เวลาที่วัตถุวิ่ง: 0 วินาที</p> <!-- ข้อความแสดงเวลาที่เคลื่อนที่ -->
<h2>ตัวอย่างการเคลื่อนที่ของวัตถุ</h2> <!-- หัวข้อย่อยของส่วนแอนิเมชัน -->
<script>
function calculateDistance(u, a, t) {
return u * t + 0.5 * a * t * t; <!-- สูตรการคำนวณระยะทาง s = ut + (1/2)at^2 -->
}
function calculateAndAnimate() {
const u = parseFloat(document.getElementById("initialVelocity").value); <!-- รับค่าความเร็วเริ่มต้นจากอินพุต -->
const a = parseFloat(document.getElementById("acceleration").value); <!-- รับค่าความเร่งจากอินพุต -->
const t = parseFloat(document.getElementById("time").value); <!-- รับค่าเวลาจากอินพุต -->
if (isNaN(u) || isNaN(a) || isNaN(t) || t < 0) { <!-- ตรวจสอบว่าค่าทั้งหมดเป็นตัวเลขและเวลาไม่ติดลบ -->
alert("กรุณากรอกข้อมูลให้ครบและถูกต้อง"); <!-- แจ้งเตือนเมื่อกรอกข้อมูลไม่ถูกต้อง -->
return;
}
const s = calculateDistance(u, a, t); <!-- คำนวณระยะทางที่เคลื่อนที่ได้ -->
document.getElementById("result").innerHTML = "ระยะทางที่เคลื่อนที่ได้ = " + s + " เมตร"; <!-- แสดงผลลัพธ์ในหน้าเว็บ -->
animateMotion(u, a, s, t); <!-- เรียกใช้ฟังก์ชัน animateMotion เพื่อเริ่มแอนิเมชัน -->
}
function getRandomColor() {
const letters = '0123456789ABCDEF'; <!-- สุ่มตัวอักษรและตัวเลข -->
let color = '#'; <!-- กำหนดค่าของสีเริ่มต้นด้วย # -->
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]; <!-- สร้างรหัสสีแบบ HEX -->
}
return color; <!-- ส่งค่าสีที่สุ่มกลับไป -->
}
function animateMotion(u, a, totalDistance, totalTime) {
const canvas = document.getElementById("canvas"); <!-- ดึงแคนวาสมาใช้ -->
const ctx = canvas.getContext("2d"); <!-- กำหนดบริบทการวาดแบบ 2 มิติ -->
let positionX = 50; <!-- ตำแหน่งเริ่มต้นของวัตถุ -->
const objectLength = 30; <!-- ความยาวของวัตถุ -->
const objectHeight = 15; <!-- ความสูงของวัตถุ -->
let currentT = 0; <!-- เวลาเริ่มต้นที่ 0 -->
let currentV = u; <!-- ความเร็วปัจจุบันเริ่มต้นด้วยความเร็วเริ่มต้น -->
let objectColor = getRandomColor(); <!-- สุ่มสีของวัตถุ -->
let backgroundColor = getRandomColor(); <!-- สุ่มสีพื้นหลัง -->
const interval = 10; <!-- ระยะเวลาของแต่ละเฟรม (10 มิลลิวินาที) -->
const canvasWidth = canvas.width - 100; <!-- กำหนดขนาดพื้นที่วาด -->
ctx.clearRect(0, 0, canvas.width, canvas.height); <!-- ลบเนื้อหาทั้งหมดของแคนวาสก่อนเริ่มวาด -->
function drawBullet(x) {
ctx.beginPath(); <!-- เริ่มการวาดเส้น -->
ctx.moveTo(x, canvas.height / 2 - objectHeight / 2); <!-- วาดจากจุดบนของวัตถุ -->
ctx.lineTo(x + objectLength, canvas.height / 2); <!-- วาดไปจุดด้านหน้า -->
ctx.lineTo(x, canvas.height / 2 + objectHeight / 2); <!-- วาดถึงจุดล่างของวัตถุ -->
ctx.closePath(); <!-- ปิดรูปร่าง -->
ctx.fillStyle = objectColor; <!-- กำหนดสีของวัตถุ -->
ctx.fill(); <!-- เติมสีวัตถุ -->
}
function update() {
if (currentT <= totalTime) { <!-- เช็คว่าการเคลื่อนที่ยังไม่จบ -->
currentT += interval / 1000; <!-- เพิ่มเวลาในแต่ละเฟรม -->
currentV = u + a * currentT; <!-- คำนวณความเร็วปัจจุบัน -->
const currentS = calculateDistance(u, a, currentT); <!-- คำนวณระยะทางปัจจุบัน -->
ctx.clearRect(0, 0, canvas.width, canvas.height); <!-- ลบแคนวาสก่อนวาดใหม่ -->
ctx.fillStyle = backgroundColor; <!-- กำหนดสีพื้นหลัง -->
ctx.fillRect(0, 0, canvas.width, canvas.height); <!-- วาดพื้นหลังใหม่ -->
ctx.fillStyle = "lightgray"; <!-- กำหนดสีทางวิ่ง -->
ctx.fillRect(50, canvas.height / 2 - 2, canvas.width - 100, 4); <!-- วาดเส้นทางวิ่ง -->
drawBullet(50 + (currentS / totalDistance) * (canvas.width - 100)); <!-- วาดวัตถุตามตำแหน่ง -->
positionX = 50 + (currentS / totalDistance) * canvasWidth; <!-- อัปเดตตำแหน่งของวัตถุ -->
document.getElementById("distance-traveled").innerHTML = "ระยะทางที่วัตถุเคลื่อนที่ได้: " + currentS.toFixed(2) + " เมตร"; <!-- อัปเดตระยะทาง -->
document.getElementById("time-traveled").innerHTML = "เวลาที่วัตถุวิ่ง: " + currentT.toFixed(2) + " วินาที"; <!-- อัปเดตเวลา -->
requestAnimationFrame(update); <!-- เรียกตัวเองใหม่เพื่อทำแอนิเมชันต่อ -->
} else {
document.getElementById("distance-traveled").innerHTML = "ระยะทางที่วัตถุเคลื่อนที่ได้: " + totalDistance.toFixed(2) + " เมตร"; <!-- แสดงผลระยะทางสุดท้าย -->
document.getElementById("time-traveled").innerHTML = "เวลาที่วัตถุวิ่ง: " + totalTime.toFixed(2) + " วินาที"; <!-- แสดงผลเวลาสุดท้าย -->
}
}
update(); <!-- เริ่มฟังก์ชันแอนิเมชัน -->
}
</script>
</body>
</html>ฟังก์ชั่นที่หน้าสนใจ
1.calculateDistance(u, a, t)
• ฟังก์ชันคำนวณระยะทาง: ฟังก์ชันนี้ใช้สมการการเคลื่อนที่ของวัตถุในแนวราบ โดยใช้สูตร เพื่อคำนวณระยะทาง (s) ที่วัตถุเคลื่อนที่ได้จากความเร็วเริ่มต้น (u), ความเร่ง (a), และเวลา (t)
function calculateDistance(u, a, t) {
return u * t + 0.5 * a * t * t;
}2.calculateAndAnimate()
• ฟังก์ชันหลักสำหรับการคำนวณและแสดงผลการเคลื่อนที่: ฟังก์ชันนี้รับค่าต่าง ๆ จากผู้ใช้ (u, a, t) และคำนวณระยะทางโดยใช้ฟังก์ชัน calculateDistance หากข้อมูลที่ป้อนเข้าถูกต้อง จะแสดงผลการคำนวณและเรียกใช้ฟังก์ชัน animateMotion() เพื่อเริ่มต้นการแสดงผลการเคลื่อนที่ของวัตถุfunction calculateAndAnimate() {
const u = parseFloat(document.getElementById("initialVelocity").value);
const a = parseFloat(document.getElementById("acceleration").value);
const t = parseFloat(document.getElementById("time").value);
if (isNaN(u) || isNaN(a) || isNaN(t) || t < 0) {
alert("กรุณากรอกข้อมูลให้ครบและถูกต้อง");
return;
}
const s = calculateDistance(u, a, t);
document.getElementById("result").innerHTML = "ระยะทางที่เคลื่อนที่ได้ = " + s + " เมตร";
animateMotion(u, a, s, t);
}3.getRandomColor()
• ฟังก์ชันสร้างสีแบบสุ่ม: ฟังก์ชันนี้สร้างสีแบบสุ่มในรูปแบบของค่าสี HEX และนำไปใช้ในการระบายสีวัตถุและพื้นหลังของแอนิเมชันfunction getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}4.animateMotion(u, a, totalDistance, totalTime)
• ฟังก์ชันแอนิเมชันการเคลื่อนที่: ฟังก์ชันนี้แสดงการเคลื่อนที่ของวัตถุในแนวราบโดยใช้ Canvas สำหรับการวาดแอนิเมชัน มีการคำนวณตำแหน่งปัจจุบันของวัตถุจากสมการการเคลื่อนที่ และทำการอัพเดตวัตถุที่เคลื่อนที่ไปในแนวราบตามเวลาที่เปลี่ยนแปลงfunction animateMotion(u, a, totalDistance, totalTime) {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let positionX = 50;
const objectLength = 30;
const objectHeight = 15;
let currentT = 0;
let currentV = u;
let objectColor = getRandomColor();
let backgroundColor = getRandomColor();
const interval = 10;
const canvasWidth = canvas.width - 100;
ctx.clearRect(0, 0, canvas.width, canvas.height);
function drawBullet(x) {
ctx.beginPath();
ctx.moveTo(x, canvas.height / 2 - objectHeight / 2);
ctx.lineTo(x + objectLength, canvas.height / 2);
ctx.lineTo(x, canvas.height / 2 + objectHeight / 2);
ctx.closePath();
ctx.fillStyle = objectColor;
ctx.fill();
}
function update() {
if (currentT <= totalTime) {
currentT += interval / 1000;
currentV = u + a * currentT;
const currentS = calculateDistance(u, a, currentT);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "lightgray";
ctx.fillRect(50, canvas.height / 2 - 2, canvas.width - 100, 4);
drawBullet(50 + (currentS / totalDistance) * (canvas.width - 100));
document.getElementById("distance-traveled").innerHTML = "ระยะทางที่วัตถุเคลื่อนที่ได้: " + currentS.toFixed(2) + " เมตร";
document.getElementById("time-traveled").innerHTML = "เวลาที่วัตถุวิ่ง: " + currentT.toFixed(2) + " วินาที";
requestAnimationFrame(update);
} else {
document.getElementById("distance-traveled").innerHTML = "ระยะทางที่วัตถุเคลื่อนที่ได้: " + totalDistance.toFixed(2) + " เมตร";
document.getElementById("time-traveled").innerHTML = "เวลาที่วัตถุวิ่ง: " + totalTime.toFixed(2) + " วินาที";
}
}
update();
}
