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

Admin — Mon, 01 Oct 2018 11:56:46 +0000

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

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

คำสั่ง	ความสามารถ	ตัวอย่าง
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 สีแดง เดี๋ยวเราจะมาลองวาดกันดูเลยครับ

Mini Cooper Red Car

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

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

ฟังก์ชัน setpencolor_default ใช้สำหรับเปลี่ยนสีปากการเป็นสีดำ
ฟังก์ชัน paint ใช้สำหรับระบายสี
ฟังก์ชัน 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

LOGO EP16 – Car 1

* จะสังเกตว่า คำสั่ง 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

LOGO EP16 – Car 2

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

LOGO EP16 – Car 3

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

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

LOGO EP16 – Car 4

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

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

LOGO EP16 – Car 5

เนื่องจากเราค่อยๆ เขียนโค้ด และทยอย 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

LOGO EP16 – Car 6

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

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

LOGO EP16 – Car 7

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

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

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

The post วาดรูปด้วยภาษาโลโก้ : ตอนที่ 16 – รถยนต์ appeared first on KarnLab.

รถยนต์ Archives - KarnLab

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