​

let fonts = [];

let xOffset = 0, yOffset = 0;      // compensate for different origin point of 2D and 3D canvas

​

function preload() {

​

   fonts[1] = loadFont("AvenirNextLTPro-Demi.otf");

   fonts[2] = loadFont("Times-new-roman.ttf");

   fontMax = 2;

}

​

function setup() {

​

   let type;

   if(mode === "2D") type = P2D; else type = WEBGL;

   createCanvas(800, 600, type);

   if(type === WEBGL) xOffset = -window.width / 2, yOffset = -window.height / 2;

   if(type === WEBGL) mode = "3D";

​

}

​

function draw() {

​

   prt("frame", frameCount);

   let xPos, yPos, txt;

​

   background("PeachPuff");     // http://www.colors.commutercreative.com/grid/

​

   for(f = 0; f <= fontMax; f++) {

​

      if(f > 0) textFont(fonts[f]);   // font "0" will be the p5.js default font, 

                                      // apparently the browser default sans-serif font

      fill(0);

​

      for(s = 1; s <= 8; s++) {

         textSize(s * 8);

         // prt("f, s", f, s);

         xPos = xOffset + 10 + f * 250;

         yPos =  yOffset + s * 8 * s**0.7;   // slowly increasing y

         text("text 123", xPos, yPos);    

      }

      textSize(24);

      if(f === 0) txt = "default";

      if(f === 1) txt = "Avenir";

      if(f === 2) txt = "Times";

      text(txt, xPos, yPos + 40);

      text(mode, xPos, yPos + 65);

   }

​

   noLoop();

}

​

​

function prt(...args) {

   console.log(...args);

}

​

​

​