วาดรูปด้วยภาษาโลโก้ : ตอนที่ 7 – บ้าน และ สวน

ในตอนนี้เราจะมาวาดรูปบ้านและสวนกันครับ แน่นอนว่ารูปนี้มีองค์ประกอบหลายอย่าง แต่ด้วยการใช้งานฟังก์ชันจะทำให้เราวาดรูปนี้ได้ง่ายขึ้นครับ

คำสั่งที่น้องๆ จะเจอในบทนี้

คำสั่ง	ความสามารถ	ตัวอย่าง
fd ระยะทาง bk ระยะทาง	forward = เดินหน้า backward = ถอยหลัง	fd 100 = เดินหน้า 100 pixel bk 50 = ถอยหลัง 50 pixel
rt องศา lt องศา	right turn = หมุนขวา left turn = หมุนซ้าย	rt 90 = หมุนไปทางขวา 90 องศา lt 45 = หมุนไปทางซ้าย 45 องศา
repeat จำนวนครั้ง [ คำสั่ง ]	repeat = ทำคำสั่งต่อไปนี้ ซ้ำ n ครั้ง	repeat 3 [ fd 100 rt 120 ] repeat 4 [ fd 100 rt 90 ] repeat 6 [ fd 100 rt 60 ]
TO ชื่อฟังก์ชัน :ตัวแปร คำสั่ง END	function = สร้างชุดคำสั่ง	TO square :size repeat 4 [ fd :size rt 90 ] END
cs clean	clear screen = ล้างหน้าจอ clean = ล้างหน้าจอ
pu pd	pen up = ยกปากกา pen down = วางปากกา
ht st	hide turtle = ซ่อนเต่าโลโก้ show turtle = แสดงเต่าโลโก้

หมายเหตุ: Tutorial นี้จะเขียนโปรแกรมภาษา LOGO ผ่านเว็บไซต์นี้ครับ http://www.calormen.com/jslogo/ (ขอบคุณเจ้าของเว็บไซต์มา ณ โอกาสนี้ด้วยครับ)

---

วางแผนวาดรูป (Planning)

รูปบ้านและสวนที่เราจะวาดกันในตอนนี้ ประกอบด้วย 4 องค์ประกอบหลัก คือ บ้าน ต้นไม้ สวนดอกไม้ และ สนามหญ้า

ซึ่งแต่ละรูปนั้นประกอบด้วยรูปเรขาคณิตพื้นฐาน ซึ่งเราจะสร้างฟังก์ชันเตรียมไว้ก่อนครับ

 

ฟังก์ชันพื้นฐาน (Basic Function)

1. สี่เหลี่ยมจัตุรัส

TO square :size repeat 4 [ fd :size rt 90 ] END

2. สี่เหลี่ยมผืนผ้า

TO rectangle :width :height repeat 2 [ fd :height rt 90 fd :width rt 90 ] END

3. สี่เหลี่ยมด้านขนาน

TO parallelogram :angle :width :height repeat 2 [ rt 90 lt :angle fd :height rt :angle fd :width rt 90 ] END

4. สามเหลี่ยม

TO triangle :size repeat 3 [ fd :size rt 120 ] END

5. วงกลม

TO circle :radius arc 360 :radius END

 

บ้าน (House)

TO house square 100 pu fd 100 rt 30 pd triangle 100 pu rt 60 fd 100 lt 90 pd parallelogram 120 200 100 pu bk 100 pd rectangle 200 100 pu lt 90 fd 100 rt 90 pd END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. square 100 = วาดตัวบ้าน (1)
2. pu fd 100 rt 30 pd = เคลื่อนที่เต่าโลโก้
3. triangle 100 = วาดหลังคา (1)
4. pu rt 60 fd 100 lt 90 pd = เคลื่อนที่เต่าโลโก้
5. parallelogram 120 200 100 = วาดหลังคา (2)
6. pu bk 100 pd = เคลื่อนที่เต่าโลโก้
7. rectangle 200 100 = วาดตัวบ้าน (2)
8. pu lt 90 fd 100 rt 90 pd = เคลื่อนที่เต่าโลโก้ไปที่ตำแหน่งเริ่มต้น

 

ต้นไม้ (Tree)

TO a_tree fd 100 circle 50 pu bk 100 pd END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. fd 100 = วาดลำต้น
2. circle 50 = วาดพุ่มไม้

 

ป่า (Forest)

TO a_forest repeat 3  [ a_tree pu rt 90 fd 100 lt 90 pd ] pu lt 90 fd 300 rt 90 pd END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. a_tree = วาดต้นไม้
2. pu rt 90 fd 100 lt 90 pd = เคลื่อนที่เต่าโลโก้
3. (ทำซ้ำ ข้อ 1 และ ข้อ 2 ทั้งหมด 3 ครั้ง)
4. pu lt 90 fd 300 rt 90 pd = เคลื่อนที่เต่าโลโก้มายังตำแหน่งเริ่มต้น

 

ดอกไม้ (Flower)

TO flower fd 50 pu bk 25 lt 90 pd repeat 4 [ arc 180 25 pu fd 25 rt 90 fd 25 pd ] pu rt 90 bk 25 pd END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. fd 50 pu bk 25 lt 90 pd = วาดลำต้น และ เคลื่อนที่เต่าโลโก้
2. arc 180 25 = วาดครึ่งวงกลม
3. pu fd 25 rt 90 fd 25 pd = เคลื่อนที่เต่าโลโก้
4. (ทำซ้ำ ข้อ 2 และ ข้อ 3 ทั้งหมด 4 ครั้ง)
5. pu rt 90 bk 25 pd = เคลื่อนที่เต่าโลโก้มายังตำแหน่งเริ่มต้น

 

สวนดอกไม้ (Garden)

TO garden repeat 4 [ flower pu rt 90 fd 75 lt 90 pd ] pu lt 90 fd 300 rt 90 pd END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. flower = วาดดอกไม้
2. pu rt 90 fd 75 lt 90 pd = เคลื่อนที่เต่าโลโก้
3. (ทำซ้ำ ข้อ 1 และ ข้อ 2 ทั้งหมด 4 ครั้ง)
4. pu lt 90 fd 300 rt 90 pd = เคลื่อนที่เต่าโลโก้มายังตำแหน่งเริ่มต้น

 

หญ้า (Grass)

TO grass lt 30 fd 25 bk 25 rt 60 fd 25 bk 25 lt 30 fd 25 bk 25 END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. lt 30 fd 25 bk 25 = วาดใบหญ้า (1)
2. rt 60 fd 25 bk 25 = วาดใบหญ้า (2)
3. lt 30 fd 25 bk 25 = วาดใบหญ้า (3)

 

สนามหญ้า (Field)

TO field repeat 3 [ repeat 5 [ grass pu rt 90 fd 50 lt 90 pd ] pu lt 90 fd 250 rt 90 bk 50 pd ] END

อธิบายการทำงานของฟังก์ชัน step-by-step

1. grass = วาดรูปหญ้า
2. pu rt 90 fd 50 lt 90 pd = เคลื่อนที่เต่าโลโก้
3. (ทำซ้ำ ข้อ 1 และ ข้อ 2 ทั้งหมด 5 ครั้ง) // จะได้หญ้า 1 แถว
4. (ทำซ้ำ ข้อ 3 และ เคลื่อนที่เต่าโลโก้ ทั้งหมด 3 ครั้ง) // จะได้หญ้า 3 แถว

 

บ้าน และ สวน (House & Garden)

เมื่อเราได้องค์ประกอบทั้ง 4 แล้ว (บ้าน ต้นไม้ สวนดอกไม้ สนามหญ้า) เราก็จะนำมาประกอบกันเป็น บ้านและสวน ครับ

cs ht pu fd 25 lt 90 fd 300 rt 90 pd house pu rt 90 fd 400 lt 90 pd a_forest pu bk 125 lt 90 fd 350 rt 90 pd garden pu rt 90 fd 350 lt 90 fd 50 pd field

อธิบายการทำงานของฟังก์ชัน step-by-step

1. cs ht = ล้างหน้าจอ และ ซ่อนเต่าโลโก้
2. pu fd 25 lt 90 fd 300 rt 90 pd = เคลื่อนที่เต่าโลโก้
3. house = วาดรูปบ้าน
4. pu rt 90 fd 400 lt 90 pd = เคลื่อนที่เต่าโลโก้
5. a_forest = วาดรูปป่าต้นไม้
6. pu bk 125 lt 90 fd 350 rt 90 pd = เคลื่อนที่เต่าโลโก้
7. garden = วาดรูปสวนดอกไม้
8. pu rt 90 fd 350 lt 90 fd 50 pd = เคลื่อนที่เต่าโลโก้
9. field = วาดรูปสนามหญ้า

 

เพิ่มเติม: การเคลื่อนที่เต่าโลโก้ไปยังตำแหน่งที่ต้องการสามารถใช้คำสั่ง setxy (เคลื่อนที่เต่าโลโก้ไปยังพิกัด x,y) ได้เหมือนกันครับ ซึ่งจะทำให้โปรแกรมมีหน้าตาแบบนี้

cs ht pu setxy -300 25 pd house pu setxy 100 25 pd a_forest pu setxy -250 -100 pd garden pu setxy 100 -50 pd field

 

โปรแกรมทั้งหมด

TO square :size repeat 4 [ fd :size rt 90 ] END TO rectangle :width :height repeat 2 [ fd :height rt 90 fd :width rt 90 ] END TO parallelogram :angle :width :height repeat 2 [ rt 90 lt :angle fd :height rt :angle fd :width rt 90 ] END TO triangle :size repeat 3 [ fd :size rt 120 ] END TO circle :radius arc 360 :radius END TO house square 100 pu fd 100 rt 30 pd triangle 100 pu rt 60 fd 100 lt 90 pd parallelogram 120 200 100 pu bk 100 pd rectangle 200 100 pu lt 90 fd 100 rt 90 pd END TO a_tree fd 100 circle 50 pu bk 100 pd END TO a_forest repeat 3 [ a_tree pu rt 90 fd 100 lt 90 pd ] pu lt 90 fd 300 rt 90 pd END TO flower fd 50 pu bk 25 lt 90 pd repeat 4 [ arc 180 25 pu fd 25 rt 90 fd 25 pd ] pu rt 90 bk 25 pd END TO garden repeat 4 [ flower pu rt 90 fd 75 lt 90 pd ] pu lt 90 fd 300 rt 90 pd END TO grass lt 30 fd 25 bk 25 rt 60 fd 25 bk 25 lt 30 fd 25 bk 25 END TO field repeat 3 [ repeat 5 [ grass pu rt 90 fd 50 lt 90 pd ] pu lt 90 fd 250 rt 90 bk 50 pd ] END cs ht pu fd 25 lt 90 fd 300 rt 90 pd house pu rt 90 fd 400 lt 90 pd a_forest pu bk 125 lt 90 fd 350 rt 90 pd garden pu rt 90 fd 350 lt 90 fd 50 pd field

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

สามารถติดตามต่อตอนไปได้ที่นี่ครับ https://karnlab.com/tag/ภาษาโลโก้