Wednesday, August 19, 2015

sound effects in processing to processing.js conversions.

Over the past decade I wrote a lot of games and toys in Processing. When I ran into the original IDE/Applet generating kit in 2004, it was empowering. Visual Basic is the only other language that comes to mind in my developer history as a powerful, flexible, easy-to-learn toolkit for making fun interactive things that I could share with others.

Of course, Java Applets (Java programs run in the browser) have gone the way of the Dodo, and so for an upcoming project I've been looking into converting almost all of my old games into something that runs in modern browsers. Fortunately, there was Processing.js, a freak of nature that let modern javascript browsers run legacy Java sketches. I'd written about some of the porting gotachas 3 years ago. The biggest hurdles remaining are Sound and 2D Physics.

I usually used the "minim" library for sound in Processing. I thought the easiest replacement would be my own lowLag library. It would also be cool if I could keep the "dual mode" nature of processing, where I can toggle between Java and browser friendly "Javascript" mode without recoding. 

Net-net is I wrote this little bit of javascript that exposes lowlag functionality in a way that gets exposed identically as the old minim objects to Processing code:
window.AudioPlayer = function(f){
this.file = f;
lowLag.load(this.file);
this.rewind = function(){};
this.play = function(){
lowLag.play(this.file);
}
}
window.Minim = function(){
lowLag.init();
this.loadFile = function(file){
return new AudioPlayer(file);
};
this.loadSnippet = this.loadFile;
};

(yeah, I'm ignoring "rewind", and treating Audio Files the same as Snippets.)

The other trick was getting the Processing IDE to respect these files. So I could edit and then run in the browsers, without always manually hacking the index.html files etc. Asking about that on the Processing Forums the best bet seems to be twofold:
1. Update ~/Documents/Processing/modes/JavaScriptMode/template/template.html so that the generated index.html has a reference to the .js file
2. if you don't want to refer to the .js files on a known host, put the .js files in the same working directory and they'll be automagically copied into the web-export folder the IDE kicks out when you "run" a Processing sketch in Javascript mode. However, this borks toggling between Java and Javascript mode (when you switch to js mode it reads the pure .js files as editable tabs, and then when you try and go back to Java mode it refuses, opening up a blank window instead.

From that forum, I also learned that it transpiled Processing is being deprecated in favor of p5, which provides the classic Processing API in code to be called natively by your js. Transpiling was always such an odd beast that I don't really mind moving on... and I guess I shouldn't feel to bad about the hacks I do to support my legacy Java/JS cross-compiling modes.

Next step: finding a good 2D Physics solution. I had done some cool things Jean Maxime Coulliard's PPhys2D, now defunct- but it had an awesome learning section. I need to find a good wrapper for Box2D, and may end up porting those things to P5.



No comments:

Post a Comment