วาดรูปด้วยภาษาโลโก้ : ตอนที่ 12 – เคลื่อนไหว

จากตอนที่แล้ว เราวาดรูปกันมาเยอะมาก และแน่นอนว่า เราก็ต้องลบรูปภาพที่เราวาดด้วยคำสั่ง CS หรือ Clean เยอะมาก ถ้าเราวาดรูปแล้วลบ วาดรูปแล้วลบ วาดรูปแล้วลบ ….. จะเกิดอะไรขึ้น?

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

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

คำสั่ง	ความสามารถ	ตัวอย่าง
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
wait หน่วยเวลา	wait = หยุดการทำงาน	wait 5

 

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

โปรแกรมที่ 12-1 วงกลมเคลื่อนที่

TO filled_circle repeat 360 [ fd 1 rt 1 ] rt 90 pu fd 10 pd fill pu bk 10 pd lt 90 END TO animate_circle repeat 40 [ pu fd 10 pd filled_circle wait 5 clean ] END setpencolor “#F0A2AF rt 90 pu bk 200 pd animate_circle

 

อธิบายการทำงานของโปรแกรม

• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_circle
  • เคลื่อนที่เต่าโลโก้ไปข้างหน้า 10 pixel
  • วาดรูปวงกลม (พร้อมระบายสี)
  • หยุดรอ 5 หน่วยเวลา
  • ลบรูปภาพ
  • (ทำซ้ำแบบนี้ 40 ครั้ง)

น้องๆ จะสังเกตได้ว่า คำสั่ง หยุดเวลา และ ลบรูปภาพเดิม (เพื่อวาดรูปใหม่) มีส่วนสำคัญในการวาดภาพเคลื่อนไหวครับ หากเราหยุดเวลามากเกินไป ภาพที่ได้จะกระตุก แต่ถ้าเราหยุดเวลาน้อยเกินไป ภาพจะเคลื่อนที่เร็วมาก (หรือ CPU/GPU จะประมวลผลไม่ทัน)

 

ต่อไปจะมาวาดรูปดาวที่เคลื่อนที่ด้วยความเร็วไม่คงที่กันครับ (คำสั่งนี้มีการประยุกต์ใช้ Recursive Function จากตอนที่ 11)

โปรแกรมที่ 12-2 ดาวเคลื่อนที่

TO filled_star repeat 5 [ fd 75 rt 144 fd 75 lt 72 ] rt 45 pu fd 10 pd fill pu bk 10 pd lt 45 END TO animate_star :s if (0.2*:s*:s) > 150 [ stop ] pu fd 50 – 0.2*:s*:s pd filled_star wait 5 clean animate_star :s+1 END setpencolor “yellow rt 90 pu bk 200 pd animate_star 1

 

อธิบายการทำงานของโปรแกรม

• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 1
  • ความเร็ว = 2 x 1 x 1 = 0.2 ซึ่งน้อยกว่า 150
  • เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 0.2 = 49.8 pixel
  • วาดรูปดาว 5 แฉก (พร้อมระบายสี)
  • หยุดรอ 5 หน่วยเวลา
  • ลบรูปภาพ
  • เรียกใช้คำสั่ง animate_star 2
• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 2
  • ความเร็ว = 2 x 2 x 2 = 0.8 ซึ่งน้อยกว่า 150
  • เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 0.8 = 49.2 pixel
  • วาดรูปดาว 5 แฉก (พร้อมระบายสี)
  • หยุดรอ 5 หน่วยเวลา
  • ลบรูปภาพ
  • เรียกใช้คำสั่ง animate_star 3
• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 3
  • ความเร็ว = 2 x 3 x 3 = 1.8 ซึ่งน้อยกว่า 150
  • เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 1.8 = 42 pixel
  • วาดรูปดาว 5 แฉก (พร้อมระบายสี)
  • หยุดรอ 5 หน่วยเวลา
  • ลบรูปภาพ
  • เรียกใช้คำสั่ง animate_star 4
• ( ทำเช่นนี้ไปเรื่อยๆ )
• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 20
  • ความเร็ว = 2 x 20 x 20 = 80 ซึ่งน้อยกว่า 150
  • เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 80 = -30 pixel (= ถอยหลัง 30 pixel)
  • วาดรูปดาว 5 แฉก (พร้อมระบายสี)
  • หยุดรอ 5 หน่วยเวลา
  • ลบรูปภาพ
  • เรียกใช้คำสั่ง animate_star 21
• ( ทำเช่นนี้ไปเรื่อยๆ จนกระทั่ง )
• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 28
  • ความเร็ว = 2 x 28 x 28 = 156.8 ซึ่งมากกว่า 150
  • จบการทำงาน

 

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

โปรแกรมที่ 12-3 เมื่อยามซากุระร่วงโรย

TO leaf repeat 90 [ fd 1 rt 1 ] rt 90 repeat 90 [ fd 1 rt 1 ] rt 90 END TO flower repeat 5 [ leaf rt 45 pu fd 10 pd fill bk 10 lt 45 rt 72 ] END TO animate_flower :s if :s < -10 [ stop ] pu setxy 0 (:s * 10) rt (:s * 10) pd lt 45 flower rt 45 wait 5 cs animate_flower :s-1 END setpencolor “#F9BC9D animate_flower 20

 

อธิบายการทำงานของโปรแกรม

• เมื่อโปรแกรมเรียกใช้คำสั่ง animate_flower 20
  • เคลื่อนย้ายตำแหน่งเต่าโลโก้ไปที่ (0, 200) และหมุนขวา 200 องศา
  • วาดรูปดอกไม้ (พร้อมระบายสี)
  • หยุดรอ 5 หน่วยเวลา
  • ลบรูปภาพ
  • เรียกใช้คำสั่ง animate_flower 19
• ( เป็นเช่นนี้ไปเรื่อยๆ จนกระทั่ง animate_flower -10 จึงจบการทำงาน )

 

และนี่คือเรื่องราวของ Animation ทั้งหมดที่นำมาฝากกันในวันนี้ครับ สามารถติดตามตอนต่อไปได้ที่นี่ครับ https://karnlab.com/tag/ภาษาโลโก้