หน่วยการเรียนรู้ที่ 10

1. หน่วยการเรียนรู้ที่ 10 การออกแบบและพัฒนาโปรแกรมขนาดเล็ก

2. บทนำ • ภาษาคอมพิวเตอร์ยุคใหม่เป็นภาษา (OOP : Object Oriented Programming)โดยเขียนโปรแกรมเป็นโมดูลย่อยๆ แต่ละโมดูลมีการทำงานแยกเป็นอิสระไม่ขึ้นต่อกัน มีการติดต่อกับผู้ใช้ด้วยภาพ (GUI : Graphics User Interface) เช่น การคลิกเมาส์ที่ภาพ หรือคลิกทีปุ่มใดปุ่มหนึ่งที่กำหนดไว้บนจอภาพ

3. การเขียนโปรแกรมด้วยภาษาวิชวลเบสิกการเขียนโปรแกรมด้วยภาษาวิชวลเบสิก ฟอร์ม (Form) ใช้เป็นแผ่นภาพสำหรับการแสดงผลเหมือนจอฉายภาพยนตร์ ผู้ใช้สามารถเขียนโปรแกรมลงฟอร์มได้มากกว่าหนึ่งฟอร์ม คำสั่งที่ใช้ในการเขียนโปรแกรมสามารถใช้คำสั่งพื้นฐานที่เป็นมาตรฐานของภาษาทั่วไป เช่น การวาดเส้น วาดวงกลม สร้างรูปทรงเรขาคณิตต่างๆ และการนำเครื่องมือ (Control) จากกล่องเครื่องมือมาวางลงในฟอร์ม แล้วเขียนคำสั่งให้เครื่องมือนั้นทำงาน คอนโทรลที่วางลงในฟอร์มแล้วจัดเป็นวัตถุ (Object) หนึ่งในฟอร์ม

4. 1.โหมดของจอภาพ • การกำหนดขนาดของจอภาพขึ้นอยู่กับการตั้งค่า (Setting)ในคำสั่ง Display ของวินโดวส์เช่น 640 x 480 หมายถึง จอภาพมีความกว้าง Scale Width เท่ากับ 640 จุดแสงหรือพิกเซล (Pixel) โดยเริ่มที่ด้านซ้ายสุดของจอเป็น 0 และมีความสูง 480 พิกเซล เรียกว่า Scale Height โดยเริ่มที่ด้านบนซ้ายของจอเป็น 0 ปกตินิยมตั้งค่าเป็น 800 x 600 หรือมากกว่า ตำแหน่งมุมบนซ้ายของจอภาพคือคู่ลำดับที่ 0,0 หมายถึงค่า X = 0 และ Y=0 อักษร X และ Y จึงเป็นคำสงวน (Reserve Word) ของภาษา ไม่ควรตั้งชื่อเป็นตัวแปร เพราะจะทำให้โปรแกรมผิดพลาดได้

5. 1.โหมดของจอภาพ • ในโปรแกรมของแต่ละภาษาจะมีคำสั่งกำหนด สามารถกำหนด Scale Mode ใน Properties ของฟอร์มเป็นแบบ Twip, Pixel, Point และอื่นๆ หลังจากกำหนดค่าแล้วให้ดูค่าสูงสุดที่ Scale Width และ Scale Height เพื่อกำหนดขนาดและตำแหน่งของวัตถุ เป็นต้น

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

7. 2.1การสร้างวงกลม • จุดศูนย์กลางจะกำหนดเป็นคู่ลำดับของจุดบนแกน Xและแกน Y ของค่าพิกเซลที่ตั้งไว้ เช่น จอที่กำหนดความละเอียดของจุดไว้ 800 x 600 จุดศูนย์กลางคือ X= 400, Y = 300 • ไวยากรณ์หรือวากยสัมพันธ์ (Syntax) ของคำสั่ง เป็นกฎเกณฑ์ในการผูกประโยคคำสั่งของภาษาคอมพิวเตอร์ แบ่งเป็นวากยสัมพันธ์ที่อยู่ในมาตรฐาน ANSI ใช้ได้กับทุกภาษา คำสั่งวาดวงกลมและเส้นที่เป็นคำสั่งอยู่ในมาตรฐาน ANSI มีรูปแบบดังนี้ Object.Circle [Step](x, y), radius [color, start, end, aspect]

8. ส่วนของคำสั่ง ความหมาย Object วัตถุที่ใช้วาดรูป เช่น ฟอร์ม Picture, Image เป็นต้น Step คำสั่งหลักที่ระบุจุดศูนย์กลางของวงกลมในวัตถุที่วาดรูป เช่น CurrentX, CurrentYเป็นต้น (x, y) คู่ลำดับที่ใช้กำหนดจุดศูนย์กลางของวงกลม radius ตัวเลขกำหนดความยาวของเส้นรัศมีวงกลม color กำหนดสีของเส้นรอบวงโดยใช้ฟังก์ชั่น QBColor (n) หรือ RGB (255, 255, 255) เป็นการกำหนดสีแบบ 24 บิตโดยกำหนดตามค่า แม่สีทางแสงคือ แดง เขียว และน้ำเงิน แต่ละสีมีค่า 0-255 ค่า ถ้ากำหนดเป็น RGB (0, 0, 0) จะได้สีดำ RGB (255, 0, 0) สีแดง (0, 255, 0) สีเขียว

9. ส่วนของคำสั่ง ความหมาย Start, end ตัวเลขกำหนดจุดเริ่มต้นและจุดสิ้นสุดในการวาดส่วนของวงกลม มีค่าระหว่าง -2 Pi Radians ถึง 2 Pi Radians ถ้าเป็นวงกลมเต็มวงค่าปกติจะเริ่มที่ -2 Pi Radians ถึง 2 * Pi Radians aspect กำหนดอัตราส่วนของวงรี ต้องมีค่ามากกว่า 1 โดยวงกลมปกติจะมีอัตราส่วน เป็น 1

10. ตัวอย่าง คำสั่ง Circle (100, 200), 80 อธิบาย วาดกลมที่ตำแหน่ง X =100, Y= 200 รัศมีเป็น 80 จุด คำสั่ง Circle (100, 200), 80, RGB (255, 0, 0) อธิบาย วาดกลมที่ตำแหน่ง X =100, Y= 200 รัศมีเป็น 80 จุด เส้นรอบวงสีแดง คำสั่ง Circle (100, 200), 80, , 0, 3) อธิบาย วาดส่วนวงกลมตั่งแต่ตำแหน่ง 0 ถึง 3 รัศมี 80 จุด คำสั่ง Circle (100, 200), 80, , , , 2) อธิบาย วาดวงรีที่มีอัตราส่วนของวงรีเท่ากับ 2

11. ตัวอย่างการสร้างวงกลมตัวอย่างการสร้างวงกลม วัตถุประสงค์ ต้องการสร้างวงกลมเรียงช้อนกันจากจุดศูนย์กลางของจอไปจนสุดขอบจอภาพ เขียนเป็นรหัสเทียมได้ดังนี้ เริ่มต้น 1.กำหนดตัวแปร CX และ CY แทนคู่ลำดับ X, Y รัศมี (Radius) และค่าสูงสุดของจอภาพ (Limit) 2. กำหนดโหมดจอภาพเป็นพิกเซล 3. ให้คำนวณค่าของคู่ลำดับเท่ากับค่าสูงสุดของจอภาพ /2 4. ถ้าค่าความกว้างบนจอมากกว่าความสูงของจอให้ความกว้างเท่ากับความสูง (เพราะวงกลมมีรัศมียาวเท่ากันทุกด้าน)

12. 5.กำหนดตัวแปจำนวนรอบเท่ากับ 0 ถึงความกว้างของจอ 6. วาดวงกลมให้มีรัศมีเท่ากับค่าของจำนวนรอบโดยเปลี่ยนสีของรอบวงไปตามการ สุ่มค่าระหว่าง 0 – 255 (Rnd * 255) จบ

13. ผังงานของโปรแกรม

14. รหัสโปรแกรม Sub Form_Click () ‘ ให้โปรแกรมทำงานเมื่อคลิก Dim CX, CY, Radius, Limit ‘ กำหนดค่าตัวแปร ScaleMode = 3 ‘ กำหนดมาตราส่วนของจอเป็นพิกเซล CX = ScaleWidth/2 ‘ กำหนดตำแหน่งของ Xที่กลางจอภาพ CY = ScaleHeight/2 ‘ กำหนดตำแหน่งของ Y If CX > CY = Then Limit = CY ELSE Limit = CX For Radius = 0 To Limit ‘ กำหนดความยาวรัศมีของวงกลมเท่ากับจำนวนนับ Circle (CX, CY), Radius, RGB(Rnd * 255, Rnd * 255, Rbd * 255) ‘ วาดวงกลมที่มีรัศมีเปลี่ยนไปตามค่าของตัวแปร Radius Next Radius End Sub

15. Outputของโปรแกรม

16. 2.2การสร้างรูปสี่เหลี่ยมด้วยคำสั่ง Line • คำสั่ง Lineและแกน Y เป็นคำสั่งให้ลากเส้นจากจุดเริ่มต้นไปยังจุดสุดท้ายที่กำหนด โดยกำหนดเป็นคู่ลำดับสองจุด (x1, y1) – (x1, y2) การลากเส้นจะลากเส้นเป็นแนวนอน แนวตั้ง หรือทำมุมต่างๆ กับแนวใดก็ได้ ถ้าลากเส้นทำมุมกับแนวระดับเป็นแนวทแยงสามารถใส่อักษร B กำกับในคำสั่งให้แสดงเป็นกล่องสีเหลี่ยมได้ และสามารถเติมสีลงในกล่องได้ด้วยตัวเลือก F มีรูปแบบที่ใช้คำสั่งดังนี้ Object.Line[Step](x1, y1) [Step] - (x1, y1), [color], [B][F]

17. ส่วนของคำสั่ง ความหมาย Object วัตถุที่ใช้วาดรูป เช่น ฟอร์ม Picture, Image เป็นต้น (x1, y1) จุดเริ่มต้นของเส้น (x2, y2) จุดสุดท้ายของเส้น ถ้าลากเป็นเส้นทแยงมุมเมื่อเติมอักษรนี้หมายถึงสร้างเป็นกล่องสี่เหลี่ยม (Box) B เติมสีลงในกล่องที่วาด (Fill) ใช้คู่กับ(Color) F

18. ตัวอย่างการสร้างรูปสี่เหลี่ยมตัวอย่างการสร้างรูปสี่เหลี่ยม วัตถุประสงค์ ต้องการสร้างรูปสี่เหลี่ยมเรียงซ้อนกันเป็นกล่องสีต่างๆ บนฟอร์ม รหัสเทียมของโปรแกรม เริ่มต้น 1. กำหนดค่าตัวแปร (Declare variable) 2. กำหนดโหมดของฟอร์มเป็นพิกเซล(Set ScaleMode to pixels) 3. รับค่าแกนราบ (Get horizontal center) 4. รับค่าแกนตั้ง (Get vertical center) 5. กำหนดขนาดของเส้น (Set DrawWidth) 6. กำหนดช่วงห่างของเส้น (Perform interim) 7. คำนวณค่า (Calculations) 8. กำหนดสีของเส้น (Set foreground color) 9. วาดกล่องตามค่าการวนรอบ จบ

19. ผังงานของโปรแกรม

20. รหัสโปรแกรม

21. Outputของโปรแกรม

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

23. 3.การออกแบบโปรแกรมสร้างภาพเคลื่อนไหว3.การออกแบบโปรแกรมสร้างภาพเคลื่อนไหว ขึ้นตอนการทำงาน 1. เลือกหรือสร้างภาพที่ต้องการทำเป็นภาพเคลื่อนไหว ในที่นี้ใช้ภาพจาก Clip Art ของ MS-Office จำนวน 3 ภาพวางในคอนโทรลชื่อ Image1 Image2 และ Image3 2. วาง Image4 เป็นกรอบว่างในตำแหน่งที่ต้องการแสดงผลเป็น Output 3. กำหนดให้ภาพอื่นที่ไม่ใช่ Image4 เป็นภาพที่มองไม่เห็นเมื่อรันโปรแกรม (Visible=False) 4. วางคอนโทรล (Timer1) ควบคลุมความเร็วในการเปลี่ยนภาพ 5. วางคอนโทรล Command Button1 สำหรับคลิกให้เคลื่อนไหวเปลี่ยนชื่อเป็นเริ่ม และ Command Button2 คลิกให้หยุดการทำงานเปลี่ยนชื่อเป็นหยุด 6. กำหนดจำนวนนับใน Timer1 ด้วยตัวแปร Static ชื่อ Intcนับจาก 0 ถึง 2 การเปลี่ยนค่าแต่ละครั้งให้แทนที่ Image4 ด้วยภาพใน Image1, Image2 และ Image3 สลับกันไปด้วยการตรวจสอบ

25. รหัสเทียมของโปรแกรม เริ่ม 1. คลิกที่ปุ่มเริ่ม 2. ส่งการไปยัง Time1 3. นาฬิกาเริ่มนับ Intc = 0 เปลี่ยนภาพใน Image4 เป็น Image1 แล้วเปลี่ยนตัวแปร Intc = 1 ตรวจสอบเงื่อนไข ถ้า Intc= 1 เปลี่ยนภาพใน Image4 เป็น Image2 แล้วเปลี่ยนตัวแปร Intc = 2 ตรวจสอบเงื่อนไข ถ้า Intc = 2 เปลี่ยนภาพใน Image4 เป็น Image3 แล้วเปลี่ยนตัวแปร Intc = 0 4. ถ้านาฬิกานับเกิน 65534 ให้กลับไปเริ่มที่ 10 ใหม่ 5. ถ้าคลิกที่ปุ่มจบ ให้ปดนาฬิกา จบการทำงาน จบ

26. ผังงานของโปรแกรม

28. ผังงานของโปรแกรม

29. ผังงานของโปรแกรม

30. The End หน่วยการเรียนรู้ที่ 10