วาดรูปด้วยภาษาโลโก้ : ตอนที่ 16 – รถยนต์

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

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

คำสั่ง	ความสามารถ	ตัวอย่าง
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 = แสดงเต่าโลโก้
setxy พิกัดx พิกัดy	set (x,y) = กำหนดตำแหน่งเต่าโลโก้	setxy 200 100
setpensize ขนาด setpencolor รหัสสี fill setscreencolor รหัสสี	set pen size = กำหนดขนาดปากกา set pen color = กำหนดสีปากกา fill = ระบายสี set screen color = กำหนดสีพื้นหลัง	setpensize 5 setpencolor 10 fill setscreencolor 10

 

เราจะมาดูรูปต้นแบบที่เราจะวาดกันก่อนครับ ซึ่งก็คือ Mini Cooper สีแดง เดี๋ยวเราจะมาลองวาดกันดูเลยครับ

รูปภาพจาก – https://bay2car.com/

 

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

1. ฟังก์ชัน setpencolor_default ใช้สำหรับเปลี่ยนสีปากการเป็นสีดำ
2. ฟังก์ชัน paint ใช้สำหรับระบายสี
3. ฟังก์ชัน comment ใช้สำหรับอธิบายการทำงานของโค้ด

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

แต่เนื่องจากภาษาโลโก้ไม่มี syntax comment ดังนั้น เราก็เลยสร้างฟังก์ชัน comment เพื่อใช้เขียนอธิบายโค้ดครับ โดยในฟังก์ชันนี้ไม่ต้องทำอะไรครับ (ถ้ายังไม่เข้าใจ เดี๋ยวจะเห็นประโยชน์ของฟังก์ชันนี้ในตัวอย่างถัดไปครับ)

TO setpencolor_default setpencolor “#9E9E9E END TO paint :color pu rt 45 fd 10 pd setpencolor :color fill pu bk 10 lt 45 pd setpencolor_default END TO comment :message END

 

โอเคครับ เราจะมาเริ่มวาดรถยนต์กันเลยครับ

cs setpencolor_default pu setxy -200 -100 pd comment “body fd 75 rt 30 fd 100 rt 60 fd 200 rt 60 fd 100 lt 60 fd 50 rt 90 fd 75 rt 90 fd 350 rt 90 paint “#d32f2f

* จะสังเกตว่า คำสั่ง comment “body ไม่ได้ทำหน้าที่วาดรูปอะไรเลยครับ แต่มันจะช่วยให้เข้าใจได้ง่ายขึ้นว่า โค้ดดังต่อไปนี้คือการวาดตัวรถยนต์ (body)

 

จากนั้นเราจะวาดล้อรถยนต์กันครับ

comment “wheel_1 pu rt 90 fd 120 rt 90 pd repeat 360 [ fd 0.75 rt 1 ] paint “#212121 rt 90 fd 15 lt 90 repeat 360 [ fd 0.5 rt 1 ] paint “#9E9E9E rt 90 bk 15 lt 90

 

comment “wheel_2 pu lt 90 fd 180 rt 90 pd repeat 360 [ fd 0.75 rt 1 ] paint “#212121 rt 90 fd 15 lt 90 repeat 360 [ fd 0.5 rt 1 ] paint “#9E9E9E rt 90 bk 15 lt 90

 

ต่อไปเราจะมาส่วนของหน้าต่างกันครับ

comment “window_1 pu lt 90 bk 300 lt 90 pd pu fd 20 rt 90 fd 20 lt 90 pd pu fd 55 pd rt 30 fd 80 rt 60 fd 100 rt 90 fd 60 rt 90 fd 120 rt 120 paint “#00bcd4

 

เอ๊ะ! เหมือนว่ารูปภาพที่ได้จะมีปัญหา เนื่องจากสัดส่วนของหน้าต่างไม่พอดี ลองแก้ไขโค้ดส่วนของหน้าต่างกันใหม่ครับ

comment “window_1 pu lt 90 bk 300 lt 90 pd pu fd 20 rt 90 fd 20 lt 90 pd pu fd 55 pd rt 30 fd 80 rt 60 fd 80 rt 90 fd 65 rt 90 fd 120 rt 120 paint “#00bcd4

 

เนื่องจากเราค่อยๆ เขียนโค้ด และทยอย run เพื่อดูรูปภาพไปทีและส่วน ดังนั้น เมื่อเกิดปัญหา เราจึงทราบว่าปัญหาเกิดจากจุดไหน และสามารถแก้ไขได้อย่างรวดเร็วครับ (ฝากถึงน้องๆ เช่นกันว่าเวลาเขียนโปรแกรมใหญ่ๆ ค่อยๆ code ค่อยๆ run นะครับ จะได้หา bug ได้ง่าย อย่าเขียน code ยาวๆ แล้ว run ทีเดียว มันจะหา bug ยาก)

ต่อไปเราจะวาดหน้าต่างที่เหลืออีกหนึ่งบานครับ

comment “window_2 pu rt 60 fd 140 lt 90 pd fd 65 rt 90 fd 80 rt 60 fd 80 rt 120 fd 120 rt 90 paint “#00bcd4

 

เอ๊ะ! รูปภาพที่ได้มีปัญหาอีกแล้ว แม้ดูเหมือนว่ารูปของเราไม่น่าจะมีอะไรผิดพลาด ถ้าเราสังเกตดีๆ จะพบว่าหน้าต่างที่เพิ่งเพิ่มเข้าไป สี่เหลี่ยมยังปิดไม่สนิท ดังนั้น ถ้าเราแก้ไขตัวเลขอีกนิดก็น่าจะพอดีแล้ว

comment “window_2 pu rt 60 fd 140 lt 90 pd fd 65 rt 90 fd 80 rt 60 fd 75 rt 120 fd 120 rt 90 paint “#00bcd4

 

เสร็จแล้วครับ สำหรับรูปรถยนต์ที่เราต้องการ Code ทั้งหมด สามารถเข้าไปดูได้ที่นี่ครับ https://github.com/doctorkarn/logo-lang/blob/master/EP16.txt

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

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