วาดรูปด้วยภาษาโลโก้ : ตอนที่ 1 – เส้น และ รูปร่าง (1)

ตอนนี้เราจะเริ่มวาดรูปกันครับ โดยคำสั่งที่น้องๆ จะเจอในบทนี้คือ

คำสั่ง	ความสามารถ	ตัวอย่าง
fd ระยะทาง	forward = เดินหน้า	fd 100 = เดินหน้า 100 pixel
rt องศา	right turn = หมุนขวา	rt 90 = หมุนไปทางขวา 90 องศา
cs	clear screen = ล้างหน้าจอ

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

 

ก่อนที่เราจะเรียนรู้ว่าแต่ลำคำสั่งทำงานอย่างไร เราลองมาวาดรูปเล่นๆ กันสักรูปหนึ่งก่อนครับ ให้น้องพิมพ์คำสั่งดังต่อไปนี้ จากนั้น Enter หรือกดปุ่ม Run นะครับ

fd 100 rt 90 fd 100 lt 90 fd 100 rt 90 fd 100 rt 90 fd 200

โปรแกรมที่ 1-1 (สี่เหลี่ยมผืนผ้า)

รูปภาพที่ได้จะเป็นดังนี้ครับ

 

การทำงานของคำสั่งเดินหน้า (fd)

ที่หน้าจอแสดงผลลัพธ์ น้องๆ จะเห็นเต่าสีเขียว  ให้มองว่ามันเป็นหัวปากกาสำหรับวาดรูปครับ หัวเต่าชี้ไปทางนั้นมันก็จะเคลื่อนที่ตามนั้น โดยการเดินเต่านั้นจะเดินได้เป็นเส้นตรงอย่างเดียว ด้วยคำสั่งเดินหน้า (fd)

การทำงานของคำสั่งหมุนขวา (rt)

นอกจากนี้เต่าสามารถหมุนรอบตัวเองได้ 360 องศา ด้วยคำสั่งหมุนขวา (rt) เมื่อประกอบกับคำสั่งเดินหน้า (fd) ก็จะสามารถวาดรูปได้ครับ

 

จากโปรแกรมที่ 1-1 เราจะมาอธิบายการวาดสี่เหลี่ยมผืนผ้าแต่ละขั้นตอนอย่างละเอียดกันครับ

1. fd 100 = เดินหน้า 100 pixel
2. rt 90 = หมุนขวา 90 องศา
3. fd 200 = เดินหน้า 200 pixel
4. rt 90 = หมุนขวา 90 องศา
5. fd 100 = เดินหน้า 100 pixel
6. rt 90 = หมุนขวา 90 องศา
7. fd 200 = เดินหน้า 200 pixel
8. rt 90 = หมุนขวา 90 องศา

 

คำสั่งล้างหน้าจอ (cs)

เมื่อเราวาดรูปเสร็จแล้ว หากต้องการล้างหน้าจอ ให้ใช้คำสั่ง cs (clear screen) ครับ รูปภาพที่เคยวาดจะถูกลบ และเต่าก็จะกลับมาอยู่ที่ตำแหน่งเริ่มต้น (ถ้าต้องการแค่ลบหน้าจอ แต่เต่าอยู่ที่ตำแหน่งเดิม ให้ใช้คำสั่ง clean)

 

เพื่อความเข้าใจคำสั่ง fd (เดินหน้า) และหมุนขวา (rt) ที่มากขึ้น เราจะมาวาดรูปกันอีกสักรูปครับ

fd 200 rt 90 fd 180 rt 90 fd 160 rt 90 fd 140 rt 90 fd 120 rt 90 fd 100 rt 90 fd 80 rt 90 fd 60 rt 90

โปรแกรมที่ 1-2

รูปภาพที่ได้จะเป็นดังนี้ครับ

จากโปรแกรมที่ 1-2 เราจะมาอธิบายการวาดรูปนี้แต่ละขั้นตอนอย่างละเอียดกันครับ

1. fd 200 = เดินหน้า 200 pixel            rt 90 = หมุนขวา 90 องศา
2. fd 180 = เดินหน้า 180 pixel            rt 90 = หมุนขวา 90 องศา
3. fd 160 = เดินหน้า 160 pixel            rt 90 = หมุนขวา 90 องศา
4. fd 140 = เดินหน้า 140 pixel            rt 90 = หมุนขวา 90 องศา
5. fd 120 = เดินหน้า 120 pixel            rt 90 = หมุนขวา 90 องศา
6. fd 100 = เดินหน้า 100 pixel            rt 90 = หมุนขวา 90 องศา
7. fd 80 = เดินหน้า 80 pixel             rt 90 = หมุนขวา 90 องศา
8. fd 60 = เดินหน้า 60 pixel             rt 90 = หมุนขวา 90 องศา

 

การหมุน

ก่อนจะไปรูปภาพถัดไป เราจะมาอธิบายเกี่ยวกับการหมุนเล็กน้อยนะครับ นอกจากการหมุนขวา 90 องศาแล้ว การหมุดด้วยองศาอื่นๆ ก็จะทำให้เราได้รูปภาพที่ต่างออกไปนะครับ เช่น 30 45 60 90 120 180 270 องศา

ตัวอย่างเช่นรูปดังต่อไปนี้ครับ

fd 100 rt 30 fd 100 rt 45 fd 100 rt 60 fd 100 rt 90 fd 100 rt 120 fd 100 rt 180 fd 200 rt 270 fd 100

โปรแกรมที่ 1-3

 

จากโปรแกรมที่ 1-3 เราจะมาอธิบายการวาดรูปนี้แต่ละขั้นตอนอย่างละเอียดกันครับ

1. fd 100 = เดินหน้า 100 pixel
2. rt 30 = หมุนขวา 30 องศา fd 100 = เดินหน้า 100 pixel
3. rt 45 = หมุนขวา 45 องศา fd 100 = เดินหน้า 100 pixel
4. rt 60 = หมุนขวา 60 องศา fd 100 = เดินหน้า 100 pixel
5. rt 90 = หมุนขวา 90 องศา fd 100 = เดินหน้า 100 pixel
6. rt 120 = หมุนขวา 120 องศา fd 100 = เดินหน้า 100 pixel
7. rt 180 = หมุนขวา 180 องศา fd 200 = เดินหน้า 200 pixel
8. rt 270 = หมุนขวา 270 องศา fd 100 = เดินหน้า 100 pixel

สำหรับรูปสุดท้ายที่เราจะมาวาดกันตอนนี้เป็นรูปบันไดกันครับ

fd 50 rt 90 fd 50 rt 270 fd 50 rt 90 fd 50 rt 270 fd 50 rt 90 fd 50 rt 270 fd 50 rt 90 fd 50 rt 270

โปรแกรมที่ 1-4

 

จากโปรแกรมที่ 1-4 เราจะมาอธิบายการวาดรูปนี้แต่ละขั้นตอนอย่างละเอียดกันครับ

1. (ครั้งที่ 1) fd 50 = เดินหน้า 50 pixel rt 90 = หมุนขวา 90 องศา
   fd 50 = เดินหน้า 50 pixel   rt 270 = หมุนขวา 270 องศา
2. (ครั้งที่ 2) fd 50 = เดินหน้า 50 pixel rt 90 = หมุนขวา 90 องศา
   fd 50 = เดินหน้า 50 pixel   rt 270 = หมุนขวา 270 องศา
3. (ครั้งที่ 3) fd 50 = เดินหน้า 50 pixel rt 90 = หมุนขวา 90 องศา
   fd 50 = เดินหน้า 50 pixel   rt 270 = หมุนขวา 270 องศา
4. (ครั้งที่ 4) fd 50 = เดินหน้า 50 pixel rt 90 = หมุนขวา 90 องศา
   fd 50 = เดินหน้า 50 pixel   rt 270 = หมุนขวา 270 องศา

แต่ถ้าเราสังเกตดีๆ เราจะพบว่า คำสั่ง rt 270 (หมุนขวา 270 องศา) นั่นดูแปลกๆ จริงๆ เราควรใช้คำสั่ง หมุนซ้าย 90 องศามากกว่า หรือ ในกรณีที่เราต้องการเดินถอยหลังละ จะทำอย่างไร? สามารถติดตามได้ในตอนต่อไปครับ 🙂

 

มาวาดรูปกันเถอะ!

ก่อนจากกันมีรูปอยากให้น้องๆ ไปลองวาดกันดูครับ (อย่าแอบเปิดเฉลยนะ ลองวาดเองก่อนนะ)

 

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

 

.

.

.

.

.

rt 45 fd 150 rt 270 fd 50 rt 180 fd 150 rt 90 fd 150 rt 180 fd 50 rt 270 fd 150

.

.

.

.

.

.

.

.

.

.

เฉลย

fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 150 rt 90 fd 150 rt 90 fd 150 rt 90 fd 150 rt 90

.

rt 45 fd 150 rt 270 fd 50 rt 180 fd 150 rt 90 fd 150 rt 180 fd 50 rt 270 fd 150