8 Amazing Hardware Projects With Processing and p5.js
The DIY electronics world is full of interesting ways to interact between hardware and software.
Microcontrollers like the Arduino and single board computers like the Raspberry Pi have completely changed the way hobby electronics and prototyping is approached. They are both so suited to quick development that it can be hard to decide which to use in a project.
Both of these languages are designed to make coding more accessible to artists, educators and beginners. If you’ve used the Arduino IDE you might find the layout familiar. In fact the Arduino IDE was actually based on the source code for Processing. They have things in common, with scripts being called sketches and libraries that can be installed from the IDE window in similar ways.
Today we are going to show you some of the coolest hardware projects using Processing and p5.js.
1. DIY Music Production Controller
This build uses p5.js as its music processor, along with a Funkey board as its hardware I/O. Funkey is an Arduino compatible board, which also works with Scratch, perfect for teaching kids about coding.
Since the signals from the Funkey board are handled by p5.js, it cuts out the need for midi—although it is easier than you think to use an Arduino as a Midi device .
In this case, the p5.js framework is used much like the sample banks of a real MPC, triggering different samples depending on which pad is hit. The totally DIY aspect of this really appeals to us. Instead of using buttons or switches, Mr Bomb uses copper tape and tin foil to create capacitive touch sensors.
With the combined cost of this whole build being around $20 for the Funkey Simple board and parts, this is a great little hacked alternative to an expensive controller.
2. Singing the p5.js Blues
From hip hop to blues now, with a soloing browser window controlled by an Arduino Uno.
The p5.js sound libraries take care of the sound generation. Given that p5.js works natively in the browser, this makes it a powerful sound recording, playing and synthesizing tool.
3. Flying Plumber
This project by Vimeo user Ji Young Chun combines a homemade Arduino game controller with a game made in p5.js to make one of the most fiendishly difficult looking browser games of all time.
There is no further documentation for this project but it looks to make use of all of the basic states required to create a simple browser game with the framework. The real inventiveness comes in when it comes to character control. Rather than using the standard input methods, the values from home made bend sensors attached to the Arduino pins are taken instead, making the hero of the game move erratically.
This is an in depth and interesting take on building a Mario like game, and certainly harder than making levels for the real thing !
4. Pi AR With Processing
Processing also has a Raspberry Pi version, meaning your GPIO pins and programs can all exist on the same device. This opens up some real possibilities, and YouTuber shahrukh tariq uses it to great effect in his homemade augmented reality headset.
AR differs from VR as you retain awareness of the world around you and have imagery projected on top of a clear display. In this project, a virtual plane projected onto a Fresnel lens reflects back to the user’s eye. Processing projects this video in virtual space and lets the user control its position with the mouse and keyboard.
The video, which is one of many astonishing projects on the channel, shows the user watching a video on their headset before moving it to the side of the screen for a better view of the street. This is only a prototype, but sci-fi imaginings of Iron Man-style view screens are well within the scope of the handy DIY tinkerer now.
5. Arduino Radar
Using a distance sensor with an Arduino to collect data is nothing new. What is fantastic about this project by hackster.io user Akshay6766 is the way that data is used.
A servo moves the distance sensor back and forth to give it more accurate readings of its surroundings. If anyone gets too close a buzzer will sound the alarm, and the screen will show the location of the intruder!
Processing is used here to interface with the Arduino over a serial connection, before presenting the distance data graphically. The project page outlines the project and gives a full rundown on the code and components required, along with the fritzing diagram showing how to build the circuit.
6. DIY 3D Controller
Gesture-based controllers and virtual reality are becoming more common, but they can be expensive things to develop, with even the entry level Leap Motion controller retailing for $69.99.
Well, it turns out that previous sentence isn’t fully correct, you can build a touchless 3D interface with an Arduino, Processing, and tin foil. It sounds like a dreamworld doesn’t it? It’s not.
The full build article outlines everything required to make the controller along with the code required for both the Arduino and Processing software. This build uses the same capacitive touch as the p5.js cardboard MPC at the start of this article, but uses it in a different way, calculating the user’s hand in 3D space based on three different voltage readings.
This is an incredibly impressive project which requires almost no parts to make, and is the perfect way to kick start your experimentation with alternate control methods for computers.
7. Oh Still My Beating Heart
There are lots of variations on Arduino powered heart rate monitors using infrared LEDs and receivers. This one by YouTuber Kevin Darrah really caught our eye for being a little more special
The video goes into depth about how he created his surprisingly accurate heart rate monitor, and how he went about representing the data on screen. In short, an IR LED and receiver detect the user’s pulse, which is then sent through a homemade amplifying and filtering system. Kevin’s YouTube channel has an excellent video on filters in general, and the channel is a great resource for those getting into DIY electronics.
This data is then sent into a homemade Arduino which samples the data and lights up LEDs based on the total amplitude of the heart beat. This means that the LEDs light up all the way for each pulse. The Arduino board then sends the mapped data to Processing through the serial port, which it converts into an integer to position the heart rate graphic on screen.
This is an elegant approach to this project, which produced a build much more accurate than many others of its type.
8. DIY VR Glove
This project takes things into the stratosphere, and brings back those Iron Man feelings. This is a fully functional, DIY Bluetooth activated VR glove. Not only that, but it looks like this:
That isn’t us making fun here, that thing looks awesome. It’s our kind of DIY and as you will see, fully functional. The full project by B.Aswinth Raj at circuitdigest.com takes you through the project from inception to where it is today. It combines an Arduino and a Bluetooth module for computer communication, with two finger mounted Hall sensors and a thumb mounted magnet which act as switches. A bold and bright object is palm mounted for tracking.
On the computer side, Processing code uses the webcam to track the palm object, and uses its position to control the computer mouse.
This build combines so many elements of things that we love that it’s hard to know where to start. The fact that the glove runs on batteries and communicates by Bluetooth makes it totally standalone and wireless. The use of the webcam and on board laptop Bluetooth make it usable on a variety of systems. This is a truly great DIY project, and the tutorial page takes you through all of the code required to make it work for yourself.
Start Using Processing and p5.js for Your Projects
These projects represent just a few of the builds that use Processing and p5.js at their core.
While there are plenty of other programming languages you can learn, Processing and p5.js offer accessibility through their IDEs and libraries that even novice coders should be able to make use of.
Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.