วาดรูปด้วยภาษาโลโก้ : ตอนที่ 8 – สีสัน

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

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

คำสั่ง	ความสามารถ	ตัวอย่าง
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

 

กำหนดขนาดปากกาด้วยคำสั่ง setpensize

setpensize ขนาด

คำสั่งนี้ใช้สำหรับกำหนดความหนาของปากกา (pixel) ทำให้รูปภาพที่เราวาดมีความหนาบางของเส้น ดังตัวอย่าง

cs st setscreencolor 7 setpencolor 0 rt 45 pu setxy -200 0 pd setpensize 1 fd 200 bk 200 pu setxy -150 0 pd setpensize 2 fd 200 bk 200 pu setxy -100 0 pd setpensize 3 fd 200 bk 200 pu setxy -50 0 pd setpensize 4 fd 200 bk 200 pu setxy -0 0 pd setpensize 5 fd 200 bk 200 pu setxy 50 0 pd setpensize 6 fd 200 bk 200 pu setxy 100 0 pd setpensize 7 fd 200 bk 200

 

กำหนดสีปากกาด้วยคำสั่ง setpencolor

setpencolor รหัสสี

คำสั่งนี้ใช้สำหรับกำหนดสีของปากกา โดยรหัสสีแบ่งเป็น 3 ประเภท คือ

1. LOGO Color คือรหัสสีของภาษาโลโก้ มีทั้งหมด 16 สี โดยมีค่าตั้งแต่ 0 ถึง 15 ดังรูป
   (รูปภาพ)
2. CSS Color คือชื่อสีตามมาตรฐาน CSS เช่น red green blue yellow gold silver เป็นต้น ซึ่งเป็นมาตรฐานเดียวกับที่ใช้บนเว็บไซต์ น้องๆ สามารถค้นหาชื่อสีได้ที่ลิ้งค์นี้ครับ https://www.w3com/cssref/css_colors.asp
   (รูปภาพ)
3. RGB Code Color คือรหัสสี RGB ซึ่งอยู่ในรูปแบบเลขฐาน 16 #RRGGBB การระบุรหัสสีแบบนี้จะทำให้เราได้สีมากถึง 256 x 256 x 256 = 16,777,216 สีเลยทีเดียว แต่การจะใช้รหัสสีนี้น้องๆ ต้องมีความเข้าใจเกี่ยวกับระบบสี RGB เสียก่อน ซึ่งน้องๆ สามารถศึกษาเพิ่มเติมได้ที่นี่ครับ https://en.wikipedia.org/wiki/RGB_color_model

ต่อไปจะเป็นโค้ดตัวอย่างการใช้คำสั่ง setpencolor ครับ

cs st setscreencolor 7 setpensize 5 rt 45 pu setxy -250 0 pd setcolor 5 fd 200 bk 200 pu setxy -200 0 pd setcolor 3 fd 200 bk 200 pu setxy -150 0 pd setcolor 6 fd 200 bk 200 pu setxy -100 0 pd setcolor “Pink fd 200 bk 200 pu setxy -50 0 pd setcolor “SkyBLue fd 200 bk 200 pu setxy 0 0 pd setcolor “Gold fd 200 bk 200 pu setxy 50 0 pd setcolor “#F5AFB4 fd 200 bk 200 pu setxy 100 0 pd setcolor “#91C8EB fd 200 bk 200 pu setxy 150 0 pd setcolor “#FADC87 fd 200 bk 200

 

ระบายสีรูปภาพด้วยคำสั่ง fill

fill

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

TO triangle :size repeat 3 [ fd :size rt 120 ] END TO square :size repeat 4 [ fd :size rt 90 ] END TO circle :size arc 360 :size/2 END cs st setscreencolor 7 setpencolor “Gray setpensize 1 setpencolor “Orange pu setxy -150 0 pd rt 30 triangle 100 lt 30 pu rt 45 fd 10 fill lt 45 pd setpencolor “Violet pu setxy 0 0 pd square 100 pu rt 45 fd 10 fill lt 45 pd setpencolor “Turquoise pu setxy 200 50 pd circle 100 fill

 

กำหนดสีพื้นหลังด้วยคำสั่ง setscreencolor

setpencolor รหัสสี

คำสั่งนี้ใช้สำหรับกำหนดสีของพื้นหลัง โดยรหัสสีที่ใช้เหมือนกับคำสั่ง setpencolor ดังโค้ดตัวอย่าง

setscreencolor 15 setscreencolor “gray setscreencolor “#808080

 

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

 

รูปภาพที่ #1 ดอกไม้ยามเช้า

TO core repeat 12 [ repeat 360 [ fd 0.5 rt 1 ] rt 30 ] END TO leaf pu fd 100 rt 90 pd arc 90 100 pu fd 100 rt 90 fd 100 rt 90 pd arc 90 100 pu fd 100 rt 90 pd END cs ht setscreencolor “lightcyan setpencolor “greenyellow setpensize 8 bk 200 fd 200 setpencolor “orange setpensize 2 repeat 12 [ leaf rt 30 ] setpencolor “brown setpensize 2 core

อธิบายสั้นๆ

• setscreencolor “lightcyan == ตั้งค่าสีพื้นหลังให้เป็นสีฟ้า
• setpencolor “greenyellow setpensize 8 bk 200 fd 200 == วาดก้านดอกไม้
• setpencolor “orange setpensize 2 repeat 12 [ leaf rt 30 ] == วาดกลีบดอกไม้
• setpencolor “brown setpensize 2 core == วาดเกสรดอกไม้

 

รูปภาพที่ #2 ลูกโป่งยามบ่าย

TO circle :size arc 360 :size/2 END cs ht setscreencolor “lightcyan pu lt 90 fd 150 rt 90 pd setpencolor “#F5AFB4 circle 100 fill setpencolor “LightGray pu bk 50 pd bk 100 pu fd 150 pd pu rt 90 fd 150 lt 90 pd setpencolor “#91C8EB circle 100 fill setpencolor “LightGray pu bk 50 pd bk 100 pu fd 150 pd pu rt 90 fd 150 lt 90 pd setpencolor “#FADC87 circle 100 fill setpencolor “LightGray pu bk 50 pd bk 100 pu fd 150 pd

อธิบายสั้นๆ

• setscreencolor “lightcyan == ตั้งค่าสีพื้นหลังให้เป็นสีฟ้า
• pu lt 90 fd 150 rt 90 pd == เคลื่อนที่เต่าโลโก้ไปยังตำแหน่งที่ต้องการ
• setpencolor “#F5AFB4 circle 100 fill == วาดลูกโป่ง
• setpencolor “LightGray pu bk 50 pd bk 100 pu fd 150 pd == วาดก้านลูกโป่ง

 

รูปภาพที่ #3 หิมะยามเย็น

TO snow :size repeat 6 [ fd :size lt 30 fd :size bk :size rt 60 fd :size bk :size lt 30 bk :size rt 60 ] END cs ht setscreencolor “MistyRose setpencolor “SkyBlue  setpensize 3 pu setxy -350 -20 pd snow 9 pu setxy -280 20 pd snow 12 pu setxy -200 0 pd snow 15 pu setxy -120 50 pd snow 20 pu setxy -40 -30 pd snow 27 pu setxy 100 40 pd snow 36 pu setxy 300 -20 pd snow 48

อธิบายสั้นๆ

• setscreencolor “MistyRose == ตั้งค่าสีพื้นหลังให้เป็นสีส้มอ่อน
• setpencolor “SkyBlue setpensize 3 == ตั้งค่าสีของปากกา
• pu setxy -350 -20 pd snow 9 == วาดหิมะ

 

รูปภาพที่ #4 ดอกไม้ไฟยามค่ำคืน

TO firework :size :color setpencolor :color repeat 8 [ repeat 2 [ pu fd :size pd fd :size ] pu bk :size*4 pd rt 45 ] END cs ht setscreencolor 0 setpensize 3 pu setxy 0 0 firework 25 1 pu setxy -100 150 firework 20 2 pu setxy -200 50 firework 15 3 pu setxy 50 100 firework 30 4 pu setxy 200 -25 firework 10 5 pu setxy 275 -75 firework 10 6

อธิบายสั้นๆ

• setscreencolor “MistyRose == ตั้งค่าสีพื้นหลังให้เป็นสีส้มอ่อน
• setpencolor “SkyBlue setpensize 3 == ตั้งค่าสีของปากกา
• pu setxy -350 -20 pd snow 9 == วาดหิมะ

 

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

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