หลาย ๆ ท่านที่ติดตามช่องทาง TikTok และ Social Media ต่าง ๆ ของ Young Nestling – Art & Code Studio คงได้ดูกันไปอยู่บ้างแล้วกับซีรีส์การสอนสั้น ๆ ที่เราทำออกมาอย่างต่อเนื่อง ซึ่งจริง ๆ เราแบ่งเนื้อหาออกเป็น 3 ซีรี่ ได้แก่ งานวาดรูปดิจิทัล, การปั้น 3D และการโค้ดดิ้งด้วย P5.js
ในบทความนี้เรามาเจาะกันที่ลิสท์คลิปวิดีโอ ที่ทั้งได้ไอเดีย ได้เทคนิควิธีทำ และได้ความฮาในบางตอนกันค่ะ แต่ก็ต้องบอกก่อนตรงนี้ว่า เราไม่ได้สอนตั้งแต่ 0 หรืออธิบายทุกคำสั่ง ดังนั้น ซีรี่นี้ก็อาจจะเหมาะกับนร.ของเราที่พอเขียน Programming มาบ้างแล้วโดยเฉพาะภาษา JavaScript หรือผู้สนใจท่านอื่น ๆ เพราะ P5.js เองก็คือ Library หนึ่งของ JavaScript ที่ถูกสร้างขึ้นมารองรับการเรียนการสอนของศิลปิน, นักออกแบบ และนักเรียนคนเก่งอย่างพวกนี้เราละ!
สำหรับการสอนโค้ดดิ้ง P5.js จะแบ่งหมวดหมู่การเรียนรู้ออกเป็น 3 หมวดดังนี้
🎨 หมวดที่ 1: Creative Art & Visual Effects (เน้นศิลปะและการแสดงผล)
เริ่มต้นด้วยการเปลี่ยนโค้ดให้กลายเป็นพู่กันดิจิทัล น้องๆ จะได้เรียนรู้วิธีการใช้คำสั่งพื้นฐานสร้างงานศิลปะที่ขยับได้จริง
- วาดเส้นสีด้วย Code ง่าย ๆ : เรียนรู้การสร้างจุดและเส้นที่เคลื่อนไหวอย่างอิสระบนหน้าจอ วาดเส้นสีด้วย Code https://www.tiktok.com/@ynacschool/video/7544773535378492690
- สร้างจุด แบบ Particle โยงกันได้ ด้วย Code: สร้าง element ที่มีความเชื่อมโยงกันบนพื้นที่อย่างสวยงาม ซึ่งเป็นแนวคิดพื้นฐานของการสร้าง Particle ที่ซับซ้อนนั้นเอง https://www.tiktok.com/@ynacschool/video/7608536309933624596
- สร้างภาพระบายสีและแอพวาด Mandala: การใช้ตรรกะความสมมาตรมาสร้างสรรค์ลวดลายที่ซับซ้อนและสวยงาม วาดภาพมันดาลา ความสวยงามแห่งความสมมาตร (Mandala) https://www.tiktok.com/@ynacschool/video/7563323618055245063
- ทำตาตุ๊กตาดุ๊กดิ๊ก: ฝึกการใช้ตัวแปร (Variables) มาควบคุมการเคลื่อนไหว element กับเม้าท์ ทำตาดุ๊กดิ๊กได้ด้วย Code https://www.tiktok.com/@ynacschool/video/7552964874540731666
- กล่องหมุนเปลี่ยนสี: สีสันของวัตถุ 3 มิติเบื้องต้นที่แสดงผลบน Internet Browser ทำกล่องหมุนเปลี่ยนสีได้ https://www.tiktok.com/@ynacschool/video/7628911738368691477
🎮 หมวดที่ 2: Mini-Game Logic (เน้นตรรกะการสร้างเกมเบื้องต้น)
เมื่อเริ่มคุ้นเคยกับคำสั่งวาดภาพ เราจะขยับมาเรียนรู้การวาง “เงื่อนไข” (Conditions) เพื่อเปลี่ยนงานศิลปะให้กลายเป็นเกมที่โต้ตอบได้
- เกมคลิกวงกลม Speed Click: เรียนรู้เรื่องการตรวจสอบการคลิกเมาส์ (Mouse Interaction) และการเปรียบเทียบค่าสี https://www.tiktok.com/@ynacschool/video/7626983635782028564
- สร้างเกมจับคู่สีด้วย Code: มินิเกมที่เล่นได้ทุกเทศกาล เน้นความไวของสายตาและการตัดสินใจ https://www.tiktok.com/@ynacschool/video/7620000287721327890
- เกมแมวไล่จับหนู: ประยุกต์ใช้ความรู้เรื่องตำแหน่งของเม้าท์ง่าย ๆ ด้วยการเพิ่มกฏกติกาในการใช้งาน กลายเป็นเกมที่ใช้เม้าท์ควบคุม สนุก สร้างสรรค์ เปลี่ยนรูปตัวละครไล่จับได้ด้วยนะ https://www.tiktok.com/@ynacschool/video/7580633599368563988
- และเกมยิงเอเลี่ยน: ฝึกการคำนวณระยะห่างระหว่างวัตถุและการสร้างระบบคะแนน https://www.tiktok.com/@ynacschool/video/7613770926533922069
- สร้างเกม Simon Says: ท้าทายทักษะการวางระบบจดจำลำดับ (Arrays) เพื่อฝึกสมองผ่านเกมยอดฮิต https://www.tiktok.com/@ynacschool/video/7625244212577062165
🚀 หมวดที่ 3: Advanced Game Mechanics (เน้นกลไกเกมที่ซับซ้อน)
ในช่วงท้ายของซีรีส์ น้องๆ จะได้ลองสร้างเกมที่มีกลไกการเล่น (Gameplay) ที่สมบูรณ์แบบเหมือนเกมจริงๆ
- สร้างเกมงู (Snake Game): เรียนรู้หนึ่งในเกมคลาสสิกที่ต้องใช้ความเข้าใจเรื่องทิศทางและการต่อความยาวของข้อมูล https://www.tiktok.com/@ynacschool/video/7605211655479381264
- เกมเก็บผลไม้: ฝึกการจัดการแรงโน้มถ่วงจำลอง (Physics) และการสุ่มเกิดของวัตถุ (Randomization) https://www.tiktok.com/@ynacschool/video/7599140018346642706
- ทำเกมวิ่งกระโดดง่ายๆ: https://www.tiktok.com/@ynacschool/video/7600663983074413831
- ทำเกมแบบ Popcat / Clicker: การสร้างระบบสะสมยอดคลิกที่กำลังเป็นกระแส เพื่อให้เห็นว่าเราก็สร้างนวัตกรรมระดับโลกได้ด้วยตัวเอง ทำเกมแบบ Popcat https://www.tiktok.com/@ynacschool/video/7623721821120105748
✨ ถ้าได้เข้าไปดูกันแล้ว อย่าลืมกดไลค์กดแชร์ให้กำลังใจพี่ๆและคุณครูใจดี YNAC ที่ตั้งใจทำคลิปสอนเหล่านี้ออกมาด้วยนะคะ 🙂
@ynacschool
