Kodering Eenvoudige Playdoh Shapes W/ P5.js & Makey Makey: 7 stappe

2025 Outeur: John Day | [email protected]. Laas verander: 2025-01-23 12:53

Makey Makey -projekte »

Dit is 'n fisiese rekenaarprojek waarmee u 'n vorm kan skep met Playdoh, die vorm kan kodeer met behulp van p5.js en die vorm kan laat verskyn op die rekenaarskerm deur die Playdoh -vorm aan te raak met 'n Makey Makey.

p5.js is 'n open source, webgebaseerde, kreatiewe koderingsomgewing in Javascript. Kom meer te wete hier:

U het geen kodering -ervaring nodig om hierdie projek te doen nie. Dit kan gebruik word as inleiding tot teksgebaseerde kodering (in teenstelling met blokgebaseerde tale soos Scratch). U hoef slegs 4 reëls kode te skryf om hierdie projek te voltooi. Daar is verskillende maniere waarop u hierdie basiese idee kan verander en uitbrei.

Voorrade

Makey Makey Kit (met 2 Alligator Clips)

Playdoh (enige kleur)

Skootrekenaar met internetverbinding

Stap 1: Maak 'n Playdoh -vorm

Maak 'n vorm uit die Playdoh. Dit kan 'n sirkel, ovaal, vierkant, reghoek of driehoek wees. Hou in gedagte dat u hierdie vorm later moet kodeer, dus hoe eenvoudiger die vorm, hoe makliker sal die kode -deel wees. P5.js kan egter baie verskillende vorms, selfs pasgemaakte, kodeer, sodat u kan besluit watter moeilikheidsgraad u wil probeer.

Stap 2: Begin met P5.js

As u nog nie voorheen p5.js gebruik het nie, beveel ek aan dat u op die webwerf begin:

Ek beveel ook sterk aan dat u na die YouTube Coding Train -kanaal kyk vir uitstekende tutoriale oor die gebruik van p5.js. Hier is 'n skakel na 'n snitlys wat deur al die basiese beginsels gaan:

Aangesien p5.js webgebaseer is, kan u al u kodering op die internet doen met behulp van die p5 Web Editor. U het geen rekening nodig om hierdie projek te doen nie, maar as u u werk wil stoor, moet u by 'n rekening aanmeld.

Webredakteur:

Die webredakteur p5.js het 'n gebied om die kode aan die linkerkant en die doek te skryf wat die resultate van die kode aan die regterkant vertoon.

Elke p5.js -skets bevat 'n setup () funksie en 'n draw () funksie. Die opset () -funksie word een keer uitgevoer wanneer die skets eers begin. In die setup () -funksie is die createCanvas -funksie wat 'n ruimte skep waar u vorm geteken sal word. Die getalle tussen die hakies van die createCanvas -funksie stel die X -as (van links na regs) en die Y -as (van bo na onder) van die doek. Die standaardgetalle is 400, 400, wat beteken dat u doek 400 pixels van links na regs en 400 pixels van bo na onder is (u kan dit altyd verander volgens u behoeftes). Hou in gedagte dat die linker boonste hoek van die doek die punt 0, 0. is. Dit is belangrik om te weet wanneer u u vorm kodeer.

Die trek () funksie loop as 'n lus, wat beteken dat dit voortdurend bygewerk word, ongeveer. 60 keer per sekonde. Dit kan ons toelaat om animasie in ons sketse te skep. Binne die teken () -funksie is die agtergrondfunksie wat 'n kleur by ons doek voeg. Die standaard is 220, wat 'n grysskaalwaarde is. 0 = swart, 255 = wit en getal tussenin sal verskillende grys skakerings hê. Die agtergrondfunksie kan ook RGB -waardes neem wat ons toelaat om kleur by te voeg. Meer hieroor in die volgende stap.

Stap 3: Kodeer u vorm in P5.js

Om u vorm te kodeer, hoef u slegs die kode in die teken () -funksie by te voeg.

Elke vorm het sy eie funksie om dit op die doek te laat verskyn. Hier is die verwysingsbladsy vir alle vorms in p5.js:

Om 'n sirkel te maak, gebruik ons die ellipsfunksie. Hierdie funksie neem 3 argumente (die getalle wat tussen hakies voorkom). Die eerste getal is die X -posisie van die middel van die sirkel op die doek en die tweede getal is die Y -posisie op die doek. Onthou dat die linker boonste hoek 0, 0 en die doek 400 by 400 pixels is. So as ek wil hê dat die sirkel in die middel van die doek moet verskyn, plaas ek dit op 200 op die X -as en 200 op die Y -as. U kan met hierdie getalle eksperimenteer om 'n idee te kry van hoe u dinge op die doek kan plaas.

Die derde getal bepaal die grootte van die sirkel. Vir hierdie voorbeeld is dit ingestel op 100 pixels in deursnee. Die ellipsfunksie kan ook 'n vierde argument aanneem wat die derde argument sou verander om die X -deursnee te beïnvloed, en die vierde argument sou die Y -deursnee wees. Dit kan gebruik word om ovaalvorms te maak in plaas van perfek ronde sirkels.

Om die kleur van ons vorm in te stel, gebruik ons die vulfunksie. Dit gebruik drie argumente, die RGB -waardes (R = rooi, G = groen, B = blou). Elke waarde kan 'n getal tussen 0 en 255 wees. Om byvoorbeeld rooi te maak, sit ons 255, 0, 0 wat rooi is sonder groen of blou. Verskillende kombinasies van hierdie getalle sal verskillende kleure skep.

Daar is verskillende webwerwe wat RGB -waardes vir baie verskillende kleure bied, soos hierdie:

Sodra u die RGB -waarde gevind het wat by u kleur van PlayDoh pas, skryf die vulfunksie bo die vormfunksie.

U kan dan op die speelknoppie in die webredakteur klik en u vorm moet op die skerm verskyn.

Stap 4: Laat u vorm met 'n druk op die toets verskyn

Aangesien ons ons p5.js -skets interaktief met die Makey Makey wil hê, moet ons kode byvoeg om iets te laat gebeur as ons op 'n sleutel op die sleutelbord druk. In hierdie geval wil ons hê dat die vorm slegs verskyn as ons op 'n sleutel druk. Om dit te kan doen, benodig ons 'n voorwaardelike verklaring. Dit beteken dat iets in ons kode slegs sal gebeur as aan 'n sekere voorwaarde voldoen word, in hierdie geval word 'n sleutel ingedruk.

Om hierdie voorwaardelike stelling voorwaardelik te maak, begin ons met die woord as gevolg deur hakies. Binne die hakies is die voorwaarde waaraan ons wil voldoen. In p5.js is daar 'n ingeboude veranderlike genaamd keyIsPressed (maak seker dat u die hoofletters presies dieselfde gebruik as hier geskryf). keyIsPressed is 'n Booleaanse veranderlike. Dit beteken dat dit 'n waarde van óf waar óf onwaar kan hê. As die sleutel ingedruk word, is die waarde waar en as dit nie ingedruk word nie, is die waarde daarvan onwaar.

Laastens voeg ons 'n stel krulhakies by {}. Binne -in die krulhakies is die kode wat ons wil uitvoer as aan ons voorwaarde voldoen word. Ons gaan dus net ons kode plaas om die vorm tussen die krulhakies te maak.

As ons nou ons skets uitvoer, sal ons die vorm eers sien as ons op 'n sleutel op die sleutelbord druk.

BELANGRIKE OPMERKING: By die toevoeging van sleuteldrukke in ons kode, moet die webredakteur weet of ons op 'n sleutel druk om kode in die teksredakteur te skryf, of ons druk op die sleutel om die ding te doen wat ons 'n sleutelbord gedruk het om te doen. As u op die speelknoppie klik, beweeg die muis oor die doek en klik op die doek. Dit sal die fokus van die redakteur op die skets bring, en as u op 'n sleutel druk, sal die sleutelperskode wat ons wil hê, veroorsaak word

Stap 5: Stel Makey Makey op

Haal die Makey Makey -bord, die USB -kabel en twee krokodilleklemme uit. Heg een krokodilknipsel aan die aarde en een aan die spasie -sleutel (aangesien ons nie 'n sleutel in ons kode gespesifiseer het nie, sal enige sleutel wat ons druk, die vorm laat verskyn).

Neem die krokodilknip wat aan die spasie -sleutel vasgemaak is en druk die ander kant in die Playdoh -vorm.

Steek die USB -kabel in die skootrekenaar.

Stap 6: Raak die Playdoh -vorm aan

Hou die metaalkant van die krokodilleklem vas wat aan die aarde op die Makey Makey geheg is en raak die Playdoh -vorm aan. As u die Playdoh -vorm aanraak, moet die gekodeerde vorm op die doek van u skets verskyn.

Hier is 'n skakel na die p5.js -skets vir hierdie projek:

As die vorm nie verskyn nie:

1. Maak seker dat u met die muis op die doek van die p5.js -skets geklik het voordat u die Playdoh raak.

2. Maak seker dat u die metaalklem van die aarddraad vas hou.

Stap 7: Verskillende vorms

Gele driehoek:

Blou Vierkant: