การเข้ารหัสรูปร่าง Playdoh อย่างง่ายด้วย P5.js & Makey Makey: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

โครงการ Makey Makey »

นี่เป็นโปรเจ็กต์การคำนวณทางกายภาพที่ให้คุณสร้างรูปร่างด้วย Playdoh โค้ดที่สร้างรูปร่างโดยใช้ p5.js และเรียกรูปร่างนั้นให้ปรากฏบนหน้าจอคอมพิวเตอร์โดยแตะรูปร่าง Playdoh โดยใช้ Makey Makey

p5.js เป็นสภาพแวดล้อมการเขียนโค้ดเชิงสร้างสรรค์แบบโอเพนซอร์ส บนเว็บใน Javascript เรียนรู้เพิ่มเติมที่นี่:

คุณไม่จำเป็นต้องมีประสบการณ์การเขียนโค้ดใดๆ เพื่อทำโปรเจ็กต์นี้ ซึ่งสามารถใช้เป็นข้อมูลเบื้องต้นเกี่ยวกับการเข้ารหัสแบบข้อความ (ซึ่งต่างจากภาษาที่ใช้บล็อกเช่น Scratch) คุณต้องเขียนโค้ด 4 บรรทัดเท่านั้นจึงจะเสร็จสิ้นโครงการนี้ มีหลายวิธีที่คุณสามารถเปลี่ยนแปลงและขยายแนวคิดพื้นฐานนี้ได้

เสบียง

Makey Makey Kit (พร้อมคลิปจระเข้ 2 ตัว)

Playdoh (สีใดก็ได้)

แล็ปท็อปพร้อมการเชื่อมต่ออินเทอร์เน็ต

ขั้นตอนที่ 1: สร้างรูปร่าง Playdoh

สร้างรูปร่างจาก Playdoh นี่อาจเป็นวงกลม วงรี สี่เหลี่ยม สี่เหลี่ยม หรือสามเหลี่ยม โปรดทราบว่าคุณจะต้องเขียนโค้ดรูปร่างนี้ในภายหลัง ดังนั้นยิ่งรูปร่างเรียบง่ายเท่าใด ส่วนการเข้ารหัสก็จะยิ่งง่ายขึ้นเท่านั้น อย่างไรก็ตาม p5.js สามารถเขียนโค้ดรูปทรงต่างๆ ได้มากมาย แม้กระทั่งรูปทรงที่กำหนดเอง ดังนั้นคุณจึงสามารถตัดสินใจระดับความยากที่คุณต้องการลองได้

ขั้นตอนที่ 2: เริ่มต้นใน P5.js

หากคุณไม่เคยใช้ p5.js มาก่อน ขอแนะนำให้ตรวจสอบหน้าเริ่มต้นใช้งานบนเว็บไซต์:

ฉันขอแนะนำอย่างยิ่งให้ตรวจสอบช่อง YouTube ของ The Coding Train สำหรับบทแนะนำที่ยอดเยี่ยมเกี่ยวกับการใช้ p5.js นี่คือลิงก์ไปยังเพลย์ลิสต์ที่อธิบายพื้นฐานทั้งหมด:

เนื่องจาก p5.js เป็นแบบเว็บ คุณจึงเขียนโค้ดทั้งหมดบนเว็บได้โดยใช้ p5 Web Editor คุณไม่จำเป็นต้องมีบัญชีเพื่อทำโครงการนี้ แต่ถ้าคุณต้องการบันทึกงานของคุณ คุณจะต้องลงชื่อสมัครใช้บัญชี

บรรณาธิการเว็บ:

โปรแกรมแก้ไขเว็บ p5.js มีพื้นที่สำหรับเขียนโค้ดทางด้านซ้ายและผ้าใบซึ่งจะแสดงผลลัพธ์ของโค้ดทางด้านขวา

สเก็ตช์ p5.js แต่ละรายการมีฟังก์ชัน setup() และฟังก์ชัน draw() ฟังก์ชัน setup() จะทำงานหนึ่งครั้งเมื่อร่างแรกเริ่ม ในฟังก์ชัน setup() คือฟังก์ชัน createCanvas ซึ่งจะสร้างช่องว่างที่รูปร่างของคุณจะถูกวาด ตัวเลขในวงเล็บของฟังก์ชัน createCanvas จะกำหนดแกน X (ซ้ายไปขวา) และแกน Y (บนลงล่าง) ของผืนผ้าใบ ตัวเลขเริ่มต้นคือ 400, 400 ซึ่งหมายความว่าผ้าใบของคุณคือ 400 พิกเซลจากซ้ายไปขวา และ 400 พิกเซลจากบนลงล่าง (คุณสามารถเปลี่ยนค่าเหล่านี้ให้เหมาะกับความต้องการของคุณได้เสมอ) โปรดทราบว่ามุมซ้ายบนของผืนผ้าใบคือจุด 0, 0 สิ่งนี้สำคัญที่ต้องทราบเมื่อคุณเขียนโค้ดรูปร่างของคุณ

ฟังก์ชัน draw() ทำงานเป็นลูปซึ่งหมายความว่ามีการอัปเดตอย่างต่อเนื่องประมาณ 60 ครั้งต่อวินาที ซึ่งจะทำให้เราสามารถสร้างแอนิเมชั่นในแบบสเก็ตช์ของเราได้ ภายในฟังก์ชัน draw() เป็นฟังก์ชันพื้นหลังที่เพิ่มสีสันให้กับผืนผ้าใบของเรา ค่าเริ่มต้นคือ 220 ซึ่งเป็นค่าระดับสีเทา 0 = สีดำ 255 = สีขาว และตัวเลขระหว่างนั้นจะเป็นสีเทาต่างๆ ฟังก์ชันพื้นหลังสามารถรับค่า RGB ซึ่งช่วยให้เราเพิ่มสีได้ เพิ่มเติมเกี่ยวกับเรื่องนี้ในขั้นตอนต่อไป

ขั้นตอนที่ 3: เขียนโค้ดรูปร่างของคุณใน P5.js

ในการโค้ดรูปร่างของคุณ คุณจะต้องเพิ่มโค้ดในบรรทัดของฟังก์ชัน draw() เท่านั้น

แต่ละรูปร่างมีฟังก์ชันของตัวเองเพื่อให้ปรากฏบนผืนผ้าใบ นี่คือหน้าอ้างอิงสำหรับรูปร่างทั้งหมดใน p5.js:

ในการสร้างวงกลม เราจะใช้ฟังก์ชันวงรี ฟังก์ชันนี้รับ 3 อาร์กิวเมนต์ (ตัวเลขที่อยู่ในวงเล็บ) ตัวเลขแรกคือตำแหน่ง X ของจุดศูนย์กลางของวงกลมบนผืนผ้าใบ และตัวเลขที่สองคือตำแหน่ง Y บนผืนผ้าใบ จำไว้ว่ามุมบนซ้ายคือ 0, 0 และผ้าใบขนาด 400 x 400 พิกเซล ดังนั้น ถ้าฉันต้องการให้วงกลมปรากฏตรงกลางผืนผ้าใบ ฉันจะวางวงกลมไว้ที่ 200 บนแกน X และ 200 บนแกน Y คุณสามารถทดลองกับตัวเลขเหล่านี้เพื่อให้เข้าใจถึงวิธีการวางสิ่งของบนผืนผ้าใบ

ตัวเลขที่สามกำหนดขนาดของวงกลม สำหรับตัวอย่างนี้ มีการตั้งค่าเส้นผ่านศูนย์กลาง 100 พิกเซล ฟังก์ชันวงรีสามารถรับอาร์กิวเมนต์ที่สี่ได้ ซึ่งจะเปลี่ยนอาร์กิวเมนต์ที่สามให้ส่งผลต่อเส้นผ่านศูนย์กลาง X และอาร์กิวเมนต์ที่สี่จะเป็นเส้นผ่านศูนย์กลาง Y สามารถใช้ทำรูปวงรีแทนวงกลมที่กลมสมบูรณ์

ในการกำหนดสีของรูปร่าง เราใช้ฟังก์ชันเติม สิ่งนี้ใช้ 3 อาร์กิวเมนต์ซึ่งเป็นค่า RGB (R = สีแดง, G = สีเขียว, B = สีน้ำเงิน) แต่ละค่าสามารถเป็นตัวเลขได้ระหว่าง 0 ถึง 255 ตัวอย่างเช่น หากต้องการให้สีแดง เราจะใส่ 255, 0, 0 ซึ่งจะเป็นสีแดงทั้งหมดโดยไม่มีสีเขียวหรือสีน้ำเงิน การผสมตัวเลขเหล่านี้ต่างกันจะสร้างสีที่ต่างกัน

มีเว็บไซต์หลายแห่งที่ให้ค่า RGB สำหรับสีต่างๆ มากมาย เช่น

เมื่อคุณพบค่า RGB ที่ตรงกับสีของ PlayDoh แล้ว ให้เขียนฟังก์ชันเติมเหนือฟังก์ชันรูปร่าง

จากนั้นคุณสามารถคลิกปุ่มเล่นในตัวแก้ไขเว็บและคุณจะเห็นรูปร่างของคุณปรากฏบนหน้าจอ

ขั้นตอนที่ 4: ทำให้รูปร่างของคุณปรากฏด้วยการกดปุ่ม

เนื่องจากเราต้องการให้ภาพสเก็ตช์ p5.js โต้ตอบกับ Makey Makey เราจึงต้องเพิ่มโค้ดเพื่อให้บางสิ่งเกิดขึ้นเมื่อเรากดปุ่มบนแป้นพิมพ์ ในกรณีนี้ เราต้องการให้รูปร่างปรากฏก็ต่อเมื่อเรากดปุ่ม การทำเช่นนี้เราจำเป็นต้องมีคำสั่งแบบมีเงื่อนไข ซึ่งหมายความว่าบางสิ่งในรหัสของเราจะเกิดขึ้นก็ต่อเมื่อตรงตามเงื่อนไขบางประการ ในกรณีนี้ จะมีการกดปุ่ม

ในการสร้างเงื่อนไขประโยคเงื่อนไขนี้ เราเริ่มต้นด้วยคำว่า if ตามด้วยวงเล็บ ภายในวงเล็บจะเป็นเงื่อนไขที่เราต้องการให้บรรลุ ใน p5.js มีตัวแปรบิวท์อินที่เรียกว่า keyIsPressed (ตรวจสอบให้แน่ใจว่าคุณใช้อักษรตัวพิมพ์ใหญ่เหมือนกับที่เขียนไว้ที่นี่) keyIsPressed เป็นตัวแปรบูลีน ซึ่งหมายความว่าสามารถมีค่าได้จริงหรือเท็จ เมื่อกดคีย์จะเป็นค่าจริงและเมื่อไม่ได้กดจะเป็นค่าเท็จ

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

เมื่อเรารันสเก็ตช์ เราจะไม่เห็นรูปร่างจนกว่าเราจะกดแป้นบนแป้นพิมพ์

หมายเหตุสำคัญ: เมื่อเพิ่มการกดแป้นลงในโค้ดของเรา โปรแกรมแก้ไขเว็บจำเป็นต้องทราบว่าเรากำลังกดแป้นเพื่อเขียนโค้ดในโปรแกรมแก้ไขข้อความหรือไม่ หรือเรากำลังกดปุ่มเพื่อดำเนินการในสิ่งที่เราเขียนโค้ดโดยกดปุ่มเพื่อดำเนินการ เมื่อคุณคลิกปุ่มเล่น ให้เลื่อนเมาส์ไปบนผืนผ้าใบและคลิกบนผืนผ้าใบ สิ่งนี้จะนำจุดสนใจของบรรณาธิการมาสู่ภาพร่างและการกดปุ่มจะเรียกรหัสการกดปุ่มที่เราต้องการให้เกิดขึ้น

ขั้นตอนที่ 5: ตั้งค่า Makey Makey

นำบอร์ด Makey Makey, สาย USB และคลิปจระเข้สองตัวออกมา แนบคลิปจระเข้หนึ่งคลิปกับ Earth และอีกคลิปหนึ่งกับปุ่ม Space (เนื่องจากเราไม่ได้ระบุคีย์ในโค้ดของเรา คีย์ใดๆ ที่เรากดจะทำให้รูปร่างปรากฏขึ้น)

นำคลิปจระเข้ที่ติดมากับปุ่ม Space แล้วกดปลายอีกด้านหนึ่งให้เป็นรูปร่าง Playdoh

เสียบสาย USB เข้ากับแล็ปท็อป

ขั้นตอนที่ 6: แตะ Playdoh Shape

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

นี่คือลิงค์ไปยังสเก็ตช์ p5.js สำหรับโครงการนี้:

หากรูปร่างไม่ปรากฏ:

1. ตรวจสอบให้แน่ใจว่าคุณได้คลิกเมาส์บนผืนผ้าใบของภาพสเก็ตช์ p5.js ก่อนแตะ Playdoh

2. ตรวจสอบให้แน่ใจว่าคุณถือคลิปโลหะของสายดิน

ขั้นตอนที่ 7: รูปร่างที่แตกต่างกัน

สามเหลี่ยมเหลือง

บลูสแควร์: