Mã hóa hình dạng Playdoh đơn giản W / P5.js & Makey Makey: 7 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:31

Các dự án Makey Makey »

Đây là một dự án máy tính vật lý cho phép bạn tạo một hình dạng bằng Playdoh, mã hình dạng đó bằng cách sử dụng p5.js và kích hoạt hình dạng đó xuất hiện trên màn hình máy tính bằng cách chạm vào hình dạng Playdoh bằng Makey Makey.

p5.js là một mã nguồn mở, dựa trên web, môi trường viết mã sáng tạo bằng Javascript. Tìm hiểu thêm tại đây:

Bạn không cần bất kỳ kinh nghiệm viết mã nào để thực hiện dự án này. Điều này có thể được sử dụng như một phần giới thiệu về mã hóa dựa trên văn bản (trái ngược với các ngôn ngữ dựa trên khối như Scratch). Bạn chỉ cần viết 4 dòng mã để hoàn thành dự án này. Có một số cách bạn có thể thay đổi và mở rộng ý tưởng cơ bản này.

Quân nhu

Makey Makey Kit (w / 2 Alligator Clips)

Playdoh (Bất kỳ màu nào)

Máy tính xách tay có kết nối internet

Bước 1: Tạo hình Playdoh

Tạo hình từ Playdoh. Đây có thể là hình tròn, hình bầu dục, hình vuông, hình chữ nhật hoặc hình tam giác. Hãy lưu ý rằng bạn sẽ cần mã hình dạng này sau đó, vì vậy hình dạng càng đơn giản, phần mã hóa sẽ dễ dàng hơn. Tuy nhiên, p5.js có thể mã hóa nhiều hình dạng khác nhau, thậm chí cả những hình dạng tùy chỉnh, vì vậy bạn có thể quyết định mức độ khó mà mình muốn thử.

Bước 2: Bắt đầu trong P5.js

Nếu bạn chưa sử dụng p5.js trước đây, tôi khuyên bạn nên xem trang bắt đầu trên trang web:

Tôi cũng thực sự khuyên bạn nên xem kênh youtube The Coding Train để biết các hướng dẫn tuyệt vời về cách sử dụng p5.js. Đây là liên kết đến danh sách phát có tất cả các thông tin cơ bản:

Vì p5.js dựa trên web, bạn có thể thực hiện tất cả các mã của mình trên web bằng Trình chỉnh sửa web p5. Bạn không cần tài khoản để thực hiện dự án này, nhưng nếu bạn muốn lưu công việc của mình, bạn sẽ cần đăng ký một tài khoản.

Trình chỉnh sửa web:

Trình chỉnh sửa web p5.js có khu vực để viết mã ở bên trái và khung vẽ sẽ hiển thị kết quả của mã ở bên phải.

Mỗi bản phác thảo p5.js bao gồm một hàm setup () và một hàm draw (). Hàm setup () sẽ chạy một lần khi bản phác thảo bắt đầu lần đầu tiên. Trong hàm setup () là hàm createCanvas tạo ra một không gian nơi hình dạng của bạn sẽ được vẽ. Các số trong ngoặc đơn của hàm createCanvas đặt trục X (từ trái sang phải) và trục Y (từ trên xuống dưới) của canvas. Các số mặc định là 400, 400 có nghĩa là canvas của bạn là 400 pixel từ trái sang phải và 400 pixel từ trên xuống dưới (Bạn luôn có thể thay đổi các số này để phù hợp với nhu cầu của mình). Lưu ý rằng góc trên bên trái của khung vẽ là điểm 0, 0. Điều này sẽ rất quan trọng khi bạn viết mã cho hình dạng của mình.

Hàm draw () chạy như một vòng lặp có nghĩa là nó liên tục cập nhật, xấp xỉ. 60 lần mỗi giây. Điều này có thể cho phép chúng tôi tạo hoạt ảnh trong các bản phác thảo của chúng tôi. Bên trong hàm draw () là hàm background thêm màu cho canvas của chúng ta. Giá trị mặc định là 220, là một giá trị thang độ xám. 0 = đen, 255 = trắng và số ở giữa sẽ có các sắc thái xám khác nhau. Hàm nền cũng có thể nhận các giá trị RGB cho phép chúng ta thêm màu sắc. Thông tin thêm về điều này trong bước tiếp theo.

Bước 3: Mã hình dạng của bạn trong P5.js

Để viết mã cho hình dạng của bạn, bạn chỉ cần thêm vào các dòng mã bên trong hàm draw ().

Mỗi hình dạng có chức năng riêng để làm cho nó xuất hiện trên canvas. Đây là trang tham chiếu cho tất cả các hình dạng trong p5.js:

Để tạo một hình tròn, chúng ta sẽ sử dụng hàm ellipse. Hàm này nhận 3 đối số (các số nằm bên trong dấu ngoặc đơn). Số đầu tiên là vị trí X của tâm hình tròn trên canvas và số thứ hai là vị trí Y trên canvas. Hãy nhớ rằng góc trên bên trái là 0, 0 và canvas là 400 x 400 pixel. Vì vậy, nếu tôi muốn hình tròn xuất hiện ở giữa canvas, tôi sẽ đặt nó ở 200 trên trục X và 200 trên trục Y. Bạn có thể thử nghiệm với những con số này để biết cách đặt mọi thứ trên canvas.

Số thứ ba đặt kích thước của hình tròn. Đối với ví dụ này, nó được đặt thành đường kính 100 pixel. Hàm ellipse cũng có thể nhận đối số thứ tư sẽ thay đổi đối số thứ ba để ảnh hưởng đến đường kính X và đối số thứ tư sẽ là đường kính Y. Điều này có thể được sử dụng để tạo hình bầu dục thay vì hình tròn hoàn hảo.

Để đặt màu cho hình dạng của chúng ta, chúng ta sử dụng hàm tô màu. Điều này sử dụng 3 đối số là các giá trị RGB (R = red, G = green, B = blue). Mỗi giá trị có thể là một số từ 0 đến 255. Ví dụ, để tạo màu đỏ, chúng ta sẽ đặt 255, 0, 0 sẽ là tất cả màu đỏ mà không có màu xanh lá cây hoặc xanh lam. Sự kết hợp khác nhau của những con số này sẽ tạo ra những màu sắc khác nhau.

Có một số trang web cung cấp các giá trị RGB cho nhiều màu khác nhau, như trang này:

Khi bạn đã tìm thấy giá trị RGB phù hợp với màu PlayDoh của mình, hãy viết hàm tô phía trên hàm hình dạng.

Sau đó, bạn có thể nhấp vào nút phát trong trình chỉnh sửa web và bạn sẽ thấy hình dạng của mình xuất hiện trên màn hình.

Bước 4: Làm cho hình dạng của bạn xuất hiện bằng một phím bấm

Vì chúng tôi muốn bản phác thảo p5.js của mình có thể tương tác với Makey Makey, chúng tôi cần thêm một số mã để tạo điều gì đó xảy ra khi chúng tôi nhấn một phím trên bàn phím. Trong trường hợp này, chúng tôi muốn hình dạng chỉ xuất hiện nếu chúng tôi nhấn một phím. Để làm điều này, chúng ta cần một câu lệnh điều kiện. Điều này có nghĩa là một cái gì đó trong mã của chúng tôi sẽ chỉ xảy ra nếu một điều kiện nhất định được đáp ứng, trong trường hợp này, một phím được nhấn.

Để tạo điều kiện cho câu lệnh điều kiện này, chúng ta bắt đầu bằng từ if theo sau bởi dấu ngoặc đơn. Bên trong dấu ngoặc đơn sẽ là điều kiện chúng ta muốn được đáp ứng. Trong p5.js, có một biến tích hợp được gọi là keyIsPressed (đảm bảo rằng bạn sử dụng các chữ cái in hoa giống hệt như được viết ở đây). keyIsPressed là một biến boolean. Điều này có nghĩa là nó có thể có giá trị đúng hoặc sai. Khi phím được nhấn, giá trị của nó là true và khi không được nhấn, giá trị của nó là false.

Cuối cùng, chúng ta thêm một tập hợp các dấu ngoặc nhọn {}. Bên trong dấu ngoặc nhọn sẽ là mã chúng ta muốn thực thi nếu điều kiện của chúng ta được đáp ứng. Vì vậy, chúng tôi sẽ chỉ đặt mã của chúng tôi để tạo hình dạng ở giữa các dấu ngoặc nhọn đó.

Bây giờ khi chúng tôi chạy bản phác thảo của mình, chúng tôi sẽ không nhìn thấy hình dạng cho đến khi chúng tôi nhấn một phím trên bàn phím.

LƯU Ý QUAN TRỌNG: Khi thêm các lần nhấn phím vào mã của chúng tôi, trình chỉnh sửa web cần biết liệu chúng tôi đang nhấn một phím để viết mã trong trình soạn thảo văn bản hay chúng tôi đang nhấn phím để thực hiện công việc mà chúng tôi đã viết mã nhấn phím để làm. Khi bạn nhấp vào nút phát, hãy di chuyển chuột qua canvas và nhấp vào canvas. Thao tác này sẽ đưa trọng tâm của trình chỉnh sửa đến bản phác thảo và nhấn một phím sẽ kích hoạt mã nhấn phím mà chúng tôi muốn xảy ra

Bước 5: Thiết lập lớp trang điểm

Lấy bảng Makey Makey, cáp USB và hai kẹp cá sấu. Đính kèm một kẹp cá sấu vào Trái đất và một vào phím Space (vì chúng tôi không chỉ định khóa trong mã của mình, bất kỳ phím nào chúng tôi nhấn sẽ kích hoạt hình dạng xuất hiện).

Lấy chiếc kẹp cá sấu được gắn vào phím Space và nhấn đầu còn lại vào hình Playdoh.

Cắm cáp USB vào máy tính xách tay.

Bước 6: Chạm vào Hình dạng Playdoh

Giữ đầu kim loại của kẹp cá sấu được gắn với Trái đất trên Makey Makey và chạm vào hình Playdoh. Khi bạn chạm vào hình Playdoh, hình dạng được mã hóa sẽ xuất hiện trên canvas của bản phác thảo của bạn.

Đây là liên kết đến bản phác thảo p5.js cho dự án này:

Nếu hình dạng không xuất hiện:

1. Đảm bảo rằng bạn đã nhấp chuột vào canvas của bản phác thảo p5.js trước khi chạm vào Playdoh.

2. Đảm bảo rằng bạn đang giữ kẹp kim loại của dây Trái đất.

Bước 7: Các hình dạng khác nhau

Tam giác vàng:

Blue Square: