Support for 3D coordinate on Image

[Forchapeatl]

trafficstars

Resolves #5861

Changes:

Screenshots of the change:

PR Checklist

• [x] npm run lint passes
• [ ] Inline documentation is included / updated
• [ ] Unit tests are included / updated

Example code

let img;

function preload() {
  img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/June_odd-eyed-cat_cropped.jpg/712px-June_odd-eyed-cat_cropped.jpg'); // Load the image
}

function setup() {
  createCanvas(800, 600, WEBGL); // Create a WebGL canvas
}

function draw() {
  background(200);

  // Set up the camera
  let camX = map(mouseX, 0, width, -400, 400);
  let camY = map(mouseY, 0, height, -400, 400);
  camera(camX, camY, 500, 0, 0, 0, 0, 1, 0); // Adjust camera position based on mouse

  // Use the image function to place images in 3D space
  image(img, -500, -800,0, 675,     400, -100, -100,  200, 200);
  image(img, -800, -10,50, 675,     400, 0, 0,  200, 200);
  image(img, -800, -10,100, 675,     400, -50, 0,  200, 200);

}

[Forchapeatl]

@davepagurek , please have a look at my PR. Is it in the right direction ?

[Forchapeatl]

The 2D image() nolonger breaks, but my 3D positioning does not seem to accurate. When compared to the 2D preview, the image on the left ( 3d mode) x=100 , y = 100 , z = 0 shows an off set in the positioning.

sample code

let img;

function preload() {
  // Load the image
  img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/June_odd-eyed-cat_cropped.jpg/712px-June_odd-eyed-cat_cropped.jpg');
}

function setup() {
  createCanvas(800, 800 , WEBGL); // Create a 3D canvas
  background(200);
}

function draw() {
  background(200);
  // Second image at another position
  image(img, 100, 100,0); // x, y, z coordinates
}

Every thing seems fine by my knowledge. Please for a hint as to why this problem occurs. https://github.com/Forchapeatl/p5.js/blob/7942b7328d65b0094f9bb372d613375c21123a7d/src/webgl/p5.RendererGL.js#L2395#L2411

[davepagurek]

Just to confirm, do you normalize the starting coordinate between WebGL and 2D modes, e.g. by doing translate(-width/2, -height/2) in WebGL mode so that they start at the same coordinate?

[Forchapeatl]

Thank you Dave . For 3D mode , It is better to draw texture with vertex rather than plane because when we try to translate the plane. the size of the webgl canvas and plane are considered hence an accurate view of the positions will depend on the perspective.

let img;

function preload() {
  img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/June_odd-eyed-cat_cropped.jpg/712px-June_odd-eyed-cat_cropped.jpg');
}

function setup() {
  createCanvas(800, 800, WEBGL);  // Create a 3D canvas
  background(200);
}

function draw() {
  background(200);
  image(img, 100, 100, 0);
}

[Forchapeatl]

But when I introduce dz parameter I seem to be failing some test. How can I introuce the dz param here

https://github.com/processing/p5.js/blob/ca19e53b4b7dfddb8a6976fc3e489bad2fae5c6a/src/image/loading_displaying.js#L1183#L1184

[Forchapeatl]

This is the cause of the error 'JSDOC'

Please for a hint.

[davepagurek]

The parameter checking is done based on the documentated parameter types, and by the looks of it, currently we've added dz in a way that is non optional. I think the way to fix that would be to provide second versions of the parameter overloads: the original without dz, and a new copy with dz.

[Forchapeatl]

@sproutleaf , sorry to bother you . Could you give me some hints or direction, I realize that when I add one more parameter (dz) to a function , I am caught with a friendly error message and failed tests. Please could you help me with a few hints on how to address this.

[perminder-17]

Hi @Forchapeatl ,

I apologize for the delayed response. The maintainers have been very busy with the version update to 2.0. I can help you figure out what's going on.

It's looking great so far! Do you mind sharing the sketch where you get friendly errors?

thanks for your work on this:)