Kodowanie prostych kształtów Playdoh W/ P5.js i Makey Makey: 7 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:28

Projekty Makey Makey »

Jest to fizyczny projekt obliczeniowy, który pozwala stworzyć kształt za pomocą Playdoh, zakodować ten kształt za pomocą p5.js i wywołać pojawienie się tego kształtu na ekranie komputera poprzez dotknięcie kształtu Playdoh za pomocą Makey Makey.

p5.js to otwarte, internetowe, kreatywne środowisko kodowania w języku JavaScript. Dowiedz się więcej tutaj:

Do wykonania tego projektu nie potrzebujesz żadnego doświadczenia w kodowaniu. Można to wykorzystać jako wprowadzenie do kodowania opartego na tekście (w przeciwieństwie do języków opartych na blokach, takich jak Scratch). Wystarczy napisać 4 linijki kodu, aby ukończyć ten projekt. Istnieje kilka sposobów na zmianę i rozszerzenie tej podstawowej idei.

Kieszonkowe dzieci

Zestaw Makey Makey (z 2 zaciskami krokodylowymi)

Playdoh (dowolny kolor)

Laptop z połączeniem internetowym

Krok 1: Zrób kształt Playdoh

Zrób kształt z Playdoh. Może to być okrąg, owal, kwadrat, prostokąt lub trójkąt. Pamiętaj, że później będziesz musiał zakodować ten kształt, więc im prostszy kształt, tym łatwiejsza będzie część kodująca. Jednak p5.js jest w stanie zakodować wiele różnych kształtów, nawet niestandardowych, więc możesz zdecydować, jaki poziom trudności chcesz wypróbować.

Krok 2: Rozpocznij w P5.js

Jeśli nie korzystałeś wcześniej z p5.js, polecam sprawdzić stronę z wprowadzeniem na stronie:

Gorąco polecam również zajrzenie na kanał The Coding Train na youtube, gdzie znajdziesz doskonałe tutoriale na temat korzystania z p5.js. Oto link do listy odtwarzania, która zawiera wszystkie podstawy:

Ponieważ p5.js jest oparty na sieci, możesz wykonać całe swoje kodowanie w sieci za pomocą edytora sieci p5. Nie potrzebujesz konta, aby wykonać ten projekt, ale jeśli chcesz zapisać swoją pracę, musisz założyć konto.

Edytor internetowy:

Edytor sieciowy p5.js ma po lewej stronie obszar do pisania kodu, a po prawej kanwę, na której będą wyświetlane wyniki kodu.

Każdy szkic p5.js zawiera funkcję setup() i funkcję draw(). Funkcja setup() zostanie uruchomiona raz przy pierwszym uruchomieniu szkicu. W funkcji setup() znajduje się funkcja createCanvas, która tworzy przestrzeń, w której zostanie narysowany twój kształt. Liczby w nawiasach funkcji createCanvas ustawiają oś X (od lewej do prawej) i oś Y (od góry do dołu) płótna. Domyślne liczby to 400, 400, co oznacza, że płótno ma 400 pikseli od lewej do prawej i 400 pikseli od góry do dołu (zawsze możesz je zmienić, aby dopasować je do swoich potrzeb). Pamiętaj, że lewy górny róg płótna to punkt 0, 0. Będzie to ważne podczas kodowania kształtu.

Funkcja draw() działa jako pętla, co oznacza, że jest stale aktualizowana, około. 60 razy na sekundę. To może pozwolić nam na tworzenie animacji w naszych szkicach. Wewnątrz funkcji draw() znajduje się funkcja tła, która dodaje kolor do naszego płótna. Wartość domyślna to 220, która jest wartością w skali szarości. 0 = czarny, 255 = biały, a liczba pomiędzy nimi będzie w różnych odcieniach szarości. Funkcja tła może również przyjmować wartości RGB, które pozwalają nam dodawać kolor. Więcej na ten temat w następnym kroku.

Krok 3: Zakoduj swój kształt w P5.js

Aby zakodować swój kształt, wystarczy dodać wiersze kodu wewnątrz funkcji draw().

Każdy kształt ma swoją własną funkcję, aby pojawił się na płótnie. Oto strona odniesienia dla wszystkich kształtów w p5.js:

Aby zrobić okrąg, użyjemy funkcji elipsy. Ta funkcja przyjmuje 3 argumenty (liczby umieszczone w nawiasach). Pierwsza liczba to pozycja X środka okręgu na płótnie, a druga liczba to pozycja Y na płótnie. Pamiętaj, że lewy górny róg to 0, 0, a płótno ma 400 na 400 pikseli. Więc jeśli chcę, żeby okrąg pojawił się na środku płótna, ustawię go na 200 na osi X i 200 na osi Y. Możesz eksperymentować z tymi liczbami, aby dowiedzieć się, jak umieszczać rzeczy na płótnie.

Trzecia liczba określa rozmiar koła. W tym przykładzie ustawiono średnicę 100 pikseli. Funkcja elipsy może również przyjąć czwarty argument, który zmieniłby trzeci argument, aby wpłynął na średnicę X, a czwartym argumentem byłaby średnica Y. Można to wykorzystać do tworzenia owalnych kształtów zamiast idealnie okrągłych kół.

Aby ustawić kolor naszego kształtu, używamy funkcji fill. Używa 3 argumentów, które są wartościami RGB (R = czerwony, G = zielony, B = niebieski). Każda wartość może być liczbą z zakresu od 0 do 255. Na przykład, aby zmienić kolor na czerwony, wstawilibyśmy 255, 0, 0, które byłyby czerwone, bez zielonego lub niebieskiego. Różne kombinacje tych liczb stworzą różne kolory.

Istnieje kilka stron internetowych, które dostarczają wartości RGB dla wielu różnych kolorów, takich jak ta:

Po znalezieniu wartości RGB pasującej do koloru PlayDoh, wpisz funkcję wypełnienia nad funkcją kształtu.

Następnie możesz kliknąć przycisk odtwarzania w edytorze internetowym i powinieneś zobaczyć swój kształt na ekranie.

Krok 4: Spraw, aby Twój kształt pojawił się za pomocą naciśnięcia klawisza

Ponieważ chcemy, aby nasz szkic p5.js był interaktywny z Makey Makey, musimy dodać trochę kodu, aby coś się stało, gdy naciśniemy klawisz na klawiaturze. W tym przypadku chcemy, aby kształt pojawił się tylko wtedy, gdy naciśniemy klawisz. Aby to zrobić, potrzebujemy instrukcji warunkowej. Oznacza to, że coś w naszym kodzie wydarzy się tylko wtedy, gdy spełniony zostanie określony warunek, w tym przypadku zostanie naciśnięty klawisz.

Aby utworzyć warunkowe wyrażenie warunkowe, zaczynamy od słowa if, po którym następuje nawias. Wewnątrz nawiasów będzie warunek, który chcemy spełnić. W p5.js jest wbudowana zmienna o nazwie keyIsPressed (upewnij się, że używasz wielkich liter dokładnie tak samo, jak tutaj). keyIsPressed to zmienna logiczna. Oznacza to, że może mieć wartość prawda lub fałsz. Gdy klawisz jest wciśnięty, jego wartość to prawda, a gdy nie jest wciśnięty, jego wartość jest fałszywa.

Na koniec dodajemy zestaw nawiasów klamrowych { }. Wewnątrz nawiasów klamrowych znajduje się kod, który chcemy wykonać, jeśli nasz warunek zostanie spełniony. Więc wstawimy nasz kod tak, aby kształt znalazł się pomiędzy tymi nawiasami klamrowymi.

Teraz, gdy uruchomimy nasz szkic, nie zobaczymy kształtu, dopóki nie naciśniemy klawisza na klawiaturze.

WAŻNA UWAGA: Podczas dodawania naciśnięć klawiszy do naszego kodu, edytor sieciowy musi wiedzieć, czy naciskamy klawisz, aby napisać kod w edytorze tekstu, czy też naciskamy klawisz, aby wykonać to, do czego zakodowaliśmy naciśnięcie klawisza. Po kliknięciu przycisku odtwarzania przesuń mysz nad płótno i kliknij płótno. Spowoduje to skupienie edytora na szkicu, a naciśnięcie klawisza wywoła kod naciśnięcia klawisza, który chcemy wykonać

Krok 5: Skonfiguruj Makey Makey

Wyjmij płytkę Makey Makey, kabel USB i dwa zaciski krokodylkowe. Dołącz jeden zacisk aligatora do Ziemi, a drugi do klawisza spacji (ponieważ nie określiliśmy klucza w naszym kodzie, każdy klawisz, który naciśniemy, spowoduje pojawienie się kształtu).

Weź zacisk krokodylkowy przymocowany do klawisza spacji i wciśnij drugi koniec w kształt Playdoh.

Podłącz kabel USB do laptopa.

Krok 6: Dotknij kształtu Playdoh

Przytrzymaj metalowy koniec zacisku krokodylkowego, który jest przymocowany do Ziemi na Makey Makey i dotknij kształtu Playdoh. Gdy dotkniesz kształtu Playdoh, zakodowany kształt powinien pojawić się na płótnie szkicu.

Oto link do szkicu p5.js dla tego projektu:

Jeśli kształt się nie pojawia:

1. Upewnij się, że kliknąłeś myszą na płótnie szkicu p5.js przed dotknięciem Playdoh.

2. Upewnij się, że trzymasz metalowy zacisk przewodu uziemiającego.

Krok 7: Różne kształty

Żółty trójkąt:

Niebieski kwadrat: