Paper.js Coding Project: Music Games

paper.js project

Over the last few days of coding bootcamp, the projects have been getting really fun! Today we spent time learning about a few cool libraries, Paper.js and Howler. The paper.js coding project is a simplified version of Patatap, an awesome sound and animation toy! If you just want to get right to playing the game you can check it out here: Circle Synth Music Game.

paper.js coding project game

Learning Paper.js and Howler.js

Wow was this project fun! Spending years behind the desk in a music studio I was excited to find out we would be making a music app for this project. We were tasked with using Paper.js for the animation and Howler.js for the sounds in the project.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Paper.js About Page
howler.js sound libraries
Have fun with sounds by using Howler.js!

What does the app do?

The app creates a simple sound player and animation. Each key A-Z on your keyboard corresponds to a sample and animated circle. You can press and play to your heart’s content. That’s about all there is to the app. But it is sure fun. You could probably make any basic EDM song with the samples provided. 🙂

The Paper.js Project Code

paper.js coding project - the code

The bulk of the heavy lifting in the project is handled by these 2 functions. On a key press, a circle is created and a sound is played. The data for each key is held in an array (keyData).

paper.js coding project play the game
Play the Game Now!!!

On to Backend and Node JS

Now that this paper.js coding project is completed my Bootcamp is now about to dive into the Backend. I’m currently 60% through the course and looking forward to finishing the entire course before I head out on my nomad travel adventures in August.

Leave a Reply