8 Amazing Hardware Projects with Processing and p5.js

The world of DIY electronics is full of interesting ways for hardware and software to interact.

Microcontrollers such as the Arduino and single board computers such as the Raspberry Pi have completely changed the approach to electronics and hobbyist prototyping. Both of them are so suitable for rapid development that it can be difficult to decide which one to use in a project.

Now enter Processing and its new accomplice p5.js.

Both of these languages ​​are designed to make coding more accessible to artists, educators, and beginners. If you have used the Arduino IDE, you may find the layout familiar. In fact, the Arduino IDE was based on the source code for processing. They have something in common: scripts are called thumbnails, and libraries can be installed from the IDE window in a similar way.

Today we are going to show you some of the coolest hardware projects using Processing and p5.js.

1. DIY music controller production

AKAI MPC is one of the main instruments of hip hop history. No wonder producer Mr. Bomb decided to emulate one of them at a hip-hop music hackathon in New York last year.

This build uses p5.js as the music processor and the Funkey board as hardware I/O. Funkey is an Arduino compatible board that also works with Scratch, perfect for teaching kids how to code.

Since the signals from the Funkey board are processed by p5.js, this eliminates the need for midi — although using the Arduino as a Midi device is easier than you might think.

In this case, the p5.js framework is used much like the real MPC’s sample banks, calling different samples depending on which hit it hit. The completely self-contained aspect of it really appeals to us. Instead of using buttons or switches, Mr Bomb uses copper tape and tin foil to create capacitive touch sensors.

The total cost of the entire assembly, which is about $20 for the Funkey Simple board and components, is a great alternative to an expensive controller.

2. Singing blues p5.js

From hip hop to blues now with an Arduino Uno controlled solo browser window.

This pentatonic solo slider is another invention of Mr. Bomb. This time the values ​​are taken from the slider potentiometer and then mapped to notes in the pentatonic scale. All this was made possible thanks to the p5bots library, which connects to Arduino-compatible boards in Firmata mode. In our tutorial, we used a similar method to control Arduino with Javascript. control Arduino with control Arduino with

The p5.js sound libraries take care of sound generation. Given that p5.js runs natively in the browser, this makes it a powerful tool for recording, playing, and synthesizing audio.

3 Flying Plumber

This project from Vimeo user Ji Young Chun combines a homemade Arduino game controller with a game built in p5.js to make one of the slickest looking browser games of all time.

There is no further documentation for this project, but it uses all the basic states needed to make a simple browser game with the framework. The real ingenuity comes when it comes to character control. Instead of using the standard input methods, they instead use values ​​from homemade bend sensors attached to the Arduino pins, which makes the game hero move erratically.

It’s a deep and interesting approach to making a Mario-like game, and certainly more difficult than creating levels for a real game. !

4. Pi AR with processing

Handling also has a Raspberry Pi version, which means your pins and GPIO programs can exist on the same device. This opens up some real possibilities, and YouTuber shahrukh tariq uses it very effectively in his home augmented reality headset.

AR is different from as you remain aware of the world around you and project images on top of a clear image. In this project, a virtual plane projected onto a Fresnel lens is reflected from the user’s eyes. Processing projects this video into a virtual space and allows the user to control their position using the mouse and keyboard.

The video, which is one of the many amazing projects on the channel, shows the user watching a video on their headset and then moving it to the side of the screen to get a better view of the street. It’s just a prototype, but the sci-fi concept of Iron Man-style screens is now within easy reach for the handy DIYer.

5. Arduino Radar

Using a distance sensor with an Arduino to collect data is nothing new. What’s amazing about this project by hackster.io user Akshay6766 is the way data is used.

The servo moves the distance sensor back and forth to give it a more accurate reading of its surroundings. If someone gets too close, a buzzer will sound and the intruder’s location will be displayed on the screen!

Processing is used here to communicate with the Arduino via a serial connection before plotting the distance data. The project page outlines the project and gives a complete rundown of the code and required components, along with a brief diagram showing how to build the circuit.

6. DIY 3D controller

Gesture-based controllers and VR are becoming more common, but they can be costly to develop, even with an entry-level controller retail for $69.99.

Well, it turns out that the previous sentence is not quite correct, you can create a contactless 3D interface with Arduino, Processing and foil. Sounds like a dream world, doesn’t it? Is not.

The complete build article lays out everything you need to build the controller, as well as the code needed for both the Arduino software and processing. This build uses the same capacitive touch as the cardboard MPC p5.js at the beginning of this article, but uses it differently, calculating the user’s hand in 3D space based on three different voltage readings.

This is an incredibly impressive project that requires almost no details, and is the perfect way to start experimenting with alternative computer control methods.

7. Oh, still my beating heart

There are many variations of Arduino powered heart rate monitors using infrared LEDs and receivers. This YouTuber Kevin Darra really got our attention for being a little more special

The video details how he built his amazingly accurate heart rate monitor and how he presented the data on the screen. Briefly, the IR LED and the receiver detect the user’s pulse, which is then sent through a homemade amplification and filtering system. Kevin’s YouTube channel has a great video on filters in general, and the channel is a great resource for those into DIY electronics.

This data is then sent to a homemade Arduino, which samples the data and lights up LEDs based on the overall amplitude of the heartbeat. This means that the LEDs light up completely for every pulse. The Arduino board then sends the matched data to processing via the serial port, which is converted to an integer to display the heart rate graph on the screen.

It’s an elegant take on this project that has produced a much more accurate build than many others of its kind.