ქაღალდის კარის ზარი W/ P5.js & Makey Makey: 9 ნაბიჯი

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

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

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

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

შეიტყვეთ მეტი p5.js შესახებ:

თუ თქვენ ჯერ არ იყენებთ p5.js– ს Makey Makey– სთან ერთად, გირჩევთ გადახედოთ ამ პროექტს ჯერ:

მარაგები

ფანქარი

ქაღალდის პატარა კვადრატი

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

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

ნაბიჯი 1: აუდიო ფაილის ჩამოტვირთვა

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

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

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

ამ პროექტის კარზე ზარის ხმა გადიოდა https://freesound.org/s/163730/ მოწოდებული ტიმ კანისგან.

თუ გსურთ ხმის გადმოწერა ანგარიშის შექმნის გარეშე, მე გადავიყვანე ხმა mp3 ფორმატში, რომლის გადმოწერაც შეგიძლიათ აქ:

ნაბიჯი 2: აუდიო ფაილის ატვირთვა P5.js– ში

მას შემდეგ რაც გადმოვტვირთეთ ჩვენი ზარის ხმა, ჩვენ უნდა ავტვირთოთ ის ჩვენს p5.js ესკიზში, რათა მასზე წვდომა გვექნება.

ამისათვის მიჰყევით ამ ნაბიჯებს:

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

- დააწკაპუნეთ პატარა მიმართული სამკუთხედზე მარჯვნივ "ესკიზის ფაილების" მარჯვნივ. ეს გამოჩნდება ჩამოსაშლელ მენიუს "საქაღალდის დამატება" და "ფაილის დამატება" პარამეტრებით

- დააწკაპუნეთ 'ფაილის დამატებაზე'. ეს გამოჩნდება ფანჯარა ფაილის დასამატებლად. თქვენ შეგიძლიათ გადაიტანოთ კარის ზარის ფაილი ყუთში ან დააწკაპუნოთ იქ, სადაც ნაჩვენებია "გადაიტანეთ ფაილები აქ ასატვირთად ან დააწკაპუნეთ ფაილების ბრაუზერის გამოსაყენებლად". ეს საშუალებას მოგცემთ ნავიგაცია მოახდინოთ თქვენი კომპიუტერის ფაილებზე, რათა იპოვოთ აუდიო ფაილი.

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

ახლა თქვენ გექნებათ წვდომა და გამოიყენოთ ეს აუდიო ფაილი თქვენს ესკიზში.

ნაბიჯი 3: აუდიო ფაილის ჩატვირთვა P5.js ესკიზში

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

ობიექტის შესაქმნელად, ჩვენ ჯერ უნდა შევქმნათ ცვლადი, რომ შეინარჩუნოს ობიექტი. ეს მოგვცემს წვდომას ობიექტზე და მის თვისებებზე მთლიანი ესკიზის განმავლობაში. ცვლადის შესაქმნელად გადადით ესკიზის ზედა სტრიქონზე და ჩაწერეთ სიტყვა let. ეს სიტყვა გამოიყენება ცვლადის გამოსაცხადებლად javascript– ში. შემდეგ მიეცით ცვლადს სახელი. ჩვენ შეგვიძლია ვუწოდოთ ცვლადს რაც გვსურს, მაგრამ სასარგებლოა მისთვის სახელის მიცემა, რომელიც დაკავშირებულია იმასთან, რასაც ის გააკეთებს ჩვენს კოდში. ამ შემთხვევაში, აზრი აქვს მას კარის ზარი ვუწოდოთ.

კარზე ზარის ნება;

ვინაიდან p5.js არის ინტერნეტში დაფუძნებული, ჩვენ უნდა დავრწმუნდეთ, რომ ესკიზი დაიწყება ესკიზში, სანამ ესკიზი დაიწყებს მუშაობას, წინააღმდეგ შემთხვევაში ჩვენ შეიძლება ვერ შევძლოთ წვდომა ობიექტის თვისებებზე. ამისათვის ჩვენ უნდა დავამატოთ ესკიზის დაწყებამდე აუდიო ფაილის ჩატვირთვის ფუნქცია. ამ ფუნქციას ეწოდება წინასწარ დატვირთვა (). ჩვენ ამას ვწერთ ისევე, როგორც setup () და draw () ფუნქციას.

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

ფუნქციის წინასწარ დატვირთვა () {

კარის ზარი = loadSound ('doorbell.mp3');

}

ნაბიჯი 4: აუდიო ფაილის დაკვრა KeyPressed () ფუნქციის გამოყენებით

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

თუ ადრე იყენებდით კლავიშთა დაჭერას p5.js– ში, თქვენ ალბათ იყენებდით პირობით განცხადებას keyIsPressed ცვლადთან ერთად გათამაშების ფუნქციის შიგნით. თუმცა, აუდიო ფაილებთან მუშაობისას, ჩვენ არ გვსურს მისი გაშვება ხატვის ფუნქციის შიგნით. ხატვის ფუნქცია არის მარყუჟი, ასე რომ ის მუდმივად განახლდება. ეს ნიშნავს, რომ აუდიო ფაილი ითამაშებს ისევ და ისევ, სანამ დააჭირეთ ღილაკს, რომლის მოსმენა არ იქნება სასიამოვნო.

ამის თავიდან ასაცილებლად თქვენ აპირებთ გამოიყენოთ ფუნქცია სახელწოდებით keyPressed (). ეს ასევე იწერება იგივე როგორც setup () და draw () ფუნქცია. ჩაწერეთ ეს კოდის ბოლოში draw () ფუნქციის ქვემოთ.

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

ფუნქცია keyPressed () {

კარზე ზარი. თამაში ();

}

როდესაც თქვენ აკეთებთ თქვენს ესკიზს, შეგიძლიათ დააჭიროთ ღილაკს და კარზე ზარის ხმა გაისმის.

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

ნაბიჯი 5: გააკეთეთ ქაღალდის ღილაკი

Makey Makey– სთან ხმის გასააქტიურებლად, ჩვენ გამოვიყენებთ ჩვეულებრივ ფანქარს და ქაღალდს ღილაკის გასაკეთებლად.

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

დარწმუნდით, რომ შეავსეთ ორივე მხარე ძალიან მუქი ისე, რომ ფანქრის გრაფიტი შეძლებს შეინარჩუნოს მიმდინარეობა Makey Makey– დან.

ორი ნახევარი წრის დიზაინი იმაში მდგომარეობს, რომ მათ შორის ისეთი მცირე უფსკრულია, რომ თითქმის შეუძლებელია ორივე მხარეს ერთდროულად შეხება. ეს საშუალებას გაძლევთ დაასრულოთ მიკროსქემის გასაღები და დედამიწა მაკიაჟის მაკიაჟის გარეშე, მავთულის დაჭერის გარეშე.

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

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

აიღეთ ალიგატორის სამაგრი, რომელიც მიმაგრებულია Space ღილაკზე და მიამაგრეთ იგი ქაღალდის ღილაკის ერთ მხარეს. აიღეთ ალიგატორის სამაგრი, რომელიც მიმაგრებულია დედამიწაზე და მიამაგრეთ იგი ქაღალდის ღილაკის მეორე მხარეს.

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

ნაბიჯი 7: დააჭირეთ ღილაკს აუდიო ფაილის გასააქტიურებლად

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

ნაბიჯი 8: გაფართოება: დაამატეთ ვიზუალური კომპონენტი ესკიზს

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

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

ნაბიჯი 9: გაფართოება: გააკეთეთ წრე ფერის შეცვლისას ღილაკზე დაჭერისას

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

Draw () ფუნქციაში შექმენით წრე ელიფსის () ფუნქციის გამოყენებით. ამის ზემოთ, დაამატეთ fill () ფუნქცია, რომ დაადგინოთ წრის ფერი. ამ ესკიზისთვის, ორიგინალური ფერი იქნება თეთრი, რომელიც არის ნაცრისფერი ფერის 255. თქვენ შეგიძლიათ დააყენოთ ფერი თქვენთვის სასურველზე RGB ფერის მნიშვნელობების გამოყენებით.

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

თუ (keyIsPressed) {

შევსება (255, 255, 0);

}

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

p5.js ესკიზი: