It has two version, Java mode and Javascript mode.
Using Minim is not straightforward in Javascript mode, especially for sound part. (Yet there is better and richer sound library, Maxim which is until now only be able to play sound in Chrome browser, ref: Can I use Web Audio API ).
Here are both versions,
Java mode:
http://www.openprocessing.org/sketch/125380
JavaScript mode:
https://googledrive.com/host/0B1HulZRKubRMdzhFYVByUnM4YUE/index.html
The Java mode does not need any tweak. Just load the source code in Processing IDE.
Below is explanation for the Javascript mode:
ProcessingJS (processingjs.org) can load and play sound. (either by using HTML5 canvas or using Minim, also Maxim for sure).
But we need some extra workarounds and knowledge on how "minim.js" is working. We need to download "minim.js" from here, https://github.com/Pomax/Pjs-2D-Game-Engine/blob/master/minim.js
In that github page, click on the "Raw", then Save As, save it as "minim.js" into your sketch folder.
Now, in the "web-export" folder, open "index.html" in a text.editor.
Add this line,
<script src="minim.js" type="text/javascript">somewhere in between <head> and </head> tag.
Save the "index.html".
There is limitation when using "minim.js".
We cannot use AudioSample. But this is easily substituted by AudioPlayer. So, change all AudioSample to AudioPlayer, then change all loadSample() to loadFile(), and change all .trigger() to .play().
That's it.
Now, we're ready to share your Processing sketch as JavaScript (processingjs). We can share it in the openprocessing, google-drive, dropbox, or your own web hosting.
Please be aware,
--MP3 can only be played in Chrome, IE, Safari, (and Firefox Windows 7, 8, Vista). MP3 is not supported in older Firefox, also not supported in Firefox running in Windows XP.
--Ogg can only played in Chrome, Firefox, Opera.
--Wav can be played in all major browsers, except IE. (But, Wav file has much larger size, so better to avoid it.)
(http://www.w3schools.com/html/html5_audio.asp)
A workaround to this audio limitation, is to load all your audios in two formats at once, MP3 and Ogg. E.g.
minim = new Minim(this);
sound1 = minim.loadFile("sound1.ogg");
sound1 = minim.loadFile("sound1.mp3");----------
Make sure our sketch follow all guidelines explained in here, http://processingjs.org/articles/p5QuickStart.html
Also, use "preload" directive in your processing sketch, for all images and font (if you use PFont to draw text)
http://processingjs.org/reference/image_/
http://processingjs.org/reference/font/
http://processingjs.org/reference/preload/
http://processingjs.org/reference/globalKeyEvents/
E.g. put these lines in the top of your PDE sketch file,
/* @pjs preload="image1.png"; */
/* @pjs preload="image2.png"; */
/* @pjs preload="sound1.mp3"; */ /* @pjs preload="sound1.ogg"; */ /* @pjs font="tahoma.ttf"; */ Change the "image1.png" etc to the name of our image files.
If you don't use font, we can omit the font directive.
Those "preload" directives will make sure all images, sounds and font files will be preloaded by browser, so when your sketch accessing them, they're already available.
(because downloading over Internet need times, hence preloading will be very useful.)
The globalKeyEvents directive is useful for web version, since when the page is first loaded the canvas not yet receive focus, so all keyboard events (keyPressed) won't be caught by canvas. User will need to do mouse click on the canvas first to set focus on it.
---------
Note on Google Drive as static web hosting:
--In Google Drive, create a new folder in our main folder. As example, named it "pub", but you can use any other name you like.
--Make the "pub" folder public.
(Right click above pub folder, then click Details, there will be "Sharing" in the right side. Click on "Share" icon. A dialog will appear, click on "Change". Select "Public on the web", then "Save".
--Now, click on the "pub" folder to open the folder.
We will now inside the pub folder.
--Upload all our sketch files, that is all files inside the "web-export" folder.
(index.html, your PDE file, images, sounds, processing.js, minim.js, and so on.)
(The "upload button" is a red up-arrow button in the left side.)
--Upon completion uploading, click on the "index.html" file.
--It will be opened, then look at the bottom, there is an "Open" button. Click on the "Open" button.
--Now, "index.html" file will be opened in Google Docs.
--There is a "Preview" button, click on it.
--Look at our browser's address-bar. That's the URL (link) to your JavaScript sketch.
--Write down the address (copy-paste) into a text file, and save it for our future reference.
--Share this URL as you wish.
--------
However, if you find all the above steps are difficult, then my humble suggestion is to use the "v1.5" AppletMaker version to share your sketch in openprocessing in Java Mode. (In the Processing IDE, run menu Tools | Add Tool.. | Applet Maker)
Please note that Java mode (applet) won't be supported anymore in near future by openprocessing.org
--------
Note on the game:
The window size of the sketch is 800 x 600 pixels.
This is a memory game called "matching pairs game".
--The objective is to turn over cards in pair of two.
--You have to remember previously exposed cards.
--Every click is counted by Steps counter. The less steps to use the better.
To turn over a card, do a click with mouse.
Keyboard keys are,
"C" to change set of cards,
"N" to start new game,
"O" to turn off / turn on sounds,
"H" to open Help dialog.
