კოდირება მარტივი Playdoh Shapes W/ P5.js & Makey Makey: 7 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:16

მაკი მაიკის პროექტები »

ეს არის გამოთვლითი ფიზიკური პროექტი, რომლის საშუალებითაც შეგიძლიათ შექმნათ ფორმა Playdoh– ით, შეიყვანეთ კოდი p5.js– ით და გამოიწვიეთ ეს ფორმა კომპიუტერის ეკრანზე, Playdoh– ის ფორმის შეხებით Makey Makey– ს გამოყენებით.

p5.js არის ღია წყარო, ვებ დაფუძნებული, შემოქმედებითი კოდირების გარემო Javascript– ში. შეიტყვეთ მეტი აქ:

თქვენ არ გჭირდებათ კოდირების გამოცდილება ამ პროექტის შესასრულებლად. ეს შეიძლება გამოყენებულ იქნას როგორც ტექსტზე დაფუძნებული კოდირების შესავალი (განსხვავებით Scratch- ის მსგავსად ბლოკზე დაფუძნებული ენებისგან). თქვენ გჭირდებათ მხოლოდ 4 სტრიქონის ჩაწერა ამ პროექტის დასრულებისთვის. ამ ძირითადი იდეის შეცვლისა და გაფართოების რამდენიმე გზა არსებობს.

მარაგები

Makey Makey ნაკრები (2 ალიგატორის კლიპით)

Playdoh (ნებისმიერი ფერი)

ლეპტოპი ინტერნეტით/ ინტერნეტით

ნაბიჯი 1: შექმენით Playdoh ფორმა

გააკეთეთ ფორმა Playdoh– დან. ეს შეიძლება იყოს წრე, ოვალური, კვადრატი, მართკუთხედი ან სამკუთხედი. იცოდეთ, რომ თქვენ დაგჭირდებათ ამ ფორმის კოდირება მოგვიანებით, ასე რომ რაც უფრო მარტივი იქნება ფორმა, მით უფრო ადვილი იქნება კოდირების ნაწილი. ამასთან, p5.js– ს შეუძლია მრავალი განსხვავებული ფორმის კოდირება, თუნდაც მორგებული, ასე რომ თქვენ შეგიძლიათ გადაწყვიტოთ სირთულის დონე, რომლის გამოცდა გსურთ.

ნაბიჯი 2: დაიწყეთ P5.js– ში

თუ ადრე არ გამოგიყენებიათ p5.js, გირჩევთ გადახედოთ ვებ – გვერდზე დაწყების გვერდს:

მე ასევე გირჩევთ შეამოწმოთ The Coding Train youtube არხი შესანიშნავი გაკვეთილებისთვის p5.js. აქ არის ბმული დასაკრავი სიისთვის, რომელიც გადის ყველა ძირითადს:

ვინაიდან p5.js არის ვებ დაფუძნებული, შეგიძლიათ გააკეთოთ მთელი თქვენი კოდირება ინტერნეტში p5 ვებ რედაქტორის გამოყენებით. თქვენ არ გჭირდებათ ანგარიში ამ პროექტის შესასრულებლად, მაგრამ თუ გსურთ შეინახოთ თქვენი სამუშაო, თქვენ უნდა დარეგისტრირდეთ ანგარიშზე.

ვებ რედაქტორი:

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

თქვენი ფორმის დასაკოდირებლად, თქვენ დაგჭირდებათ მხოლოდ ხაზის () ფუნქციის შიგნით კოდის დამატება.

თითოეულ ფორმას აქვს თავისი ფუნქცია, რათა ის ტილოზე გამოჩნდეს. აქ არის 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– სთან ერთად, ჩვენ უნდა დავამატოთ კოდი, რომ რაღაც მოხდეს, როდესაც კლავიშს კლავიშზე დავაჭერთ. ამ შემთხვევაში, ჩვენ გვსურს, რომ ფორმა გამოჩნდეს მხოლოდ ღილაკზე დაჭერის შემთხვევაში. ამისათვის ჩვენ გვჭირდება პირობითი განცხადება. ეს ნიშნავს, რომ რაღაც ჩვენს კოდში მოხდება მხოლოდ იმ შემთხვევაში, თუ გარკვეული პირობა დაკმაყოფილებულია, ამ შემთხვევაში, გასაღები დაჭერილია.

ამ პირობითი განცხადების დასაპირობებლად, ჩვენ ვიწყებთ სიტყვით, თუ ამას მოყვება ფრჩხილები. ფრჩხილების შიგნით იქნება ის მდგომარეობა, რომლის დაკმაყოფილებაც გვინდა. P5.js– ში არის ჩაშენებული ცვლადი სახელწოდებით keyIsPressed (დარწმუნდით, რომ თქვენ იყენებთ დიდი ასოებით ზუსტად ისე, როგორც აქ დაწერილს). keyIsPressed არის ლოგიკური ცვლადი. ეს ნიშნავს, რომ მას შეიძლება ჰქონდეს მნიშვნელობა ჭეშმარიტი ან მცდარი. როდესაც გასაღები დაჭერილია, მისი მნიშვნელობა არის ჭეშმარიტი და როდესაც ის არ არის დაჭერილი, მისი მნიშვნელობა ყალბია.

ბოლოს ჩვენ ვამატებთ ხვეული ფრჩხილების ნაკრებს {}. შიგნით ხვეული ფრჩხილებში იქნება კოდი, რომლის შესრულებაც ჩვენ გვსურს, თუ ჩვენი პირობა დაკმაყოფილებულია. ასე რომ, ჩვენ უბრალოდ ვაყენებთ ჩვენს კოდს, რათა ფორმა მოვახდინოთ იმ ხვეულ ფრჩხილებს შორის.

როდესაც ჩვენ ვაკეთებთ ჩვენს ესკიზს, ჩვენ ვერ ვხედავთ ფორმას, სანამ კლავიშზე კლავიშს არ დავაჭერთ.

მნიშვნელოვანი შენიშვნა: როდესაც ჩვენს კლავიშზე კლავიშს ვამატებთ, ვებ რედაქტორმა უნდა იცოდეს, ტექსტურ რედაქტორში კოდის დასაწერად ვაჭერთ თუ არა ღილაკს, რათა გავაკეთოთ ის, რისი კოდირებაც ჩვენთვისაა გასაღები. როდესაც დააჭერთ დაკვრის ღილაკს, გადაიტანეთ მაუსი ტილოზე და დააწკაპუნეთ ტილოზე. ეს მიიყვანს რედაქტორის ფოკუსს ესკიზზე და ღილაკის დაჭერა გამოიწვევს კლავიშთა პრესის კოდის მოხდენას

ნაბიჯი 5: შექმენით Makey Makey

ამოიღეთ Makey Makey დაფა, USB კაბელი და ორი ალიგატორის კლიპი. მიამაგრეთ ერთი ალიგატორის კლიპი დედამიწაზე და ერთი სივრცის გასაღები (რადგან ჩვენ არ გვაქვს მითითებული გასაღები ჩვენს კოდში, ნებისმიერი ღილაკი, რომელსაც ჩვენ დავაჭერთ, გამოიწვევს ფორმის გამოჩენას).

აიღეთ ალიგატორის კლიპი, რომელიც მიმაგრებულია Space ღილაკზე და დააჭირეთ მეორე ბოლოს Playdoh ფორმაში.

შეაერთეთ USB კაბელი ლეპტოპში.

ნაბიჯი 6: შეეხეთ Playdoh Shape- ს

დაიჭირეთ ალიგატორის სამაგრის ლითონის ბოლო, რომელიც მიმაგრებულია დედამიწაზე მაკია მაკიზე და შეეხეთ პლეიდოჰის ფორმას. როდესაც შეხებით Playdoh ფორმას, კოდირებული ფორმა უნდა გამოჩნდეს თქვენი ესკიზის ტილოზე.

აქ მოცემულია ამ პროექტის p5.js ესკიზის ბმული:

თუ ფორმა არ ჩანს:

1. დარწმუნდით, რომ თქვენ დააწკაპუნეთ მაუსზე p5.js ესკიზის ტილოზე სანამ Playdoh– ს შეეხებით.

2. დარწმუნდით, რომ გეჭირათ დედამიწის მავთულის ლითონის სამაგრ.

ნაბიჯი 7: განსხვავებული ფორმები

ყვითელი სამკუთხედი:

ლურჯი მოედანი: