Processing.jsのPImageでonLoadイベントを受け取る

はじめに

Processing.jsをよく使っていて、PImageインスタンスをloadImageで生成する際に、
画像の読み込み完了を検知して何かしらの処理を行いたいことがよくある。

方法

PImageインスタンス内にsourceImgプロパティがあり、
これが単なるimg要素なのでイベントハンドラを登録してやれば良い。

PImage sampleImage = loadImage("http://www.hatena.ne.jp/images/portal/logo-portal-top2@2x.png");

// sampleImage.sourceImgはimg要素
var previousHandler = sampleImage.sourceImg.onload;
sampleImage.sourceImg.onload = function(evt) {
    console.log("読み込み完了");
    previousHandler(evt);
};

元々sourceImgプロパティ内のimg要素のonloadイベントには、PImageを使ってimg要素内の画像を表示するための処理が記述されているっぽいので、まずはsourceImgのonloadを一旦別の変数に保持しておき、後からハンドラの中でわざわざ呼ばないといけないのがかっこ悪い。
この辺は工夫すればもっと綺麗に書けると思う。

ちなみに

普通にProcessing使うときにloadImageの読み込み終了を検知する方法を知らない。
元々ProcessingではloadImageを非同期に使われることを想定してなかったりするのかな？