One way to implement p5.js into a Node.js application

p5-integration.md

Want to implement p5.js into your Node application? This is one way to do it!

Process

1. Download the p5 libraries. I recommend using the minified files due to the bulk of p5.

2. Within the head of the index.html file, require each library. The individual files are stored with the libraries folder.

   <script type='text/javascript' src='./libraries/p5.min.js'></script>

   <script type='text/javascript' src='./libraries/p5.dom.js'></script>

   <script type='text/javascript' src='./libraries/p5.sound.min.js'></script>

3. Create a file at the root level to perform your p5, then require it in the head of the index.html file.

   <script src="sketch.js" type="text/javascript"></script>

4. Within your sketch file, p5 will recognize two function: setup() and draw(). Perform your operations within these files. Our use case for Shrimpin' Ain't Easy was to play a song and record the amplitude.

   1. See our sketch.js file, where we:
      • preload the song
      • play the song
      • record the amplitude
      • map over the amplitude
      • create a div with the mapped amplitude on the DOM
   2. Then we rip the amplitude from the DOM
   3. And pass it into our moveObjects function

Important Notes

---

Challenge 1: Communicating between Node and p5

• I'll preface this by saying this is a workaround solution. It didn't seem possible to export the amplitude by itself due to timing.

Solution

• I created an element on the DOM, then stole that information with jQuery. I stored this value in a variable and passed it to my moveObjects method as an argument.

---

Challenge 2: Default Canvas

• p5 will create a canvas with and id of defaultCanvas0 ( <- zero). You can either use this canvas, or you will need to find a way to hide it. This is easier said than done, because the canvas has inline styling for height and width that cannot be easily overridden. Even using !important tags didn't overwrite this property.

Solution

• create your own canvas in your setup function. The first two arguments are height and width, so set each of these to zero and the canvas will exist on the page, but will be invisible.

---

Challenge 3: Finding the correct amplitude range

• The motion of our shrimp is dependent upon the amplitude, but I needed to ensure that this value was in a reasonably predictable range.

Solution

• Check out the p5.sound map function. This takes in 5 arguments, the value (amplitude), beginning min value, beginning max value, desired min values, & desired max value. The amplitude enters based on a range from 0-1, but you can determine the range of the output value by setting the desired min and desired max values. Check out his example.

---

Disclaimer

• I'm sure there are easier ways to acheive this functionality. If you have any reccomendations, please comment on this gist!
• p5.js bring a lot of bulk. I'm sure this particular use case could be achieved using Webkit Audio

---

Steve Pentler