Kodning Simple Playdoh Shapes W/ P5.js & Makey Makey: 7 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:39

Makey Makey -projekt »

Detta är ett fysiskt dataprojekt som låter dig skapa en form med Playdoh, koda den formen med hjälp av p5.js och trigga den formen att visas på datorskärmen genom att trycka på Playdoh -formen med en Makey Makey.

p5.js är en öppen källkod, webbaserad, kreativ kodningsmiljö i Javascript. Läs mer här:

Du behöver ingen kodningsupplevelse för att göra detta projekt. Detta kan användas som en introduktion till textbaserad kodning (i motsats till blockbaserade språk som Scratch). Du behöver bara skriva 4 rader kod för att slutföra projektet. Det finns flera sätt att ändra och utöka denna grundidé.

Tillbehör

Makey Makey Kit (w/ 2 Alligator Clips)

Playdoh (valfri färg)

Bärbar dator med internetanslutning

Steg 1: Gör en Playdoh -form

Gör en form av Playdoh. Detta kan vara en cirkel, oval, fyrkant, rektangel eller triangel. Tänk på att du måste koda denna form senare, så ju enklare formen är, desto lättare blir kodningsdelen. Men p5.js kan koda många olika former, även anpassade, så att du kan bestämma vilken svårighetsgrad du vill prova.

Steg 2: Kom igång i P5.js

Om du inte har använt p5.js tidigare, rekommenderar jag att du kommer in på sidan för att komma igång på webbplatsen:

Jag rekommenderar också starkt att kolla in The Coding Train youtube -kanal för utmärkta handledning om hur du använder p5.js. Här är en länk till en spellista som går igenom alla grunderna:

Eftersom p5.js är webbaserat kan du göra all din kodning på webben med hjälp av p5 Web Editor. Du behöver inte ett konto för att göra det här projektet, men om du vill spara ditt arbete måste du registrera dig för ett konto.

Webbredigerare:

Webredigeraren p5.js har ett område för att skriva koden till vänster och duken som visar resultaten av koden till höger.

Varje p5.js -skiss innehåller en setup () -funktion och en draw () -funktion. Setup () -funktionen körs en gång när skissen börjar. I funktionen setup () finns createCanvas -funktionen som skapar ett utrymme där din form kommer att ritas. Siffrorna inom parentesen för createCanvas -funktionen ställer in X -axeln (vänster till höger) och Y -axeln (uppifrån och ner) på duken. Standardnumren är 400, 400 vilket betyder att din duk är 400 pixlar från vänster till höger och 400 pixlar uppifrån och ner (du kan alltid ändra dessa efter dina behov). Var medveten om att det övre vänstra hörnet på duken är punkten 0, 0. Detta är viktigt att veta när du kodar din form.

Draw () -funktionen körs som en loop, vilket innebär att den ständigt uppdateras, ca. 60 gånger per sekund. Detta kan tillåta oss att skapa animeringar i våra skisser. Inuti funktionen draw () finns bakgrundsfunktionen som lägger till en färg på vår duk. Standard är 220 vilket är ett gråskala värde. 0 = svart, 255 = vitt och tal däremellan kommer att vara olika gråtoner. Bakgrundsfunktionen kan också ta RGB -värden som gör att vi kan lägga till färg. Mer om detta i nästa steg.

Steg 3: Koda din form i P5.js

För att koda din form behöver du bara lägga till kodrader inuti funktionen draw ().

Varje form har sin egen funktion för att den ska synas på duken. Här är referenssidan för alla former i p5.js:

För att göra en cirkel använder vi ellipsfunktionen. Denna funktion tar 3 argument (siffrorna som går inom parentes). Det första talet är X -positionen för cirkelns mitt på duken och det andra talet är Y -positionen på duken. Kom ihåg att det övre vänstra hörnet är 0, 0 och duken är 400 x 400 pixlar. Så om jag vill att cirkeln ska visas i mitten av duken kommer jag att sätta den vid 200 på X -axeln och 200 på Y -axeln. Du kan experimentera med dessa siffror för att få en känsla för hur du placerar saker på duken.

Det tredje numret anger cirkelns storlek. För detta exempel är den inställd på 100 pixlar i diameter. Ellipsfunktionen kan också ta ett fjärde argument som skulle ändra det tredje argumentet för att påverka X -diametern och det fjärde argumentet skulle vara Y -diametern. Detta kan användas för att göra ovala former istället för perfekt runda cirklar.

För att ställa in färgen på vår form använder vi fyllningsfunktionen. Detta använder 3 argument som är RGB -värden (R = röd, G = grön, B = blå). Varje värde kan vara ett tal mellan 0 och 255. Till exempel, för att göra rött, skulle vi sätta 255, 0, 0 som skulle vara helt rött utan grönt eller blått. Olika kombinationer av dessa nummer skapar olika färger.

Det finns flera webbplatser som ger RGB -värden för många olika färger, som den här:

När du har hittat RGB -värdet som matchar din färg på PlayDoh skriver du fyllningsfunktionen ovanför formfunktionen.

Du kan sedan klicka på uppspelningsknappen i webbredigeraren och du bör se din form visas på skärmen.

Steg 4: Få din form att se ut med en knapptryckning

Eftersom vi vill att vår p5.js -skiss ska vara interaktiv med Makey Makey måste vi lägga till lite kod för att något ska hända när vi trycker på en tangent på tangentbordet. I det här fallet vill vi att formen bara ska visas om vi trycker på en knapp. För att göra detta behöver vi ett villkorligt uttalande. Det betyder att något i vår kod bara kommer att hända om ett visst villkor är uppfyllt, i det här fallet trycks en tangent.

För att göra detta villkorliga uttalande villkorligt börjar vi med ordet om det följs av parenteser. Inuti parentesen kommer det villkor som vi vill uppfyllas. I p5.js finns det en inbyggd variabel som heter keyIsPressed (se till att du använder versalerna exakt samma som skrivs här). keyIsPressed är en boolsk variabel. Det betyder att det kan ha ett värde på antingen sant eller falskt. När tangenten trycks in är värdet sant och när det inte trycks är värdet falskt.

Slutligen lägger vi till en uppsättning lockiga parenteser {}. Inuti de lockiga parenteserna kommer den kod vi vill köra om vårt villkor är uppfyllt. Så vi ska bara sätta vår kod för att göra formen mellan de lockiga parenteserna.

Nu när vi kör vår skiss kommer vi inte att se formen förrän vi trycker på en tangent på tangentbordet.

VIKTIG ANMÄRKNING: När du lägger till knapptryckningar i vår kod måste webbredigeraren veta om vi trycker på en knapp för att skriva kod i textredigeraren eller om vi trycker på knappen för att göra det vi kodade ett tangenttryck för att göra. När du klickar på uppspelningsknappen flyttar du musen över duken och klickar på duken. Detta kommer att föra redaktörens fokus till skissen och att trycka på en knapp kommer att utlösa den tangenttryckningskod vi vill att ska hända

Steg 5: Konfigurera Makey Makey

Ta ut Makey Makey -kortet, USB -kabeln och två krokodilklämmor. Fäst ett alligatorklipp på jorden och ett på mellanslagstangenten (eftersom vi inte angav en nyckel i vår kod, kommer någon tangent vi trycker på att formen visas).

Ta alligatorklippet som är fäst på mellanslagstangenten och tryck in den andra änden i Playdoh -formen.

Anslut USB -kabeln till den bärbara datorn.

Steg 6: Tryck på Playdoh -formen

Håll i metalländen på krokodilklämman som är fäst vid jorden på Makey Makey och rör vid Playdoh -formen. När du trycker på Playdoh -formen ska den kodade formen visas på duken på din skiss.

Här är en länk till p5.js -skissen för detta projekt:

Om formen inte visas:

1. Se till att du har klickat musen på duken på p5.js -skissen innan du rör vid Playdoh.

2. Se till att du håller fast metallklämman på jordkabeln.

Steg 7: Olika former

Gul triangel:

Blå torget: