Using variable font inside WEBGL canvas, p5 js

Question

I have a WEBGL canvas in which I am loading a 3d model. I also have a text in variable font which I create with createP. The problem is that I need the text to be between the background and the 3d model. But I can only have the text in front of the canvas (on top of 3d model). Is there any way I can achieve this?

Ps. Creating the text with text() does not allow me to have variable weight value.

let kalameh;
var cnv;
let img;

function preload(){
    img = loadImage('assets/lines.png');
    kalameh = loadModel('kalameh.obj');  
}

function setup() {
    cnv = createCanvas(700, 700, WEBGL);
    var x = (windowWidth - width) / 2;
    var y = (windowHeight - height) / 2;
    cnv.position(x, y);

    wordA = createP('my text');
}

function draw() {
    background(220, 220, 220);

    wordA.style('font-size', '110px');
    wordA.style('font-weight', '200');
    wordA.style('font-stretch', '200%');
    wordA.style('align', 'center');
    wordA.position(40,25);

    image(img, -1*windowWidth/2, -1*windowHeight/2, windowWidth, windowHeight);

    translate (0,0,100);

    pointLight(255,255,255, -350,0,400);
    pointLight(255,255,255, 350,0,400);


    ambientMaterial(255);
    noStroke();


    scale (0.25);
    model(kalameh);

}

user_11785456 · Answer

You could create two sketches (and thus two canvases) and assign z-index properties of -1 and 1 to make them foreground and background sketches, respectively. You can then sandwich the paragraph element that you created between the two canvases by giving it a z-index of 0. You can then make the foreground sketch transparent by calling clear() at the beginning of the draw loop.

In the code snippet below, the 3D object is in front of the text paragraph, whereas the white square of the "background" is behind the text.

let testP;

new p5(function(p){
 
    p.setup = function() {
      const foregroundCanvas = p.createCanvas(400, 400, p.WEBGL);
      foregroundCanvas.id("foregroundSketch");
      foregroundCanvas.position(0, 0);
      p.normalMaterial();
      
      testP = p.createP("In front of background / behind object ")
      testP.position(95, 115);
      testP.id("sandwichedParagraph")
      p.angleMode(p.RADIANS)
    }
 
    p.draw = function() {
        p.clear();
        //drag to move the world.
        // p.orbitControl();
        p.push();
        let rotateAngle = p.sin(p.frameCount/50);
        p.rotateX(rotateAngle/2);
        p.rotateY(-rotateAngle);
        p.rotateZ(rotateAngle);
        p.box(200, 100, 40);
        p.pop();
    }
}, "foregroundSketch");



new p5(function(p){
 
    p.setup = function() {
      const backgroundCanvas = p.createCanvas(400, 400);
      // backgroundCanvas.parent("wrapper")
      backgroundCanvas.position(0, 0);
      backgroundCanvas.id("backgroundSketch")
      
      p.noStroke();
    }
    p.draw = function() {
        p.background(200);
        let shiftAmount = p.map(p.sin(p.frameCount/60), -1, 1, 80, 310);
        p.rect(shiftAmount, 120, 40, 40);
    }
}, "backgroundSketch");

html, body {
  margin: 0;
  padding: 0;
}

/* The sketch with the white square has z-index of -1 (background!) */
#backgroundSketch {
  z-index: -1;
  position: absolute;
}

/* The  has z-index of 0 (sandwiched between both sketches)*/
#sandwichedParagraph {
  z-index: 0;
  position: absolute;
}

/* The sketch with the object has z-index of 1 (foreground!)*/
#foregroundSketch {
  z-index: 1;
  position: absolute;
}

Using variable font inside WEBGL canvas, p5 js

1 Answers