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

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

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

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

 

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

หรือในกรณีที่เราต้องการเดินถอยหลัง จะพบว่า คำสั่ง rt 180 fd 100 (กลับหลังหัน แล้วเดินหน้า 100 pixel) จะได้ผลลัพธ์เหมือนกับ bk 100 (เดินถอยหลัง 100 pixel)

 

คำสั่งเดินถอยหลัง (bk)

คำสั่งหมุนซ้าย (lt)

 

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

fd 50 rt 90 fd 50 lt 90 fd 50 rt 90 fd 50 lt 90 fd 50 rt 90 fd 50 lt 90 fd 50 rt 90 fd 50 lt 90

โปรแกรมที่ 2-1 (บันได)

 

 

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

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

 

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

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

 

รูปภาพต่อไป เราจะมาประยุกต์ใช้คำสั่ง lt (left turn) เพื่อให้การวาดรูปง่ายขึ้น กันครับ

fd 100 rt 90 fd 100 lt 90 fd 50 rt 90 fd 100 rt 90 fd 100 lt 90 fd 100 rt 90 fd 50 rt 90 fd 300

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

 

 

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

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

 

รูปภาพต่อไป เราจะมาประยุกต์ใช้คำสั่ง bk (backward) เพื่อให้การวาดรูปง่ายขึ้น กันครับ

rt 45 fd 100 bk 100 rt 45 fd 100 bk 100 rt 45 fd 100 bk 100 rt 45 fd 100 bk 100 rt 45 fd 100 bk 100 rt 45 fd 100 bk 100 rt 45 fd 100 bk 100 rt 45 fd 100 bk 100

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

 

 

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

1. (ครั้งที่ 1) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
2. (ครั้งที่ 2) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
3. (ครั้งที่ 3) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
4. (ครั้งที่ 4) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
5. (ครั้งที่ 5) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
6. (ครั้งที่ 6) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
7. (ครั้งที่ 7) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel
8. (ครั้งที่ 8) rt 45 = หมุนขวา 45 องศา  |  fd 100 = เดินหน้า 100 pixel  |  bk 100 = เดินถอยหลัง 100 pixel

 

รูปภาพต่อไป เป็นตัวอย่างโจทย์ที่มีคำตอบมากกว่า 1 วิธี (ซึ่งโจทย์ปัญหาในชีวิตจริงมักจะอยู่ในรูปแบบนี้ ที่มีวิธีแก้ปัญหามากกว่า 1 วิธี) เป็นอย่างไร? เรามาดูกันเลยครับ

วาดรูปสี่เหลี่ยมติดกัน 4 รูป (วิธีที่ 1)

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

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

 

 

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

1. rt 90 = หมุนขวา 90 องศา
2. fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 = วาดรูปสี่เหลี่ยม ขนาด 50 pixel
3. fd 100 = เดินหน้า 100 pixel
4. fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 = วาดรูปสี่เหลี่ยม ขนาด 50 pixel
5. fd 100 = เดินหน้า 100 pixel
6. fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 = วาดรูปสี่เหลี่ยม ขนาด 50 pixel
7. fd 100 = เดินหน้า 100 pixel
8. fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 = วาดรูปสี่เหลี่ยม ขนาด 50 pixel

 

วาดรูปสี่เหลี่ยมติดกัน 4 รูป (วิธีที่ 2)

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

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

 

 

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

1. rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 rt 90 fd 50 = วาดรูปสี่เหลี่ยม ขนาด 50×50 pixel
2. rt 90 fd 100 rt 90 fd 50 rt 90 fd 100 rt 90 fd 50 = วาดรูปสี่เหลี่ยม ขนาด 100×50 pixel
3. rt 90 fd 150 rt 90 fd 50 rt 90 fd 150 rt 90 fd 50 = วาดรูปสี่เหลี่ยม ขนาด 150×50 pixel
4. rt 90 fd 200 rt 90 fd 50 rt 90 fd 200 rt 90 fd 50 = วาดรูปสี่เหลี่ยม ขนาด 200×50 pixel

 

น่าสนใจ: ถ้าเราสังเกตจากโปรแกรมที่ 2-4 และโปรแกรมที่ 2-5 จะพบว่า ทั้งสองคำสั่งนี้ให้ผลลัพธ์เป็นรูปสี่เหลี่ยมเหมือนกัน

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

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

 

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

 

ในตอนต่อไปเราจะมาวาดรูปนี้กันครับ…

…แล้วเราจะวาดรูปนี้โดยไม่ยกปากกาได้ยังไงกันละ?

 

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

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

 

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

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

เฉลย

fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 300 rt 90 fd 100 rt 90 fd 300 rt 90 fd 100 rt 30 fd 100 rt 120 fd 100 lt 60 fd 200 lt 120 fd 100 lt 60 fd 200

 

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

 

fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75   fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75   fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 bk 150 rt 90 fd 75 lt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75   fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75   fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 bk 150 rt 90 fd 75 lt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75   fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75   fd 75 rt 90 fd 75 rt 90 fd 75 rt 90 fd 75 rt 90