Importing SVG to p5.js sketch

p5.js Beginners
11

As I wrote before, WebGL isn’t really my thing. Someone more knowledgeable in the subject should take a swing at this. But maybe there’s a different way to attack the problem? Keep the depth test enabled, replace the SVG with a photo of your choice and add it as texture to a circle (not a rectangle). Doing the above, I got this result:

A circular photograph and other shapes in 3D space.
A circular photograph and other shapes in 3D space.1248×1112 225 KB

By making the following changes to your code.

function preload() {
  //img = loadImage('Artboard 1.svg');
  img = loadImage('https://picsum.photos/800/800');
  img2 = loadImage('Dana_2.png');
  img3 = loadImage('Dana_3.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  // rectMode(CENTER);
  imageMode(CENTER);
  noStroke();
  img.resize(400, 0);

  //drawingContext.disable(drawingContext.DEPTH_TEST);
}

function draw() {
  // [...] code not shown for brevity.

  texture(img);

  //rect(0, 0, 400, 400);
  circle(200, 200, 400, 400);
  
  // [...] rest of function hidden for brevity.
}