วาดรูปด้วยภาษาโลโก้ : ตอนที่ 3 – เล่น ซ่อน หา

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

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

คำสั่ง	ความสามารถ	ตัวอย่าง
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 = ล้างหน้าจอ
clean	clean = ล้างหน้าจอ
pu	pen up = ยกปากกา
pd	pen down = วางปากกา
ht	hide turtle = ซ่อนเต่าโลโก้
st	show turtle = แสดงเต่าโลโก้

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

---

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

คำสั่ง pen up และ pen down

• เมื่อเริ่มต้นโปรแกรม โปรแกรมจะวางปากกาให้เราโดยอัตโนมัติ ทำให้เวลาเราใช้คำสั่ง fd (forward) หรือ bk (backward) ก็จะเป็นการขีดเส้น
• แต่เมื่อเราใช้คำสั่ง pu (pen up) แล้วใช้คำสั่ง fd (forward) หรือ bk (backward) จะเป็นการเคลื่อนที่เต่าโลโก้ ไม่เกิดการขีดเส้นใดๆ
• เมื่อเราต้องการขีดเส้นอีกครั้งให้ใช้คำสั่ง pd (pen down) แล้วใช้คำสั่ง fd (forward) หรือ bk (backward) ก็จะเป็นการขีดเส้นวาดรูปตามปกติ

 

เพื่อทำความเข้าใจคำสั่ง pu (pen up) และ pd (pen down) เราจะมาวาดรูปกันครับ

fd 100 bk 100 pu rt 90 fd 50 lt 90 pd fd 100 bk 100 pu rt 90 fd 50 lt 90 pd fd 100 bk 100 pu rt 90 fd 50 lt 90 pd fd 100 bk 100 pu rt 90 fd 50 lt 90 pd

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

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

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

 

ความแตกต่างระหว่างคำสั่ง cs และ clean

• คำสั่ง cs (clear screen) = ล้างหน้าจอ พร้อมย้ายเต่าโลโก้มาที่จุดเริ่มต้น
• คำสั่ง clean = ล้างหน้าจอ แต่เต่าโลโก้ยังอยู่ที่ตำแหน่งเดิม

 

วาดรูปกันต่อ…

เพื่อทำความเข้าใจคำสั่ง pu (pen up) และ pd (pen down) เราจะมาวาดรูปกันต่อครับ

fd 50 pu fd 100 pd fd 50 rt 90 fd 50 pu fd 100 pd fd 50 rt 90 fd 50 pu fd 100 pd fd 50 rt 90 fd 50 pu fd 100 pd fd 50 rt 90

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

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

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

 

ซ่อนและแสดงเต่าโลโก้

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

• คำสั่ง ht = hide turtle >> เมื่อใช้งานแล้วเต่าโลโก้จะหายไป
• คำสั่ง st = show turtle >> เมื่อใช้งานแล้วเต่าโลโก้จะปรากฎ

 

วาดรูปกันต่อ…

รูปสุดท้ายสำหรับตอนนี้แล้ว เพื่อทำความเข้าใจคำสั่ง pu (pen up) และ pd (pen down) เราจะมาวาดรูปกันครับ

pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45 pu fd 50 pd fd 50 pu bk 100 rt 45

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

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

1. pu = ยกปากกา |  fd 50 = เดินหน้า 50 pixel  |  pd = วางปากกา  |  fd 50 = เดินหน้า 50 pixel  |  pu = ยกปากกา  |  bk 100 = ถอยหลัง 100 pixel  |  rt 45 = หมุนขวา 45 องศา
   (ทำซ้ำ 8 ครั้ง)

 

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

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

 

ลองวาดดู

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

โจทย์ 3-1

 

โจทย์ 3-2

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

เฉลย

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

pu fd 50 pd fd 100 pu fd 50 pd rt 90 pu fd 50 pd fd 100 pu fd 50 pd rt 90 pu fd 50 pd fd 100 pu fd 50 pd rt 90 pu fd 50 pd fd 100 pu fd 50 pd rt 90 pu fd 100 rt 90 fd 100 lt 90 pd fd 50 bk 50 rt 90 fd 50 bk 50 rt 90 fd 50 bk 50 rt 90 fd 50 bk 50 rt 90

 

repeat 4 [ fd 50 bk 50 rt 90 ] pu rt 90 fd 150 lt 90 pd repeat 4 [ fd 50 bk 50 rt 90 ] pu rt 90 fd 150 lt 90 pd repeat 4 [ fd 50 bk 50 rt 90 ] pu rt 90 fd 150 lt 90 pd

 

อ้าว! เฮ้ย! คำสั่ง repeat คืออะไร? มีเฉลยตอนต่อไปครับ