W/ P5.js және Makey Makey қарапайым Playdoh пішіндерін кодтау: 7 қадам

2025 Автор: John Day | [email protected]. Соңғы өзгертілген: 2025-01-23 14:51

Макей Макей жобалары »

Бұл физикалық есептеу жобасы, ол сізге Playdoh көмегімен пішін құруға мүмкіндік береді, p5.js көмегімен кодты шығарады және Makey Makey көмегімен Playdoh пішінін түрту арқылы компьютердің экранында пайда болады.

p5.js - бұл JavaScript -те ашық бастапқы, веб -негізделген, шығармашылық кодтау ортасы. Толығырақ мына жерден біліңіз:

Бұл жобаны орындау үшін сізге кодтау тәжірибесі қажет емес. Бұл мәтінге негізделген кодтауға кіріспе ретінде қолданылуы мүмкін (Scratch сияқты блокталған тілдерге қарағанда). Бұл жобаны аяқтау үшін сізге тек 4 жол кодын жазу қажет. Бұл негізгі идеяны өзгертудің және кеңейтудің бірнеше жолы бар.

Жабдықтар

Makey Makey жиынтығы (2 аллигатор клиптерімен)

Playdoh (кез келген түс)

Ноутбук Интернетке қосылған

1 -қадам: Playdoh пішінін жасаңыз

Playdoh пішінін жасаңыз. Бұл шеңбер, сопақ, шаршы, тіктөртбұрыш немесе үшбұрыш болуы мүмкін. Бұл пішінді кейінірек кодтау қажет болатынын біліңіз, сондықтан пішін неғұрлым қарапайым болса, кодтау бөлігі соғұрлым жеңіл болады. Алайда, p5.js әр түрлі пішіндерді, тіпті реттелетіндерді де кодтай алады, сондықтан сіз көргіңіз келетін қиындық деңгейі туралы шешім қабылдай аласыз.

2 -қадам: P5.js -те бастаңыз

Егер сіз бұрын p5.js қолданбаған болсаңыз, мен веб-сайттың бастапқы бетін тексеруді ұсынамын:

Мен сонымен қатар p5.js. пайдалану туралы тамаша оқулықтар үшін The Coding Train ютуб каналына кіруді ұсынамын. Мұнда барлық негіздерден өтетін ойнату тізіміне сілтеме бар:

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 -ден 400 пиксельге дейін. Егер мен шеңбердің кенептің ортасында пайда болуын қаласам, оны X осіне 200 және Y осіне 200 деп қоямын. Сіз кенепке заттарды қалай қою керектігін білу үшін осы сандармен тәжірибе жасай аласыз.

Үшінші сан шеңбердің өлшемін орнатады. Бұл мысал үшін ол диаметрі 100 пиксельге орнатылады. Эллипс функциясы үшінші аргументті X диаметріне әсер ететін төртінші аргументті қабылдай алады, ал төртінші аргумент Y диаметрі болады. Бұл дөңгелек дөңгелектердің орнына сопақ пішіндерді жасау үшін қолданыла алады.

Пішіннің түсін орнату үшін біз толтыру функциясын қолданамыз. Бұл RGB мәндері болып табылатын 3 дәлелді пайдаланады (R = қызыл, G = жасыл, B = көк). Әр мән 0 -ден 255 -ке дейінгі сан болуы мүмкін. Мысалы, қызыл түске бояу үшін біз 255, 0, 0 қоямыз, олардың барлығы жасыл немесе көксіз қызыл болады. Бұл сандардың әр түрлі комбинациясы түрлі түстер жасайды.

Әр түрлі түстер үшін RGB мәндерін беретін бірнеше веб -сайттар бар, мысалы:

RGB мәні сіздің PlayDoh түсіңізге сәйкес келетінін тапқан соң, пішін функциясының үстіне толтыру функциясын жазыңыз.

Содан кейін сіз веб -редакторда ойнату түймесін баса аласыз және экранда сіздің пішініңізді көресіз.

4 -қадам: пернені басу арқылы сіздің пішініңіз пайда болады

Біз p5.js эскизі Makey Makey -мен интерактивті болғысы келетіндіктен, пернетақтадағы пернені басқан кезде бірдеңе болу үшін кодты қосу керек. Бұл жағдайда біз пішін тек пернені басқанда пайда болғанын қалаймыз. Ол үшін бізге шартты мәлімдеме қажет. Бұл біздің кодымызда бір нәрсе белгілі бір шарт орындалған жағдайда ғана болатынын білдіреді, бұл жағдайда перне басылады.

Шартты түрде осы шартты мәлімдеме жасау үшін жақшадан кейін сөзден бастаймыз. Жақшаның ішінде біз орындағымыз келетін шарт болады. P5.js -те keyIsPressed деп аталатын кіріктірілген айнымалы бар (мұнда бас әріптерді дәл осында жазылғанды қолданғаныңызға көз жеткізіңіз). keyIsPressed - логикалық айнымалы. Бұл оның шын немесе жалған мәніне ие болуы мүмкін екенін білдіреді. Перне басылғанда оның мәні - ақиқат, ал басылмағанда - жалған.

Соңында біз бұйра жақшалар жиынтығын қосамыз {}. Бұйра жақшаның ішінде біздің шарт орындалса, біз орындағымыз келетін код болады. Сондықтан біз бұйра жақшалардың арасына пішін қою үшін кодты енгізгіміз келеді.

Енді біз эскизді іске қосқанда, біз пернетақтадағы пернені баспайынша пішінді көрмейміз.

МАҢЫЗДЫ ЕСКЕРТПЕ: Біздің кодқа пернелерді басуды қосқанда, веб -редактор біз мәтіндік редакторда код жазу үшін пернені басамыз ба, әлде біз пернені басу үшін кодталған нәрсені жасау үшін оны басамыз ба, соны білуі керек. Ойнату түймесін басқан кезде, тышқанды кенептің үстіне жылжытыңыз және кенепті басыңыз. Бұл редактордың назарын эскизге әкеледі және пернені басу біз қалаған пернені басу кодын іске қосады

5 -қадам: Макей Макейді орнатыңыз

Makey Makey тақтасын, USB кабелін және екі аллигатор қысқышын алыңыз. Аллигатордың бір клипін Жерге, екіншісін Бос орын пернесіне бекітіңіз (біз кодта кілтті көрсетпегендіктен, біз басқан кез келген перне пішіннің пайда болуына әкеледі).

Space пернесіне бекітілген аллигатор қысқышын алып, екінші ұшын Playdoh пішініне басыңыз.

USB кабелін ноутбукке қосыңыз.

6 -қадам: Playdoh пішінін түртіңіз

Макей Макейде Жерге бекітілген аллигатор қысқышының металл ұшын ұстап, Playdoh пішінін ұстаңыз. Playdoh пішініне қол тигізгенде, кодталған пішін эскизіңіздің кенепте пайда болуы керек.

Бұл жобаның p5.js эскизіне сілтеме:

Егер пішін көрінбесе:

1. Playdoh -қа қол тигізбестен бұрын p5.js эскизінің кенепіндегі тышқанды шерткеніңізге көз жеткізіңіз.

2. Жер сымының металл қысқышын ұстағаныңызға көз жеткізіңіз.

7 -қадам: Әр түрлі пішіндер

Сары үшбұрыш:

Көк алаң: