クリックしたスケッチで他のオブジェクトが静的に動いている間にオブジェクトを移動する

Question

マウスをクリックするとアニメーションを作成しようとしています。クリックして個別のオブジェクトを追加するのは簡単です。私が望むシーケンスは以下の通りです： 最初に描画されたオブジェクト（a）。 最初にマウスをクリックするとオブジェクトが追加されます（b）。 2回目のマウスクリックでオブジェクトが追加されます（c）。 マウスを3回クリックすると、オブジェクト（c）が画面を横切って移動して消えます。

シーケンスの最後に問題があります。オブジェクトを動かす方法とスケッチの静的部分を維持する方法を理解することはできません。通常の動きの方法は、draw（）関数を使って各ループでオブジェクトの座標を変更し、背景を使用して以前のオブジェクトを隠すことです。この場合は、オブジェクト（a）とオブジェクト（b）を永続化する必要があるため、これを行うことはできません。

以下のコード。ご協力いただきありがとうございます！

var count = 0; 

function setup() { 
    createCanvas(200, 200); 
    a = new Object1(20, 40); 
    b = new Object1(20, 85); 
    c = new Object1(20, 130); 

} 

function draw() { 
    background(200); 
    a.display(); 
    if (count == 1) { 
     b.display(); 
    } 
    if (count == 2) { 
     b.display(); 
     c.display(); 
    } 
    if (count == 3) { //this is where I have a problem 

    } 
    if (count > 3) { 
     count = 0; 
    } 

} 

function Object1(ix, iy, itext) { 
    this.x = ix; 
    this.y = iy; 
    this.text = itext; 

    this.display = function() { 
     fill(160); 
     rect(this.x, this.y, 40, 40); 
    } 
} 

function mousePressed() { 
    count++; 
} 

Answer 1

一般的にこれを行うだろうどのようにcreateGraphics()機能を使用して作成することができますオフスクリーンバッファのために、シーンの静的な部分を描くことです。 the referenceから：

var pg; 
function setup() { 
    createCanvas(100, 100); 
    pg = createGraphics(100, 100); 
} 
function draw() { 
    background(200); 
    pg.background(100); 
    pg.noStroke(); 
    pg.ellipse(pg.width/2, pg.height/2, 50, 50); 
    image(pg, 50, 50); 
    image(pg, 0, 0, 50, 50); 
} 

あなたはそれの上に各フレームを動的なものを描き、その後、画面にバッファを描く、バッファへの静的な部分を描きたいです。

これは前に説明したので、「pgraphicsの処理」や「p5.jsバッファ」などの情報を検索することをお勧めします。