P5.JS is by far my favorite JavaScript library. Not only does it get to the heart of what it means to be a creative coder, but it comes with all the learning resources you would need. The most important resource, in my opinion, is Daniel Shiffman’s ‘The Coding Train’ I don’t think I’ve come across a teacher able to maintain such a level of excitement, balanced with important information. As a coder who has consumed countless hours of tutorials, I must say he is by far one of the best at it. Usually tutorials abandon information to preserve interest, where he has mastered the task.
A good visual example of what it can do is on my “home” page. The blue rotating design behind the wizard graphic is a Mauer Rose also created using P5.JS and a tutorial from The Coding Train. As I was studying P5.JS and watching all the Coding Trains videos I could, it dawned on me that the code is absolutely perfect for projection mapping. You don’t need expensive licensing or proprietary machinery. It can be done with relatively slow computers and basic projectors.
This Coding Train tutorial that triggered my idea was on the introduction to Matter.js In it, Daniel Shiffman explains how to create a “body” which will simulate the physics of a collision with another body. You need to give the body a color or it will not appear. That was the magic right there! It occurred to me that if I was projecting my P5.JS sketch on a large wall and had placed these invisible bodies over actual structures on the wall it would look like the projected graphics were interacting with the actual wall.
Here is an example of the ballroom wall. The P5.JS sketch is projected over the back wall using a basic laptop and common 3k projector. The wall has a doorway, a running base board, light switches, sconces and a fire detector. I simply place the invisible bodies over these objects in the projection. The sketch drops yellow blocks. When the yellow blocks are dropped they bounce off the bodies creating an amazing illusion of real world interaction. Here is a quick demo from my youtube channel.
I think this opens up opportunities to turn flat boring surfaces into eye-catching displays. It would be a creative way to add sponsor graphics to public spaces, create eye-catching signs where they couldn’t be before and do it relatively cheaply.
These crossroads of creativity and commercial potential are always intriguing. Shortly after creating this, I worked on several other applications. The pandemic hit shortly after and anything relating to meeting in person quickly vanished. Since then, I no longer work in conference centers, so I had to shelve the idea. However I do use the same library for dozens of other creative endeavors. I strongly recommend anyone interested in creative coding to take up The Coding Train and the P5.JS library.
Links:
https://www.youtube.com/@TheCodingTrain