Chuông cửa bằng giấy W / P5.js & Makey Makey: 9 bước

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

Các dự án Makey Makey »

Dự án này tạo một bản phác thảo trong p5.js có thể phát tệp âm thanh bằng cách nhấn phím, sau đó tạo một nút đơn giản bằng bút chì, giấy và Makey Makey để kích hoạt âm thanh.

Trong khi dự án này sử dụng âm thanh chuông cửa, các bước bao gồm cách tải tệp âm thanh vào bản phác thảo p5.js của bạn, do đó, nó có thể dễ dàng được điều chỉnh để sử dụng bất kỳ loại âm thanh nào.

Tìm hiểu thêm về p5.js:

Nếu bạn chưa quen sử dụng p5.js với Makey Makey, tôi khuyên bạn nên kiểm tra dự án này trước:

Quân nhu

Bút chì

Một tờ giấy hình vuông nhỏ

Bộ trang điểm Makey (w / 2 kẹp cá sấu)

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

Bước 1: Tải xuống tệp âm thanh

Dự án này yêu cầu sử dụng tệp âm thanh mà chúng tôi cần tải lên bản phác thảo p5.js của chúng tôi. Để làm điều này, trước tiên chúng ta cần tải xuống tệp âm thanh.

Nếu bạn không thể tải tệp xuống máy tính của mình hoặc chỉ muốn bỏ qua việc tải tệp xuống và tải tệp lên bản phác thảo của mình, bạn có thể truy cập liên kết này để xem mẫu p5.js với âm thanh đã được tải lên và chuyển sang bước 3. Tuy nhiên, nếu bạn muốn làm việc với các tệp âm thanh trong p5.js trong tương lai, bước này và bước tiếp theo sẽ hướng dẫn bạn cách thực hiện việc này.

Có nhiều nơi để tải xuống hiệu ứng âm thanh và tệp âm thanh trên web, một số nơi yêu cầu tài khoản, như freesound.org và một số không yêu cầu tài khoản, như soundbible.com. Luôn lưu ý đến bất kỳ yêu cầu cấp phép và / hoặc ghi nhận tác giả nào khi sử dụng âm thanh cho dự án của bạn. Tìm hiểu thêm về điều đó tại đây:

Âm thanh chuông cửa cho dự án này đến từ https://freesound.org/s/163730/ do Tim Kahn cung cấp.

Nếu bạn muốn tải xuống âm thanh mà không cần tạo tài khoản, tôi đã chuyển đổi âm thanh sang định dạng mp3, bạn có thể tải xuống tại đây:

Bước 2: Tải tệp âm thanh lên P5.js

Khi chúng tôi đã tải xuống âm thanh chuông cửa của mình, chúng tôi cần tải nó lên bản phác thảo p5.js của chúng tôi để chúng tôi có thể truy cập.

Để làm điều này, hãy làm theo các bước sau:

- Nhấp vào biểu tượng '>' ở bên trái trình chỉnh sửa web, ngay bên dưới nút phát. Thao tác này sẽ mở ra thanh bên hiển thị các tệp cho bản phác thảo của bạn.

- Nhấp vào hình tam giác nhỏ hướng xuống ở bên phải của 'Sketch Files'. Thao tác này sẽ hiển thị menu thả xuống với các tùy chọn để 'thêm thư mục' và 'thêm tệp'

- Nhấp vào 'thêm tệp'. Thao tác này sẽ hiển thị một cửa sổ để thêm tệp. Bạn có thể kéo tệp chuông cửa vào hộp hoặc nhấp vào nơi hộp cho biết 'kéo tệp vào đây để tải lên hoặc nhấp để sử dụng trình duyệt tệp'. Điều này sẽ cho phép bạn điều hướng qua các tệp máy tính của mình để tìm tệp âm thanh.

- Khi bạn đã kéo hoặc chọn tệp, bạn sẽ thấy tệp tải lên và tên của tệp sẽ xuất hiện trong thanh bên.

Bây giờ bạn sẽ có thể truy cập và sử dụng tệp âm thanh này trong bản phác thảo của mình.

Bước 3: Tải tệp âm thanh vào bản phác thảo P5.js

Việc tải tệp âm thanh vào bản phác thảo p5.js yêu cầu chúng ta tạo một đối tượng tệp âm thanh. Một đối tượng có các thuộc tính và chức năng riêng được tích hợp sẵn để chúng ta có thể sử dụng.

Để tạo một đối tượng, trước tiên chúng ta cần tạo một biến để giữ đối tượng. Điều này sẽ cho phép chúng tôi truy cập đối tượng và các thuộc tính của nó trong suốt bản phác thảo. Để tạo một biến, hãy chuyển đến dòng trên cùng của bản phác thảo và viết từ let. Từ này được sử dụng để khai báo một biến trong javascript. Sau đó đặt tên cho biến. Chúng ta có thể gọi biến bất kỳ thứ gì chúng ta muốn, nhưng sẽ rất hữu ích nếu đặt cho nó một cái tên có liên quan đến những gì nó sẽ làm trong mã của chúng ta. Trong trường hợp này, nó là hợp lý để gọi nó là chuông cửa.

để chuông cửa;

Vì p5.js dựa trên nền tảng web, chúng ta cần đảm bảo rằng tệp âm thanh đã được tải vào bản phác thảo trước khi bản phác thảo bắt đầu chạy, nếu không, chúng ta có thể không truy cập được các thuộc tính của đối tượng. Để làm điều này, chúng ta cần thêm một hàm để tải tệp âm thanh trước khi bắt đầu phác thảo. Hàm này được gọi là preload (). Chúng tôi viết điều này theo cùng một cách với hàm setup () và draw ().

Bên trong dấu ngoặc nhọn, chúng ta sẽ gán biến của mình cho đối tượng sound bằng cách sử dụng hàm loadSound (). Bên trong dấu ngoặc đơn, viết tên chính xác của tệp âm thanh bên trong dấu ngoặc kép:

tải trước hàm () {

chuông cửa = loadSound ('chuông cửa.mp3');

}

Bước 4: Phát tệp âm thanh bằng chức năng KeyPressed ()

Bây giờ tệp âm thanh đã được tải vào bản phác thảo, bạn có thể phát tệp đó bằng phương thức play (). Các phương thức về bản chất là các hàm dành riêng cho một đối tượng.

Nếu bạn đã sử dụng các lần nhấn phím trong p5.js trước đây, có thể bạn đã sử dụng câu lệnh điều kiện với biến keyIsPressed bên trong hàm draw. Tuy nhiên, khi làm việc với các tệp âm thanh, chúng tôi không muốn kích hoạt nó bên trong hàm vẽ. Hàm rút bài là một vòng lặp nên cập nhật liên tục. Điều này có nghĩa là tệp âm thanh sẽ phát đi phát lại miễn là một phím được nhấn xuống, điều này sẽ không dễ chịu khi nghe.

Để tránh điều này, bạn sẽ sử dụng một hàm có tên là keyPressed (). Điều này cũng được viết giống như hàm setup () và draw (). Viết điều này ở cuối đoạn mã bên dưới hàm draw ().

Bên trong dấu ngoặc nhọn là nơi bạn đặt phương thức play () sẽ kích hoạt tệp âm thanh một lần khi bạn nhấn một phím. Để sử dụng một phương thức cho một đối tượng, hãy viết tên biến chứa đối tượng theo sau là.play ();

phím chức năngPressed () {

chuông cửa.play ();

}

Bây giờ khi bạn chạy bản phác thảo của mình, bạn có thể nhấn một phím và âm thanh chuông cửa sẽ phát.

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: Tạo nút giấy

Để kích hoạt âm thanh với Makey Makey, chúng ta sẽ sử dụng bút chì và giấy thông thường để làm nút.

Vẽ hai nửa vòng tròn với một khoảng cách rất nhỏ giữa chúng sao cho chúng không thực sự chạm vào nhau nhưng đủ gần để chúng ta có thể chạm vào cả hai nửa cùng một lúc bằng một ngón tay. Mỗi nửa vòng tròn cũng phải có một đường dày kéo dài đến mỗi đầu của tờ giấy. Đây là nơi bạn sẽ gắn các kẹp cá sấu từ Makey Makey.

Đảm bảo rằng bạn tô đậm cả hai mặt để than chì từ bút chì có thể giữ dòng điện từ Makey Makey.

Thiết kế của hai nửa vòng tròn là có một khoảng cách nhỏ giữa chúng đến mức về cơ bản là không thể không chạm vào cả hai bên cùng một lúc. Điều này cho phép bạn hoàn thành mạch giữa chìa khóa và Earth trên Makey Makey mà không cần phải giữ dây nối đất.

Bước 6: 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 âm thanh).

Lấy chiếc kẹp cá sấu được gắn vào phím Space và kẹp nó vào một bên của nút giấy. Lấy chiếc kẹp cá sấu được gắn vào Trái đất và kẹp nó vào phía bên kia của nút giấy.

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

Bước 7: Nhấn nút để kích hoạt tệp âm thanh

Tại thời điểm này, bạn đã sẵn sàng để rung chuông cửa của bạn. Bắt đầu phác thảo (nhớ nhấp chuột vào canvas để phím bấm sẽ thực hiện chức năng keyPressed ()) và sau đó chạm vào hai nửa hình tròn trên giấy cùng một lúc. Bạn sẽ nghe thấy âm thanh phát tệp âm thanh chuông cửa.

Bước 8: Phần mở rộng: Thêm thành phần trực quan vào bản phác thảo

Tại thời điểm này, bản phác thảo của chúng tôi chỉ bao gồm mã để phát tệp âm thanh, vì vậy bạn sẽ không thấy bất cứ điều gì thay đổi trên màn hình. Đây có thể là tất cả những gì bạn muốn làm nếu bạn đang cố gắng tạo một số loại dự án âm thanh tương tác.

Tuy nhiên, với khả năng mã hóa trực quan của p5.js, khả năng thêm đồ họa là vô tận. Bạn thậm chí có thể có hình ảnh phản ứng với các tệp âm thanh của bạn theo nhiều cách như chỉ xuất hiện khi tệp âm thanh đang phát, phản ứng với những thay đổi về âm lượng và / hoặc tần số hoặc thậm chí tạo ra một bản trình bày trực quan của chính âm thanh đó.

Bước 9: Tiện ích mở rộng: Thực hiện một vòng tròn thay đổi màu sắc khi nhấn nút

Để giữ cho dự án này đơn giản, chúng tôi sẽ tạo một vòng tròn thay đổi màu sắc khi nút được nhấn.

Trong hàm draw (), tạo một vòng tròn bằng cách sử dụng hàm ellipse (). Trên đó, thêm hàm fill () để thiết lập màu của hình tròn. Đối với bản phác thảo này, màu gốc sẽ là màu trắng, đó là giá trị thang độ xám của 255. Bạn có thể đặt màu thành bất kỳ màu nào bạn muốn bằng cách sử dụng các giá trị màu RGB.

Ở giữa hàm fill () và hàm ellipse (), hãy tạo một câu lệnh điều kiện bằng cách sử dụng biến keyIsPressed bên trong dấu ngoặc đơn. Ở giữa các dấu ngoặc nhọn của câu lệnh điều kiện, hãy đặt một hàm fill () khác được đặt thành màu mà bạn muốn hình tròn thay đổi thành khi bạn nhấn phím. Đối với dự án này, màu sẽ thay đổi thành màu vàng có giá trị RGB là 255, 255, 0.

if (keyIsPressed) {

điền (255, 255, 0);

}

Nhấn nút phát để chạy bản phác thảo. Vòng tròn màu trắng bây giờ sẽ xuất hiện khi tải bản phác thảo (Nhớ nhấp chuột vào khung vẽ). Sau đó nhấn nút giấy và bạn sẽ nghe thấy tiếng chuông cửa và thấy vòng tròn đổi màu.

Bản phác thảo p5.js: