は、setup（）のPImageオブジェクトの幅/高さのプロパティにアクセスできない

Question

私はPImageクラスを使っています。通常は2つのPImageオブジェクトを作成し、そのうちの1つ（私の入力画像）に画像をロードし、createImage（）を使用して空の画像を作成します。次に、loadPixels（）メソッドを使用して入力上のデータにアクセスし、いくつかの操作を行い、それぞれの出力ピクセルを結果に設定します。これまでのところ私は何の問題もありませんでした。

入力および出力PImageオブジェクトのサイズは、ピクセルごとの操作をできるだけ簡単にするためには同じである必要があります。だからここ

は漬物である：

PImage myinput; 
PImage myoutput; 

void setup() { 
    size(350, 350);  
    myinput = loadImage("myfile.jpg"); 
    // the pic is 300 x 300 

    //myoutput = createImage(myinput.width, myinput.height, RGB); 
    //I've hardcoded the width and height below 
    myoutput = createImage(300, 300, RGB); 
} 

void draw() { 
    image(myoutput, 0, 0); 
} 

上記の結果は、私が書いたコードを考える350 X 350のグレーキャンバスに重なる黒四角300×300であり、これは私が期待する結果です。

myoutput = createImage(300, 300, RGB); 

私の質問は以下のビットに関する：：

の代わりにハードコードさて、上記の例では、私はラインで「myoutput」の幅と高さをハードコードしまし

値は、私はむしろこのような何かをしたい：

myoutput = createImage(myinput.width, myinput.height, RGB); 

しかし、それは動作していません。私はちょうど大きな350×350の灰色のボックスを取得します。そして私はなぜそれがわからない。私は疑いがある。私はJavaScriptの画像を扱うときに、画像の幅/高さのプロパティにアクセスする前に、ページが読み込まれるのを待っています（window.onload（）{}などのイベントリスナーを使用しています）。

UPDATE： 私は次のように持っていた別のポストを見た：

/* @pjs preload="myfile.jpg"; */ 

私はPImageオブジェクトを宣言する前に、だから私はちょうどこれを含め、現在、以下の行が動作します。

myoutput = createImage(myinput.width, myinput.height, RGB); 

私は新しいコードでかなり混乱しています。

Answer 1

Javaモードでスケッチを実行すると、Javaとして実行されます。 Javaは画像を同期してにロードします。つまり、イメージが完全にロードされるまでコードは実行されません。そのため、Javaモードで動作します。

Processing.jsを使用して実行しているときは、JavaScriptとして実行しています。 JavaScriptは画像を非同期ににロードします。つまり、コードが続行されている間に画像がのバックグラウンドでロードされます。つまり、次の行が実行されたときにイメージがロードされたことが保証されないため、イメージのwidthとheightは設定されていません。

preloadコマンドを使用すると、そのwidthとheightにアクセスしようとする前には、画像をロードすることを保証しているように、スケッチは、の実行を開始する前に画像をロードするためにProcessing.jsを伝えます。the Processing.js referenceから

：

この指令は、スケッチにloadImage（）またはrequestImage（）を使用する場合に必要とされる画像のプリロードを調節します。このディレクティブを使用すると、引用符で囲まれたすべてのイメージがプリロードされ、複数のイメージが使用されている場合はコンマで区切られているため、スケッチの実行が開始されたときに使用できる状態になります。 AJAXのアプローチでリソースがロードされるので、このディレクティブを使用しないとスケッチに画像がロードされ、ブラウザがダウンロードしてキャッシュしなくてもすぐに何らかの方法でこの画像を使用しようとします。