8 Amazing Hardware Projects With Processing and p5.js

Ian Buckley 28-02-2018

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.

Now, enter Processing and its newer accomplice p5.js.

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

The AKAI MPC is one of the staple tools of hip hop history. It’s no surprise then, that maker Mr Bomb decided to emulate one at a hip hop-themed NYC Music Hackathon last year.


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 How to Make a MIDI Controller with an Arduino As a musician who has amassed a collection of musical instruments and noise boxes, the humble Arduino is the perfect tool to create a custom MIDI controller. Read More .

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.

This pentatonic soloing slider is another invention of Mr Bomb. This time, values are taken from a slide potentiometer before being mapped to the notes in the pentatonic scale. All of this is made possible through the p5bots library, which connects to Arduino-compatible boards in firmata mode. We used a similar method in our tutorial on controlling Arduino with Javascript How to Control Your Arduino Using JavaScript Did you know that you can control your Arduino with Javascript? With a piece of software and some creativity, you can! Here's how to do it. Read More .

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 Ways To Make A Mario Game on Your Computer As long as there's been an Internet, there have been fan-made Mario games. Read More !

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 Augmented vs. Virtual Reality: What's the Difference? Augmented reality. Virtual reality. Mixed reality. What are all these "realities" and how are they going to impact you over the next few years? Here's everything you need to know. Read More 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

hardware projects using processing and p5.js

Using a distance sensor with an Arduino to collect data is nothing new. What is fantastic about this project by 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 Leap Motion Review and Giveaway The future is gesture controls, they would have us believe. You should all be touching your computer screens, waving your arms around in front of your Xbox, and waggling your way to virtual sports victory.... Read More 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 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 Which Programming Language Should You Learn for the Future? Which is the best programming language to learn for the future? If you could only pick one language to learn and master for the future, there's no contest: it must be JavaScript. Read More 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.

Related topics: Arduino, Electronics, Processing.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *