የወረቀት በር ደወል ወ/ P5.js እና Makey Makey: 9 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:30

ማኪ ማኪ ፕሮጀክቶች »

ይህ ፕሮጀክት በ p5.js ውስጥ ረቂቅ ንድፍ ይፈጥራል ፣ ይህም ቁልፍን በመጠቀም የድምጽ ፋይልን ማጫወት የሚችል ሲሆን ከዚያም ድምፁን ለመቀስቀስ በእርሳስ ፣ በወረቀት እና በ Makey Makey ቀለል ያለ ቁልፍ ይሠራል።

ይህ ፕሮጀክት የበር ደወል ድምጽን ሲጠቀም ፣ ደረጃዎቹ የድምፅ ፋይልን ወደ የእርስዎ p5.js ንድፍ እንዴት እንደሚጫኑ ያካትታሉ ፣ ስለሆነም ማንኛውንም ዓይነት ድምጽ ለመጠቀም በቀላሉ ሊስማማ ይችላል።

ስለ p5.js የበለጠ ለመረዳት

ከማኪ ማኪ ጋር p5.js ን ለመጠቀም አዲስ ከሆኑ ፣ ይህንን ፕሮጀክት መጀመሪያ እንዲመለከቱ ሀሳብ አቀርባለሁ-

አቅርቦቶች

እርሳስ

ትንሽ ካሬ ወረቀት

ማኪ ማኪ ኪት (ወ/ 2 የአዞ ክሊፖች)

ላፕቶፕ w/ የበይነመረብ ግንኙነት

ደረጃ 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 Sketch በመጫን ላይ

የድምጽ ፋይልን በ p5.js ንድፍ ውስጥ መጫን የድምፅ ፋይልን ነገር እንድናደርግ ይጠይቃል። አንድ ነገር እኛ ልንጠቀምበት የምንችልበት የራሱ ባህሪዎች እና ተግባራት አሉት።

አንድን ነገር ለመሥራት በመጀመሪያ እቃውን ለመያዝ አንድ ተለዋዋጭ ማድረግ አለብን። ይህ በስዕሉ ውስጥ ያለውን ነገር እና ንብረቶቹን እንድናገኝ ያስችለናል። ተለዋዋጭ ለማድረግ ፣ ወደ ስዕሉ የላይኛው መስመር ይሂዱ እና ይፍቀዱ የሚለውን ቃል ይፃፉ። ይህ ቃል በጃቫስክሪፕት ውስጥ ተለዋዋጭ ለማወጅ ያገለግላል። ከዚያ ለተለዋዋጭ ስም ይስጡ። እኛ የምንፈልገውን ማንኛውንም ተለዋዋጭ ልንጠራው እንችላለን ፣ ግን በእኛ ኮድ ውስጥ ከሚያደርገው ጋር የሚዛመድ ስም መስጠቱ ጠቃሚ ነው። በዚህ ሁኔታ ፣ የበሩን ደወል መጥራት ምክንያታዊ ነው።

የበሩን ደወል ይፍቀዱ;

P5.js በድር ላይ የተመሠረተ እንደመሆኑ ፣ ንድፉ መሥራት ከመጀመሩ በፊት የድምጽ ፋይሉ በስዕሉ ውስጥ መጫኑን ማረጋገጥ አለብን ፣ አለበለዚያ እኛ የነገሩን ባህሪዎች መድረስ አንችልም። ይህንን ለማድረግ ስዕሉ ከመጀመሩ በፊት የድምፅ ፋይሉን ለመጫን ተግባር ማከል አለብን። ይህ ተግባር ቅድመ ጭነት () ተብሎ ይጠራል። እኛ እንደ ቅንብር () እና ስዕል () ተግባር በተመሳሳይ መንገድ እንጽፋለን።

በተጠማዘዘ ቅንፎች ውስጥ የ loadSound () ተግባሩን በመጠቀም የእኛን ተለዋዋጭ ለድምጽ ነገር እንመድባለን። በቅንፍ ውስጥ ፣ በጥቅስ ምልክቶች ውስጥ የኦዲዮ ፋይሉን ትክክለኛ ስም ይፃፉ

ተግባር ቅድመ ጭነት () {

የበር ደወል = loadSound ('በር ደወል. mp3');

}

ደረጃ 4 KeyPressed () ተግባርን በመጠቀም የድምጽ ፋይልን ያጫውቱ

አሁን የድምፅ ፋይሉ ወደ ረቂቅ ተጭኗል ፣ የመጫወቻ () ዘዴን በመጠቀም ማጫወት ይችላሉ። ዘዴዎች በመሠረቱ ለአንድ ነገር የተወሰኑ ተግባራት ናቸው።

ከዚህ በፊት በ p5.js ውስጥ የቁልፍ ማተሚያዎችን ከተጠቀሙ ምናልባት በስዕሉ ተግባር ውስጥ ካለው የቁልፍ አይስፕሬስ ተለዋዋጭ ጋር ሁኔታዊ መግለጫን ይጠቀሙ ይሆናል። ሆኖም ፣ ከድምጽ ፋይሎች ጋር ስንሠራ ፣ በስዕሉ ተግባር ውስጥ ማስነሳት አንፈልግም። የስዕሉ ተግባር ሉፕ ነው ስለዚህ ያለማቋረጥ እየተዘመነ ነው። ይህ ማለት ለማዳመጥ የማይስማማ ቁልፍ እስካልተጫነ ድረስ የድምጽ ፋይሉ ደጋግሞ ይጫወታል ማለት ነው።

ይህንን ለማስቀረት ፣ ቁልፍ (የተጫነ) (ተግባር) የተባለ ተግባር ይጠቀማሉ። ይህ እንደ ማዋቀሩ () እና ስዕል () ተግባር ተመሳሳይ ነው የተፃፈው። ይህንን ከሥዕሉ () ተግባር በታች ባለው ኮድ ታችኛው ክፍል ላይ ይፃፉ።

በተጠማዘዘ ቅንፎች ውስጥ ቁልፍን ሲጫኑ አንድ ጊዜ የድምፅ ፋይሉን የሚቀሰቅሰው የመጫወቻ () ዘዴን ያኖሩበት ነው። ለአንድ ነገር ዘዴ ለመጠቀም ፣ የተከተለውን ነገር የያዘውን ተለዋዋጭ ስም ይፃፉ ።play ();

የተግባር ቁልፍ ተጭኗል () {

የበር ደወል ጨዋታ ();

}

አሁን ንድፍዎን ሲያሄዱ ቁልፍን መጫን ይችላሉ እና የበሩ ደወል ድምጽ ይጫወታል።

አስፈላጊ ማሳሰቢያ: በእኛ ኮዶች ውስጥ የቁልፍ ማተሚያዎችን ሲያክሉ የድር አርታኢው በጽሑፍ አርታኢው ውስጥ ኮድ ለመፃፍ ቁልፍ እየጫንን እንደሆነ ወይም የቁልፍ ፕሬስን የምንጽፍበትን ነገር ለማድረግ ቁልፉን እየጫንነው እንደሆነ ማወቅ አለበት። የማጫወቻ አዝራሩን ጠቅ ሲያደርጉ አይጤውን በሸራ ላይ ያንቀሳቅሱት እና ሸራው ላይ ጠቅ ያድርጉ። ይህ የአርታዒውን ትኩረት ወደ ስዕሉ ያመጣል እና ቁልፍን መጫን የምንፈልገውን የቁልፍ ፕሬስ ኮድ ያስነሳል።

ደረጃ 5: የወረቀት ቁልፍን ያድርጉ

በ Makey Makey ድምፁን ለማነሳሳት ፣ አንድ አዝራር ለመሥራት መደበኛ እርሳስ እና ወረቀት እንጠቀማለን።

ሁለቱንም ግማሾችን በአንድ ጣት ለመንካት በእውነቱ እንዳይነኩ ግን በቂ ቅርብ እንዲሆኑ በመካከላቸው በጣም ትንሽ ክፍተት ያላቸውን ሁለት ግማሽ ክበቦችን ይሳሉ። እያንዳንዱ የግማሽ ክበብ እንዲሁ ወደ ወረቀቱ መጨረሻ የሚዘልቅ ወፍራም መስመር ሊኖረው ይገባል። የአሊጎ ክሊፖችን ከማኪ ማኪ የሚያያይዙበት ይህ ነው።

ከእርሳስ የሚገኘው ግራፋይት የአሁኑን ከማኪ ማኪ እንዲይዝ በሁለቱም በኩል በጣም ጨለማ መሙላቱን ያረጋግጡ።

የሁለት ግማሽ ክበቦች ንድፍ በመካከላቸው እንደዚህ ያለ ትንሽ ክፍተት እንዲኖር በመቻቻል ሁለቱንም ወገኖች በአንድ ጊዜ መንካት የማይቻል ነው። ይህ የመሬት ሽቦውን ሳይይዙ በ Makey Makey ላይ በቁልፍ እና በምድር መካከል ያለውን ወረዳ ለማጠናቀቅ ያስችልዎታል።

ደረጃ 6 - Makey Makey ን ያዋቅሩ

የ Makey Makey ሰሌዳ ፣ የዩኤስቢ ገመድ እና ሁለት የአዞ ክሊፖች ይውጡ። አንድ የአዞ ዘራፊ ቅንጥብ ከምድር እና አንዱን ወደ የጠፈር ቁልፍ ያያይዙ (በእኛ ኮድ ውስጥ ቁልፍ ስላልገለጥን ፣ ማንኛውም የምንጫነው ቁልፍ ድምፁን ያነቃቃል)።

ከጠፈር ቁልፍ ጋር የተጣበቀውን የአዞን ቅንጥብ ይውሰዱ እና ከወረቀት አዝራሩ በአንዱ ጎን ይከርክሙት። ከምድር ጋር የተጣበቀውን የአዞ ዘራፊ ክሊፕ ይውሰዱ እና ከወረቀቱ ቁልፍ በሌላኛው በኩል ይከርክሙት።

የዩ ኤስ ቢ ገመዱን ወደ ላፕቶፕ ይሰኩ።

ደረጃ 7 የድምፅ ፋይሉን ለማነሳሳት ቁልፉን ይጫኑ

በዚህ ጊዜ የበርዎን ደወል ለመደወል ዝግጁ ነዎት። ንድፉን ይጀምሩ (ቁልፉ ተጭኖ የቁልፍ ግፊት () ተግባሩን እንዲፈጽም በሸራ ላይ አይጤውን ጠቅ ማድረጉን ያስታውሱ እና ከዚያ በወረቀቱ ላይ ሁለቱን ግማሽ ክበቦች በተመሳሳይ ጊዜ ይንኩ። የበሩን ደወል የኦዲዮ ፋይል ጨዋታ ድምፅ መስማት አለብዎት።

ደረጃ 8 ፦ ቅጥያ - ወደ ስዕሉ የእይታ ክፍልን ያክሉ

በዚህ ጊዜ የእኛ ንድፍ የኦዲዮ ፋይሉን ለማጫወት ኮድን ብቻ ያካትታል ፣ ስለዚህ በማያ ገጹ ላይ ምንም ለውጥ አይታይም። አንድ ዓይነት በይነተገናኝ የድምፅ ፕሮጀክት ለመፍጠር እየሞከሩ ከሆነ ይህ ማድረግ የሚችሉት ብቻ ሊሆን ይችላል።

ሆኖም ፣ በ p5.js የእይታ ኮድ ችሎታዎች ፣ ግራፊክስ የመጨመር እድሎች ማለቂያ የላቸውም። የድምፅ ፋይሎች በሚጫወቱበት ጊዜ ብቻ መታየት ፣ በድምጽ እና/ወይም ድግግሞሽ ለውጦች ላይ ምላሽ መስጠትን ወይም ለድምፁ ራሱ የእይታ ውክልና ማድረግን ጨምሮ በብዙ መንገዶች ለድምጽ ፋይሎችዎ ምላሽ የሚሰጡ ዕይታዎች ሊኖሩዎት ይችላሉ።

ደረጃ 9 ፦ ቅጥያ ፦ አዝራር ሲጫን ክበብ ቀለም እንዲለወጥ ያድርጉ

ይህንን ፕሮጀክት ቀላል ለማድረግ ፣ አዝራሩ ሲጫን ቀለሙን የሚቀይር ክበብ እንሠራለን።

በስዕሉ () ተግባር ውስጥ የ ellipse () ተግባርን በመጠቀም ክበብ ይፍጠሩ። ከዚህ በላይ የክበቡን ቀለም ለማዘጋጀት የመሙያ () ተግባርን ያክሉ። ለዚህ ንድፍ ፣ የመጀመሪያው ቀለም ነጭ ይሆናል ፣ ይህም የ 255 ግሬስካል እሴት ነው። የ RGB ቀለም እሴቶችን በመጠቀም ለሚፈልጉት ሁሉ ቀለሙን ማዘጋጀት ይችላሉ።

በመሙላት () ተግባር እና በ ellipse () ተግባር መካከል ፣ በቅንፍ ውስጥ ያለውን ቁልፍIsPressed ተለዋዋጭ በመጠቀም ሁኔታዊ መግለጫ ይፍጠሩ። በሁኔታዊ መግለጫው ጠማማ ቅንፎች መካከል ቁልፉን ሲጫኑ ክበቡ እንዲለወጥ በሚፈልጉት ቀለም ላይ ሌላ የመሙላት () ተግባር ያዘጋጁ። ለዚህ ፕሮጀክት ፣ ቀለሙ ወደ ቢጫ ይለወጣል ፣ ይህም የ RGB እሴት 255 ፣ 255 ፣ 0 ነው።

ከሆነ (keyIsPressed) {

መሙላት (255 ፣ 255 ፣ 0);

}

ንድፉን ለማሄድ የማጫወቻ ቁልፍን ይጫኑ። ንድፉ በሚጫንበት ጊዜ ነጩው ክበብ መታየት አለበት (በሸራ ላይ ያለውን መዳፊት ጠቅ ማድረጉን ያስታውሱ)። ከዚያ የወረቀት ቁልፍን ይጫኑ እና የበሩን ደወል ሲሰሙ እና ክበቡ ቀለሙን ሲቀይር ማየት አለብዎት።

p5.js ረቂቅ