Platzieren von Text über einer Skizze in p5.js

Question

Ich versuche meine erste Website mit der Bibliothek p5.js zu erstellen, mit dem Ziel, ein digitales Online-Portfolio zu erstellen. Ich arbeite gerade an einem Begrüßungsbildschirm, in dem ich einen großen Titeltext habe, der die Mitte des Bildschirms auf einem einfachen schwarzen Hintergrund füllt, der die Größe des Fensters aktiv verändert.

Ich möchte ein einfaches Doodle im Hintergrund platzieren, um etwas Interesse hinzuzufügen. Meine Herausforderung ist, dass ich nicht möchte, dass dieses Gekritzel auf meinen Text zeichnet, sondern es unter meinen Text stellt. Anfangs dachte ich darüber nach, den Text unendlich neu zu zeichnen, so dass er oben bleibt, aber ich habe daraus abgeleitet, dass es keinen Weg gibt, dies zu tun, während er immer noch etwas darunter animiert.

Mein Wissen über HTML/CSS ist minimal, aber ich habe daran gedacht, den Hintergrund der Titelskizze transparent zu machen, eine separate Skizze mit dem Doodle und benutze die z index -Eigenschaft in CSS, um das Doodle unter dem Titel zu platzieren, ist das überhaupt möglich?

Danke!

Weitere Änderungen auf Empfehlungen basieren:

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

Es genau hängt davon ab, wie Sie alles, was ich zeichnen, aber wenn man das alles in P5.js tut dann hast du schon genau beschrieben, was Sie brauchen machen.

Schritt 1: Jeder Rahmen, löschen Sie alte Rahmen durch den Aufruf der background() Funktion.

Schritt 2: Zeichnen Sie dann Ihr Doodle.

Schritt 3: Schließlich, zeichnen Sie Ihren Text. Da du den Text nach dem Doodle zeichnest, taucht er oben auf dem Doodle auf.

So funktionieren die meisten P5.js-Skizzen: Bei jedem Bild löschen Sie die alten Bilder und zeichnen dann das nächste Bild.

Bearbeiten: Wenn Sie eine Skizze benötigen, die alte Frames nicht löscht, aber immer noch zwei verschiedene Ebenen (Ihre Doodle und Ihren Text) zeigt, dann können Sie Ihr Doodle in einen Puffer zeichnen und dann zeichnen Puffern Sie jeden Frame und zeichnen Sie den Text über den Puffer. Überprüfen Sie die createGraphics() Funktion in the reference.