let customFont;

​

function preload(){

  customFont=loadFont('./Roboto-Bold.ttf');

}

​

function setup() {

  createCanvas(600, 400);

  textSize(16);

  createButton('2D').mousePressed(() => {

    mode = '2D';

    redraw();

  });

  createButton('3D').mousePressed(() => {

    mode = '3D';

    redraw();

  });

  noLoop(); // We don't need to continuously draw for this test

}

​

function draw() {

  if (mode === '2D') {

    draw2D();

  } else if (mode === '3D') {

    draw3D();

  }

}

​

function draw2D() {

  background(200);

​

  // Define some 2D world positions

  let worldPositions = [

    createVector(100, 100),

    createVector(200, 150),

    createVector(300, 300),

    createVector(400, 50)

  ];

​

  fill(0);

  for (let pos of worldPositions) {

    let screenPos = worldToScreen(pos);

    ellipse(screenPos.x, screenPos.y, 10, 10);

    text(`(${screenPos.x.toFixed(1)}, ${screenPos.y.toFixed(1)})`, screenPos.x + 10, screenPos.y);

  }

}

​

function draw3D() {

  createCanvas(600, 400, WEBGL);

  textFont(customFont);

  background(200);

  orbitControl();

  lights();

​

  // Define some 3D world positions

  let worldPositions = [

    createVector(0, 0, 0),

    createVector(100, 100, -200),

    createVector(-100, -100, 200),

    createVector(50, -50, -50)

  ];

​

  fill(255, 0, 0);

  for (let pos of worldPositions) {

    let screenPos = worldToScreen(pos);

    ellipse(screenPos.x - width / 2, screenPos.y - height / 2, 10, 10);

    push();

    translate(screenPos.x - width / 2, screenPos.y - height / 2);

    text(`(${screenPos.x.toFixed(1)}, ${screenPos.y.toFixed(1)}, ${screenPos.z.toFixed(1)})`, 10, 0);

    pop();

  }

}

​