Կոդավորման պարզ Playdoh Shapes W/ P5.js և Makey Makey ՝ 7 քայլ

2025 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2025-01-23 14:48

Makey Makey նախագծեր »

Սա ֆիզիկական հաշվողական նախագիծ է, որը թույլ է տալիս Playdoh- ով ստեղծել ձև, կոդավորել այն p5.js- ով և միացնել այդ ձևը համակարգչի էկրանին ՝ շոշափելով Playdoh ձևը Makey Makey- ի միջոցով:

p5.js- ը բաց կոդով, վեբ վրա հիմնված, ստեղծագործական ծածկագրման միջավայր է Javascript- ում: Իմացեք ավելին այստեղ ՝

Այս նախագիծը կատարելու համար ձեզ հարկավոր չէ որևէ կոդավորման փորձ: Սա կարող է օգտագործվել որպես տեքստի վրա հիմնված կոդավորման ներածություն (ի տարբերություն քերծվածքների նման բլոկների վրա հիմնված լեզուների): Այս նախագիծն ավարտելու համար անհրաժեշտ է գրել միայն 4 տող կոդ: Կան մի քանի եղանակներ, որոնցով կարող եք փոխել և ընդլայնել այս հիմնական գաղափարը:

Պարագաներ

Makey Makey Kit (ալիգատորների տեսահոլովակներով 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 անգամ վայրկյանում: Սա կարող է թույլ տալ մեզ ստեղծել անիմացիա մեր ուրվագծերում: Ոչ ոքի () ֆունկցիայի ներսում կա ֆոնային գործառույթը, որը գույն է հաղորդում մեր կտավին: Կանխադրվածը 220 է, որը մոխրագույն մասշտաբի արժեք է: 0 = սև, 255 = սպիտակ և դրանց միջև եղած թիվը կլինի մոխրագույնի տարբեր երանգներ: Ֆոնային ֆունկցիան կարող է նաև վերցնել RGB արժեքներ, ինչը թույլ է տալիս մեզ գույն ավելացնել: Այս մասին ավելին ՝ հաջորդ քայլին:

Քայլ 3. Կոդավորեք ձեր ձևը P5.js- ում

Ձեր ձևը կոդավորելու համար ձեզ հարկավոր է միայն ավելացնել () draw () գործառույթի ներսում գտնվող կոդի տողերին:

Յուրաքանչյուր ձև ունի իր սեփական գործառույթը `այն կտավի վրա հայտնելու համար: Ահա 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- ը բուլյան փոփոխական է: Սա նշանակում է, որ այն կարող է ունենալ ճշմարիտ կամ կեղծ արժեք: Երբ բանալին սեղմված է, դրա արժեքը ճշմարիտ է, իսկ երբ այն սեղմված չէ, դրա արժեքը կեղծ է:

Վերջապես մենք ավելացնում ենք գանգուր փակագծերի հավաքածու {}: Գանգուր փակագծերի ներսում կլինի այն կոդը, որը մենք ցանկանում ենք կատարել, եթե մեր պայմանը բավարարվի: Այսպիսով, մենք պարզապես տեղադրելու ենք մեր ծածկագիրը, որպեսզի ձևը դարձնենք այդ գանգուր փակագծերի միջև:

Այժմ, երբ մենք վարում ենք մեր ուրվագիծը, մենք չենք տեսնի ձևը, մինչև ստեղնաշարի վրա ստեղնը չսեղմենք:

ԿԱՐԵՎՈՐ ՈEՇԱԴՐՈԹՅՈՆ. Մեր կոդի մեջ բանալիների սեղմումներ ավելացնելիս վեբ խմբագիրը պետք է իմանա `տեքստային խմբագրիչում կոդ գրելու համար բանալին սեղմո՞ւմ ենք, թե՞ բանալին` այն բանի համար, որը մենք կոդավորել ենք հիմնական սեղմման համար: Երբ կտտացնում եք նվագարկման կոճակին, մկնիկը տեղափոխեք կտավի վրայով և կտտացրեք կտավին: Սա խմբագրի ուշադրության կենտրոնում կբերի ուրվագիծը և ստեղնը սեղմելը կհանգեցնի այն հիմնական կոդին, որը ցանկանում ենք:

Քայլ 5: Ստեղծեք Makey Makey

Դուրս եկեք Makey Makey տախտակից, USB մալուխից և ալիգատորների երկու տեսահոլովակներից: Կցեք մեկ ալիգատոր սեղմիչ Երկրի վրա և մեկը Տիեզերքի ստեղնին (քանի որ մենք մեր կոդի մեջ չենք նշել բանալին, ցանկացած բանալին, որը սեղմում ենք, կհանգեցնի ձևի հայտնվելուն):

Վերցրեք ալիգատորը, որը կցված է Space ստեղնին և մյուս ծայրը սեղմեք Playdoh ձևի:

Միացրեք USB մալուխը նոութբուքի մեջ:

Քայլ 6: Հպեք Playdoh ձևը

Անցկացրեք ալիգատոր սեղմակի մետաղյա ծայրը, որը ամրացված է Երկրին Makey Makey- ի վրա և դիպչեք Playdoh ձևին: Երբ դուք դիպչում եք Playdoh ձևին, ծածկագրված ձևը պետք է հայտնվի ձեր ուրվագծի կտավի վրա:

Ահա այս նախագծի p5.js ուրվագծի հղումը ՝

Եթե ձևը չի երևում.

1. Համոզվեք, որ սեղմել եք մկնիկը p5.js էսքիզի կտավի վրա, նախքան Playdoh- ին դիպչելը:

2. Համոզվեք, որ բռնել եք Երկաթուղու մետաղյա ամրակը:

Քայլ 7: Տարբեր ձևեր

Դեղին եռանկյունի ՝

Կապույտ հրապարակ ՝