Basit Playdoh Şekillerini Kodlama W/ P5.js & Makey Makey: 7 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:17

Makey Makey Projeleri »

Bu, Playdoh ile bir şekil oluşturmanıza, bu şekli p5.js kullanarak kodlamanıza ve bir Makey Makey kullanarak Playdoh şekline dokunarak bu şeklin bilgisayar ekranında görünmesini tetiklemenize izin veren fiziksel bir hesaplama projesidir.

p5.js, Javascript'te açık kaynak kodlu, web tabanlı, yaratıcı bir kodlama ortamıdır. Burada daha fazla bilgi edinin:

Bu projeyi yapmak için herhangi bir kodlama deneyimine ihtiyacınız yok. Bu, metin tabanlı kodlamaya bir giriş olarak kullanılabilir (Scratch gibi blok tabanlı dillerin aksine). Bu projeyi tamamlamak için sadece 4 satır kod yazmanız yeterli. Bu temel fikri değiştirmenin ve genişletmenin birkaç yolu var.

Gereçler

Makey Makey Kiti (2 Timsah Klipsli)

Playdoh (Herhangi Bir Renk)

İnternet Bağlantılı Dizüstü Bilgisayar

Adım 1: Bir Playdoh Şekli Yapın

Playdoh'tan bir şekil yapın. Bu bir daire, oval, kare, dikdörtgen veya üçgen olabilir. Bu şekli daha sonra kodlamanız gerekeceğini unutmayın, bu nedenle şekil ne kadar basitse, kodlama kısmı o kadar kolay olacaktır. Bununla birlikte, p5.js, özel olanlar dahil birçok farklı şekli kodlayabilir, böylece denemek istediğiniz zorluk seviyesine karar verebilirsiniz.

2. Adım: P5.js'ye Başlayın

Daha önce p5.js kullanmadıysanız, web sitesindeki başlangıç sayfasına göz atmanızı tavsiye ederim:

Ayrıca p5.js kullanımıyla ilgili mükemmel eğitimler için The Coding Train youtube kanalına göz atmanızı şiddetle tavsiye ederim. İşte tüm temel bilgileri içeren bir oynatma listesi bağlantısı:

p5.js web tabanlı olduğu için tüm kodlamalarınızı p5 Web Editor kullanarak web üzerinde yapabilirsiniz. Bu projeyi yapmak için bir hesaba ihtiyacınız yok, ancak çalışmanızı kaydetmek istiyorsanız bir hesap açmanız gerekecek.

Web Editörü:

p5.js web düzenleyicisinin solunda kodu yazacak bir alanı ve sağda da kodun sonuçlarını gösterecek tuvali vardır.

Her p5.js çizimi, bir setup() işlevi ve bir çizim() işlevi içerir. Eskiz ilk başladığında setup() işlevi bir kez çalışacaktır. setup() işlevinde, şeklinizin çizileceği bir boşluk oluşturan createCanvas işlevi bulunur. createCanvas işlevinin parantez içindeki sayılar, tuvalin X eksenini (soldan sağa) ve Y eksenini (yukarıdan aşağıya) ayarlar. Varsayılan sayılar 400, 400'dür; bu, tuvalinizin soldan sağa 400 piksel ve yukarıdan aşağıya 400 piksel olduğu anlamına gelir (Bunları her zaman ihtiyaçlarınıza göre değiştirebilirsiniz). Tuvalin sol üst köşesinin 0, 0 noktası olduğunu unutmayın. Şeklinizi kodlarken bunu bilmek önemli olacaktır.

Draw() işlevi, yaklaşık olarak sürekli güncellendiği anlamına gelen bir döngü olarak çalışır. Saniyede 60 kez. Bu, eskizlerimizde animasyon oluşturmamıza izin verebilir. Draw() fonksiyonunun içinde, tuvalimize bir renk ekleyen arka plan fonksiyonu bulunur. Varsayılan, gri tonlamalı bir değer olan 220'dir. 0 = siyah, 255 = beyaz ve aradaki sayı değişen gri tonları olacaktır. Arka plan işlevi, renk eklememize izin veren RGB değerlerini de alabilir. Bir sonraki adımda bu konuda daha fazla bilgi.

Adım 3: Şeklinizi P5.js'de Kodlayın

Şeklinizi kodlamak için sadece draw() işlevinin içindeki kod satırlarına eklemeniz gerekir.

Her şeklin tuvalde görünmesini sağlamak için kendi işlevi vardır. İşte p5.js'deki tüm şekiller için referans sayfası:

Daire yapmak için elips fonksiyonunu kullanacağız. Bu işlev 3 bağımsız değişken alır (parantez içindeki sayılar). İlk sayı tuval üzerindeki dairenin merkezinin X konumu ve ikinci sayı tuval üzerindeki Y konumudur. Sol üst köşenin 0, 0 olduğunu ve tuvalin 400 x 400 piksel olduğunu unutmayın. Yani, dairenin tuvalin ortasında görünmesini istiyorsam, onu X ekseninde 200'e ve Y ekseninde 200'e koyacağım. Bir şeyleri tuvale nasıl yerleştireceğinize dair bir fikir edinmek için bu sayılarla deneyler yapabilirsiniz.

Üçüncü sayı dairenin boyutunu belirler. Bu örnek için, çap olarak 100 piksele ayarlanmıştır. Elips işlevi, X çapını etkilemek için üçüncü argümanı değiştirecek dördüncü bir argüman da alabilir ve dördüncü argüman Y çapı olur. Bu, mükemmel yuvarlak daireler yerine oval şekiller yapmak için kullanılabilir.

Şeklimizin rengini ayarlamak için dolgu fonksiyonunu kullanıyoruz. Bu, RGB değerleri olan 3 argüman kullanır (R = kırmızı, G = yeşil, B = mavi). Her değer, 0 ile 255 arasında bir sayı olabilir. Örneğin, kırmızı yapmak için, 255, 0, 0 koyarız ve bu, yeşil veya mavi olmadan tamamen kırmızı olur. Bu sayıların farklı kombinasyonları farklı renkler yaratacaktır.

Bunun gibi birçok farklı renk için RGB değerleri sağlayan birkaç web sitesi vardır:

PlayDoh'un renginize uygun RGB değerini bulduktan sonra, doldurma işlevini şekil işlevinin üzerine yazın.

Daha sonra web düzenleyicideki oynat düğmesine tıklayabilir ve şeklinizin ekranda göründüğünü görmelisiniz.

Adım 4: Bir Tuşa Basarak Şeklinizin Görünmesini Sağlayın

p5.js taslağımızın Makey Makey ile etkileşimli olmasını istediğimiz için klavyede bir tuşa bastığımızda bir şeyler olması için bazı kodlar eklememiz gerekiyor. Bu durumda şeklin sadece bir tuşa bastığımızda görünmesini istiyoruz. Bunu yapmak için koşullu bir ifadeye ihtiyacımız var. Bu, kodumuzdaki bir şeyin yalnızca belirli bir koşul yerine getirildiğinde gerçekleşeceği anlamına gelir, bu durumda bir tuşa basılır.

Bu koşullu ifadeyi koşullu hale getirmek için, parantezlerin ardından eğer kelimesiyle başlarız. Parantezlerin içinde yerine getirilmesini istediğimiz koşul olacaktır. p5.js'de keyIsPressed adında yerleşik bir değişken vardır (büyük harfleri burada yazılanlarla tamamen aynı şekilde kullandığınızdan emin olun). keyIsPressed bir boole değişkenidir. Bu, true veya false değerine sahip olabileceği anlamına gelir. Tuşa basıldığında değeri true, basılmadığında değeri false olur.

Son olarak bir dizi küme parantez { } ekliyoruz. Kıvrımlı parantezlerin içinde, koşulumuz karşılanırsa yürütmek istediğimiz kod olacaktır. Bu yüzden, şekli bu küme parantezleri arasında yapmak için kodumuzu koyacağız.

Şimdi eskizimizi çalıştırdığımızda klavyede bir tuşa basana kadar şekli görmeyeceğiz.

ÖNEMLİ NOT: Kodumuza tuş basmaları eklerken, web editörünün metin düzenleyicide kod yazmak için bir tuşa mı bastığımızı yoksa tuşa basmak için kodladığımız şeyi yapmak için mi tuşa bastığımızı bilmesi gerekir. Oynat düğmesine tıkladığınızda, fareyi tuvalin üzerine getirin ve tuval üzerine tıklayın. Bu, editörün odağını taslağa getirecek ve bir tuşa basmak, gerçekleşmesini istediğimiz tuşa basma kodunu tetikleyecektir

Adım 5: Makey Makey'i Kurun

Makey Makey kartını, USB kablosunu ve iki timsah klipsini çıkarın. Bir timsah klibini Dünya'ya ve birini Boşluk tuşuna takın (kodumuzda bir tuş belirtmediğimiz için, bastığımız herhangi bir tuş şeklin görünmesini tetikleyecektir).

Space tuşuna iliştirilmiş olan timsah klibini alın ve diğer ucunu Playdoh şekline getirin.

USB kablosunu dizüstü bilgisayara takın.

6. Adım: Playdoh Şekline dokunun

Makey Makey üzerinde Dünya'ya bağlı olan timsah klipsinin metal ucunu tutun ve Playdoh şekline dokunun. Playdoh şekline dokunduğunuzda, kodlanmış şekil çiziminizin tuvalinde görünmelidir.

İşte bu proje için p5.js taslağının bağlantısı:

Şekil görünmüyorsa:

1. Playdoh'a dokunmadan önce fareyi p5.js taslağının tuvaline tıkladığınızdan emin olun.

2. Topraklama kablosunun metal klipsini tuttuğunuzdan emin olun.

7. Adım: Farklı Şekiller

Sarı Üçgen:

Mavi Kare: