p5.jsのbackground（）関数をオーバーライドしていますか？

Question

p5.jsで回転とラジアンを使用して銀河スケッチを作成しましたが、draw（）が実行されるときにbackground（）が読み込まれるたびに消去されます。 background（）関数をオーバーライドする方法はありますか？私は銀河系を見守って欲しい。

var stars; 

function preload(){ 
//for (var i = 0; i < planetArray.length; i++) { 
//stars = loadImage('Assets/stars.png'); 
} 

function setup(){ 
    createCanvas(windowWidth, windowHeight); 

} 
function draw() { 
    //background(0); 
    star() 
    //function mousepressed(){ 
} 
    function star(){ 
    //angle = map(mouseX, 0,width, 0,360); 
    //rotate(radians(angle*100)); 
    noStroke(); 
    //translate(width/2, height/2); 
    translate(mouseX,mouseY); 
    fill(0); 
    rotate(radians(frameCount%360)); //rotates output of ellipses 
    rotate(radians(1000*frameCount%360)); 
    for(var i =0; i < 20; i++){ 
    push(); 
    noStroke(); 
    fill(random(200),0,random(150),random(2)); 
    // fill(random(125),random(250),random(100)); 
    ellipse(10*frameCount % (width/10),0,10,10); 
    //image(stars, 10*frameCount % (width/2),0,10,10) 
    //image((10*frameCount % (width/2),0,10,10) 
    // 
    pop(); 
    } 
} 

Answer 1

まあ、実際にそれにどんな魔法がありません。 background()関数を呼び出すと、ウィンドウが単色（またはイメージ）で塗りつぶされ、以前に描画したものが描画されます。

この問題の解決策は、background()機能を「オーバーライド」することではありません。それはあなたのものが適切に描かれるようにあなたのプログラムを再構成することです。正確にどのようにそれを行うかは、あなたが何をしたいのかによって決まります。

オプション1：background()関数を1回呼び出すだけです。

最初に黒い背景がほしいだけで、draw()機能からやっていることがすべて追加されている場合は、background()関数を1回呼び出すだけでよいでしょう。たとえば、setup()関数の最後の行とすることができます。

オプション2：データ構造に描画したいものすべてを保存します。

これはおそらく最も一般的なケースです。移動している図形の背後に背景を描画したい場合は、そのような図形を何らかの種類のデータ構造体に格納し、すべてのフレームをすべて1つのフレームに描画する必要があります。

オプション3：オフスクリーンイメージに描画し、そのイメージを背景の上に描画します。

これは最初の2つのオプションの組み合わせです。オフスクリーンの背景（背景を除く）をすべてオフスクリーンPImageに描画し、背景を画面に描画してから、画面に描画することができます。これにより、他のすべてのものを再描画せずに、色を変更する背景を持つことができます。

どのオプションを選択するかは、実際に何をしたいかによって決まります。