今日も更新。
変更点は以下の点です。
ProcessingのクリックイベントハンドラーからjQueryのクリックイベントハンドラーに変更したのは、今後マルチタッチ対応するときにJSのライブラリとか使いやすくなるだろうと思いましたので。
ただcanvas要素に.click(fn)でイベントを付与しようとしましたが、それだとうまくいかなくて、.bind('click', fn)だとうまくいきました。
なぜなのかはちょっとわからないですね・・・。
他に気づいたこととしては、ProcessingのmouseX, mouseYとevent.offsetX, event.offsetYは同じ値になるということ。
Processingのコンストラクタには要素がひとつしかない場合でも$('canvas')[0]という形で[0]をちゃんと指定しないとダメということ。
サンプルは以下に設置しています。