JavaScriptのProcessingのloadImageを使用する

Question

Processing APIを使用して、後でコードで使用できるHTMLキャンバスに画像を描画しています。私が持っているJavaScriptコードは次のとおりです。

var sketchProc = function(processingInstance) { 
    with (processingInstance) { 

    /* @pjs preload="images/hot-air.png" */ 

    size(innerWidth, innerHeight); 
    var testImage = loadImage("images/hot-air.png"); 

    draw = function() { 
     image(testImage, 0, 0, 500, 500); 
    } 
    } 
} 

var canvas = document.getElementById("canvas"); 
var processingInstance = new Processing(canvas, sketchProc); 

コンソールには、画像のサイズが0x0であると表示されます。私はProcessing's directivesでロードしようとしましたが、まだイメージのサイズが0x0になっています。しかし、描画ループ内にloadImage()と呼ぶと、プログラムは画像のサイズを512x512と認識します。

ドローループ内でloadImage()を継続的に呼び出すことは望ましくありません。描画ループの外側で画像が正しく読み込まれるようにするにはどうすればよいですか？

最小の使用例hereがあります。

Answer 1

最初に、MCVEをお送りいただきありがとうございます。

JavaScript-only Processing.js codeを書いているときに何らかの理由でプリロード命令が、そしておそらくloadImage()関数自体が機能しないと、私は考えています。私はProcessing.jsのさまざまなエディタとバージョンでこれをテストしました。

したがって、loadImage()関数を使用すると、pure Processing codeを使用する必要があります。 Hereは、あなたがそれを行うだろう方法を示してCodePenです：

<script type="application/processing"> 
    /* @pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */ 
    PImage testImage; 

    void setup(){ 
     size(500, 500); 
     testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"); 
     println(testImage.height); 
    } 

    void draw() { 
     background(100); 
     image(testImage, 0, 0, 250, 250); 
    } 
</script> 
<canvas> </canvas> 

ただ、比較のために、hereではJavaScriptのみの構文を使用して同じコードです。これは機能しません。

しかし、一歩前進してください：JavaScriptを使いたい場合は、なぜProcessing.jsを使用していますか？ Processing.jsは、自動的にJavaScriptに変換されたJava構文を記述したいProcessing（Java）開発者向けに設計されています。この時点でProcessing.jsはかなり古く、もはや維持されていません。

代わりにP5.jsを使用することをおすすめします。 P5.jsでは、JavaScript構文を記述してWeb最初の処理スケッチを作成することができます。 P5.jsははるかに新しいものであり、依然として積極的に開発されています。ここで

はP5.jsで同じコードです：

var testImage; 

function preload(){ 
    testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"); 
} 

function setup() { 
    createCanvas(400, 400); 
} 

function draw() { 
    background(100); 
    image(testImage, 0, 0, 250, 250); 
} 

恥知らずな自己宣伝：私は処理、Processing.js、およびhere利用可能P5.jsの違いについてのチュートリアルを書きました。