Javascript and processing.js (and webpd). How let them communicate
In my free time I recently engaged with a personal video game project. I’m using processing.js for game logic and graphics and webpd (pd.js) for the audio engine. Processing.js is a well know and established project. It has good documentation and rich community of user on-line. Not the same for webpd that is recentborn and still in a very alpha stage. Webpd is a javascript implementation of puredata vanila using mozilla audio api. Webpd was originally developed from Cris McCormick and after a time of silence it hases been forked by Sébastien Piquemal and is currently under heavy development. This incarnation of webpd is:
-
a 100% JavaScript Pure Data runtime. It aims at allowing a subset of Pure Data audio patches to run in the browser without plugins.
-
is also a standalone DSP library. Every object as you know it in Pure Data exposes a complete API, allowing developers to control everything with JavaScript.
Still many basic and tremendously useful objects are miss (like route or pack) but they are on the way. You can also contribuite to make it more efficent whie is BSD licensed.
The topic of this post is not really to present this great tools but to document a couple of solution I used to solve some very common y pretty boring problems.
Alwais at some point you will need to get access to processing function and variables directly from javascript. In order to do that you first need to use Processing.getIstanceById() function.
[cc lang=”javascript”]pjs = Processing.getInstanceById(“nameOfSketch”);[/cc]
The problem comes with asynchronous web technology so can happen that when you are trying to get the instance your processing canvas has not been loaded yet. The consequences is don’t have any access to processing function from javascript side.
In order to avoid that I used a setInterval() fnction onReady event, waiting for pjs to be ready . In the follow example I used jquery:
[cc name=”test” lang=”javascript” ][/cc]
In that way you are sure to get Processing instance corretly and so access to processing.js function directly from javascript.
[cc name=”getfunction” lang=”javascript” ][/cc]
pds.myFunctio(); will return myFunction value from processing.js sketch. Still is not possible (for what I tested) to directly get values from sketch, so you will have to write a funtion to get processing.js values.
Working on a this project something very weird happen with my code. I’m using PImage preloading directives from processing.jscode. As documented in processing website:
[cc name=”directives” lang=”javascript” ][/cc]
Strangly this directive call broke the system how access from javascript to processingjs functions. I can’t understand exactly why; I guss comment system has something to do with. To solve this issue I used requestImage() function from processingjs instead of loadImage() and I didn’t need to use preload directives.
[cc name=”request” lang=”javascript” ][/cc]
Using this two tricks every thing worked straight
forward and I could finish my javascript-processingjs-webpd code.
Soon I’ll release it as indy game and as public code.
