キャンバスの代わりにp5.Imageに描画

Question

テンプレートとしてロードされたpngイメージを与えられた場合、ユーザーがイメージの要素をトレースできるようにしたいとします。 P5では、これは簡単です：

setup() { 
    // Load image 
    var img = loadImage('...'); 
    image(img, 0, 0); 
} 

draw() { 
    ellipse(mouseX, mouseY, 2, 2); 
} 

しかし、私はその後、（下にある画像なし）のみ楕円を保存できるようにしたいです。 Imageにキャンバスに直接書き込むのではなく、元の画像を取り込まずにトレースのピクセルを持ち上げる方法がありますか？

私の現在の計画は、のいずれかです。

• オーバーレイ二P5インスタンス、および画像の上に重ね透明キャンバスに描く...しかし、これは維持することが困難と思われる、とDOMがあることから被る可能性完璧なアライメントから外す
• ellipseの代わりに、createImage生成ピクセル配列に書き込んでください...これは遅くて不愉快なようです。

注意：画像はp5.Imageであるため、<img>の上に重ねるだけでは十分ではありません。

Answer 1

createGraphics()関数を使用して、p5.Rendererのインスタンスを作成できます。 p5.Rendererに描画し、イメージの上にオーバーレイすることができます。その後、p5.Rendererのピクセル配列にアクセスして、イメージではなくオーバーレイを取得することができます。詳細情報はthe referenceで見つけることができます

var img; 
 
    var pg; 
 
    
 
    function preload() { 
 
     img = loadImage("https://www.gravatar.com/avatar/06ce4c0f7ee07cf79c81ac6602f5d502?s=32&d=identicon&r=PG"); 
 
    } 
 
    
 
    function setup(){ 
 
     createCanvas(300, 600); 
 
     pg = createGraphics(300, 300); 
 
    } 
 
    
 
    function mousePressed(){ 
 
     pg.fill(255, 0, 0); 
 
     pg.ellipse(mouseX, mouseY, 20, 20); 
 
    } 
 
    
 
    function draw() { 
 
     image(img, 0, 0, 300, 300); 
 
     image(pg, 0, 0); 
 
     image(pg, 0, 300); 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script> 
 
Click in the image to draw to the buffer below it! (View as full page to see the buffer.)

：ここ

は一例です。

ところでp5.jsタグがあります。