Жөнөкөй Playdoh формаларын коддоо W/ P5.js & Makey Makey: 7 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:38

Макей Макей долбоорлору »

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

p5.js Javascriptте ачык булак, вебге негизделген, чыгармачыл коддоо чөйрөсү. Көбүрөөк билүү үчүн бул жерде:

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

Жабдуулар

Makey Makey Kit (2 Alligator Clips)

Playdoh (каалаган түс)

Ноутбук интернет байланышы жок

1 -кадам: Playdoh формасын жасаңыз

Playdohтун формасын жасаңыз. Бул тегерек, сүйрү, чарчы, тик бурчтук же үч бурчтук болушу мүмкүн. Бул форманы кийинчерээк коддоо керек экенин билиңиз, андыктан формасы канчалык жөнөкөй болсо, коддоо бөлүгү ошончолук жеңил болот. Бирок, p5.js ар кандай формаларды коддоого жөндөмдүү, атүгүл ыңгайлаштырылган, андыктан сиз аракет кылгыңыз келген кыйынчылык деңгээлин чече аласыз.

2 -кадам: P5.js менен баштаңыз

Эгерде сиз буга чейин p5.js колдоно элек болсоңуз, анда мен веб-сайттын баштапкы баракчасын текшерүүнү сунуштайм:

Мен дагы p5.js.ти колдонуу боюнча мыкты окуу куралдары үчүн The Coding Train youtube каналын текшерүүнү сунуштайм. Бул жерде бардык негиздерден өткөн ойнотмо тизмесине шилтеме бар:

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 ичиндеги формаңызды коддоңуз

Формаңызды коддоо үчүн, 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 баалуулуктарын камсыз кылган бир нече веб -сайттар бар, мисалы:

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

Сиз андан кийин веб редакторунда ойнотуу баскычын чыкылдатып, формаңыз экранда көрүнөт.

4 -кадам: Баскычты басуу менен формаңызды көрсөтүңүз

Биз p5.js эскизибиз Макей Макей менен интерактивдүү болушун каалаганыбыз үчүн, клавиатурадагы баскычты басканда кандайдыр бир нерсе болушу үчүн кээ бир коддорду кошушубуз керек. Бул учурда, биз форма бир баскычты басканда гана пайда болушун каалайбыз. Бул үчүн бизге шарттуу билдирүү керек. Бул биздин коддо бир нерсе белгилүү бир шарт аткарылганда гана болот дегенди билдирет, бул учурда баскыч басылат.

Бул шарттуу билдирүүнү шарттуу кылуу үчүн, кашаанын артынан сөз менен баштайбыз. Кашаанын ичинде биз аткарууну каалаган шарт болот. P5.js -те keyIsPressed деп аталган өзгөрмө бар (баш тамгаларды так ушул жерде жазылгандай колдонуңуз). keyIsPressed - бул логикалык өзгөрмө. Бул чыныгы же жалган мааниге ээ боло алат дегенди билдирет. Баскыч басылганда, анын мааниси чын, ал басылбаса анын мааниси жалган болот.

Акыры биз тарамыш кашаанын топтомун {} кошобуз. Тармал кашаанын ичинде биздин шарт аткарылса, биз аткаргыбыз келген код болот. Ошентип, биз ошол коддуу кашаанын ортосуна форма келтирүү үчүн кодубузду коёбуз.

Эми биз эскизибизди иштеткенде, клавиатурадагы баскычты басмайынча форманы көрө албайбыз.

МААНИЛҮҮ ЭСКЕРТҮҮ: Биздин кодго баскычтарды басканда, веб редактор биз текст редакторунда код жазуу үчүн баскычты басып жатканыбызды же биз баскычты басуу үчүн биз баскычты басканыбызды билиши керек. Ойнотуу баскычын чыкылдатуу менен, чычканды кенептин үстүнө жылдырып, кенепти басыңыз. Бул редактордун көңүлүн эскизге алып келет жана баскычты басуу биз каалаган баскычтын пресс -кодун иштетет

5 -кадам: Макей Макейди орнотуңуз

Makey Makey тактасын, USB кабелин жана эки аллигатор клиптерин алыңыз. Аллигатордун бир клипин Жерге, экинчисин боштук клавишине тиркеңиз (биз кодубузда ачкычты көрсөтпөгөндүктөн, биз баскан кандайдыр бир баскыч пайда болгон форманы иштетет).

Space баскычына тиркелген аллигатор клипти алып, экинчи четин Playdoh формасына басыңыз.

USB кабелин ноутбукка сайыңыз.

6 -кадам: Playdoh формасына тийип коюңуз

Макей Макейде жерге тиркелген аллигатордун металл учун кармап, Playdoh формасына тийип коюңуз. Сиз Playdoh формасына тийгенде, коддолгон форма эскизиңиздин кенебинде көрүнүшү керек.

Мына бул долбоордун p5.js эскизине шилтеме:

Эгерде форма көрүнбөсө:

1. Playdohко тийүүдөн мурун p5.js эскизинин кенебине чычканды чыкылдатыңыз.

2. Жер зымынын металл кыскычын кармап турганыңызды текшериңиз.

7 -кадам: Ар кандай формалар

Сары үч бурчтук:

Көк аянт: