โปรแกรมวาดกราฟเส้นตรง(Linear Equation Grapher)

1. ความเป็นมา

โปรแกรมวาดกราฟเส้นตรงนี้ถูกพัฒนาขึ้นเพื่อเป็นเครื่องมือช่วยในการเรียนรู้และทำความเข้าใจเกี่ยวกับสมการเส้นตรงในทางคณิตศาสตร์ โดยเฉพาะอย่างยิ่งสำหรับนักเรียนระดับมัธยมศึกษาตอนปลายและผู้ที่สนใจศึกษาคณิตศาสตร์เบื้องต้น โปรแกรมนี้มีจุดมุ่งหมายที่จะทำให้การมองเห็นภาพของกราฟเส้นตรงเป็นเรื่องง่ายและเข้าใจได้มากยิ่งขึ้น

2. วัตถุประสงค์

  • แสดงผลกราฟ: แสดงกราฟของสมการเส้นตรงที่ผู้ใช้ป้อนค่าความชัน (m) และจุดตัดแกน y (c)
  • สร้างความเข้าใจ: ช่วยให้นักเรียนเข้าใจความสัมพันธ์ระหว่างค่าความชันและจุดตัดแกน y กับรูปร่างของกราฟ
  • ฝึกฝนทักษะ: ฝึกให้นักเรียนสามารถวาดกราฟเส้นตรงได้อย่างถูกต้องและรวดเร็ว
  • เป็นเครื่องมือช่วยสอน: อาจารย์สามารถนำโปรแกรมนี้ไปใช้เป็นสื่อการสอนในการอธิบายบทเรียนเกี่ยวกับสมการเส้นตรง

3. ขอบเขต

  • สมการเส้นตรง: โปรแกรมนี้รองรับเฉพาะสมการเส้นตรงในรูปแบบ y = mx + c
  • การแสดงผล: แสดงกราฟบนหน้าจอคอมพิวเตอร์
  • อินเทอร์เฟซ: มีอินเทอร์เฟซที่เรียบง่ายและใช้งานง่าย

4. ประโยชน์ที่คาดว่าจะได้รับ

  • นักเรียน: ช่วยให้นักเรียนเข้าใจแนวคิดเกี่ยวกับสมการเส้นตรงได้ดียิ่งขึ้น สามารถนำไปประยุกต์ใช้ในการแก้ปัญหาทางคณิตศาสตร์ได้
  • ครู: สามารถนำโปรแกรมนี้ไปใช้เป็นสื่อการสอนเพื่อเพิ่มประสิทธิภาพในการสอน
  • ผู้สนใจทั่วไป: สามารถใช้โปรแกรมนี้เพื่อตรวจสอบคำตอบของการวาดกราฟ หรือใช้ในการศึกษาคณิตศาสตร์เพิ่มเติม

5. ความรู้ที่เกี่ยวข้อง

  • คณิตศาสตร์: สมการเส้นตรง, ระบบพิกัดคาร์ทีเซียน
  • ภาษาโปรแกรม: HTML, CSS, JavaScript
  • การวาดกราฟ: การใช้ canvas เพื่อวาดกราฟ

6. สรุปวิธีการใช้โปรแกรม

  1. ป้อนค่าความชัน (m) และจุดตัดแกน y (c) ลงในช่องที่กำหนด
  2. คลิกปุ่ม “วาดกราฟ”
  3. โปรแกรมจะแสดงกราฟของสมการเส้นตรงบนหน้าจอ

7. สรุปผลการทดลอง

โปรแกรมสามารถรับค่าความชันและจุดตัดแกน y แล้วสามารถแสดงกราฟออกมาได้อย่างสมบรูณ์

8. การทำงานของโปรแกรม

  • การรับค่า input:
    • const m = parseFloat(document.getElementById('slope').value);
    • const c = parseFloat(document.getElementById('yIntercept').value);
    • คำสั่งนี้จะไปดึงค่าที่ผู้ใช้ป้อนเข้ามาในช่อง input ที่มี id ว่า ‘slope’ และ ‘yIntercept’ มาเก็บไว้ในตัวแปร m และ c ตามลำดับ และแปลงค่าที่ได้เป็นจำนวนทศนิยม
  • การเตรียม canvas:
    • const canvas = document.getElementById('myCanvas');
    • const ctx = canvas.getContext('2d');
    • คำสั่งนี้จะไปดึงองค์ประกอบ canvas ที่มี id ว่า ‘myCanvas’ มาเก็บไว้ในตัวแปร canvas และสร้าง context 2D เพื่อใช้ในการวาด
  • การล้าง canvas:
    • ctx.clearRect(0, 0, canvas.width, canvas.height);
    • คำสั่งนี้จะล้างพื้นที่ทั้งหมดบน canvas เพื่อเตรียมพร้อมสำหรับการวาดใหม่
  • การวาดแกน:
    • ctx.beginPath(); เริ่มต้นการวาดเส้นใหม่
    • ctx.moveTo(x, y); ย้ายปากกาไปยังพิกัด (x, y)
    • ctx.lineTo(x, y); วาดเส้นตรงจากตำแหน่งปัจจุบันไปยังพิกัด (x, y)
    • ctx.stroke(); วาดเส้นที่กำหนดไว้
  • การวาดเส้นตรง:
    • คำนวณพิกัดของจุดสองจุดบนเส้นตรงตามสมการ y = mx + c
    • ใช้ moveTo() และ lineTo() เพื่อวาดเส้นเชื่อมระหว่างสองจุดนั้น
  • การเพิ่มป้ายกำกับและสเกล:
    • ctx.fillText(): ใช้สำหรับเขียนข้อความ เช่น ป้ายกำกับแกน x และแกน y
    • ctx.moveTo() และ lineTo(): ใช้สำหรับวาดเส้นเล็กๆ เพื่อเป็นสเกล
  • ลูป for: ใช้สำหรับวาดสเกลซ้ำๆ ตามจำนวนที่ต้องการ

สรุป

โปรแกรมนี้ทำงานโดยการรับค่าความชันและจุดตัดแกน y จากผู้ใช้ จากนั้นนำค่าเหล่านั้นไปคำนวณเพื่อหาพิกัดของจุดต่างๆ บนเส้นตรง และใช้ canvas เพื่อวาดเส้นตรงตามพิกัดที่คำนวณได้ โดยมีการแสดงแกน x และแกน y พร้อมทั้งป้ายกำกับเพื่อให้ง่ายต่อการอ่านค่า

9.โค้ดโปรแกรม

<!DOCTYPE html>
<html>
<head>
    <title>โปรแกรมวาดกราฟเส้นตรง</title>
	<h1>คำนวณสมการเส้นตรง(Linear Equation Grapher)</h1>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <label for="slope">ความชัน (m):</label>
    <input type="number" id="slope">
    <br>
    <label for="yIntercept">จุดตัดแกน y (c):</label>
    <input type="number" id="yIntercept">
    <br>
    <button onclick="drawGraph()">วาดกราฟ</button>
    <canvas id="myCanvas" width="400" height="300"></style>

    <script>
        function drawGraph() {
            // Get values from input fields
            const m = parseFloat(document.getElementById('slope').value);
            const c = parseFloat(document.getElementById('yIntercept').value);

            // Get canvas context
            const canvas = document.getElementById('myCanvas');
            const ctx = canvas.getContext('2d');

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

            // Draw axes
            ctx.beginPath();
            ctx.moveTo(0, canvas.height / 2); // แกน y
            ctx.lineTo(canvas.width, canvas.height / 2);
            ctx.moveTo(canvas.width / 2, 0); // แกน x
            ctx.lineTo(canvas.width / 2, canvas.height);
            ctx.strokeStyle = 'black'; // สีของแกน
            ctx.stroke();

            // Draw line
            ctx.beginPath();
            // เลือกจุดสองจุดบนเส้นตรง (ปรับค่าได้ตามต้องการ)
            const x1 = 0;
            const y1 = m * x1 + c;
            const x2 = canvas.width;
            const y2 = m * x2 + c;
            ctx.moveTo(x1, canvas.height - y1); // พลิกแกน y
            ctx.lineTo(x2, canvas.height - y2);
            ctx.strokeStyle = 'blue'; // สีของเส้นตรง
            ctx.stroke();

            // Add labels and scale
            ctx.font = '12px Arial';
            ctx.fillText('แกน Y', 5, 10);
            ctx.fillText('แกน X', canvas.width - 30, canvas.height - 5);

            // Add scale (ปรับค่าได้ตามต้องการ)
            for (let i = 0; i <= canvas.width; i += 50) {
                ctx.beginPath();
                ctx.moveTo(i, canvas.height / 2 - 5);
                ctx.lineTo(i, canvas.height / 2 + 5);
                ctx.stroke();
                ctx.fillText(i / 20, i, canvas.height / 2 + 15); // ปรับค่าเพื่อปรับขนาดสเกล
            }
            for (let i = 0; i <= canvas.height; i += 50) {
                ctx.beginPath();
                ctx.moveTo(canvas.width / 2 - 5, i);
                ctx.lineTo(canvas.width / 2 + 5, i);
                ctx.stroke();
                ctx.fillText(-i / 20 + canvas.height / 40, canvas.width / 2 - 20, i); // ปรับค่าเพื่อปรับขนาดสเกล
            }
        }
    </script>
</body>
</html>


You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *