p5.jsのスケッチの上にテキストを配置

Question

私はp5.jsライブラリを使用して最初のウェブサイトを作成しようとしています。最終目標はオンラインデジタルポートフォリオです。私は現在、スプラッシュ画面に取り組んでいます。そこには、スクリーンの中央に黒い背景で塗りつぶした大きなタイトルテキストがあり、ウィンドウを埋めるようにアクティブにサイズを変更しています。

私はいくつかの興味を追加するためにバックグラウンドで単純な落書きを配置したいと思います。私の挑戦は、私のテキストの上に描くこの落書きが、私のテキストの下に置くのが好きではないということです。当初はテキストを無限に再描画することを考えていましたが、その上に何かを残しながらこれを行う方法はないと推測しました。

HTMLスケッチの背景を透明にし、別のスケッチをdoodleで作成し、CSSのzインデックスプロパティを使用してタイトルの下に落書きを配置することを考えていましたが、これも可能ですか？

ありがとうございます！勧告に基づい

さらに編集：

function preload() { 
    myFont = loadFont('assets/HighTide.otf'); 
} 

function setup() { 
    canvas = createCanvas(window.innerWidth, window.innerHeight); 
    title = text("Welcome", width/2, height/2); 
    background(30); 
    fsize = window.innerHeight/4; 
    pg = createGraphics(window.innerWidth, window.innerHeight); 
} 

function draw() { 
    background(30); 

    pg.fill(random(0,255), random(0,255), random(0,255)); 
    //pg.translate(width/2, height/2); 
    pg.ellipse(random(window.innerWidth), random(window.innerHeight), 60, 60) 

    image(pg, 0, 0); 

    textFont(myFont); 
    textSize(fsize); 
    textAlign(CENTER); 
    fill(255); 
    text("Welcome", width/2, height/2); 
    } 

window.onresize = function() { 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    canvas.size(w,h); 
    fsize = window.innerHeight/4; 
    title.textSize(fsize); 
    width = w; 
    height = h; 
} 

Answer 1

それはあなたがすべてを描画している正確にどのように依存していますが、すべてのP5.jsでこれをやっているならば、あなたはすでにあなたが必要な正確に何を説明してきましたする。

ステップ1：各フレームは、background()関数を呼び出して古いフレームを消去します。

ステップ2：次に、あなたのドールを描きます。

ステップ3：最後に、テキストを描画します。あなたが落書きの後にテキストを描画するので、それは落書きの「上」に表示されます。

ほとんどのP5.jsスケッチがどのように動作するのですか：すべてのフレームで、古いフレームをクリアしてから次のフレームを描画します。

編集：あなたは、古いフレームをクリアするが、それでも2つの異なる層（あなたの落書きやテキスト）を示していないスケッチが必要な場合はは、その後、あなたは何ができるかを描き、その後、バッファにあなたの落書きを描いています各フレームをバッファリングし、バッファの上にテキストを描画します。の機能をご覧ください。the reference