Support for 3D coordinate on Image

src/core/p5.Renderer2D.js

@@ -241,7 +241,8 @@ class Renderer2D extends p5.Renderer {
     dx,
     dy,
     dWidth,
-    dHeight
+    dHeight,
+    dz
   ) {
     let cnv;
     if (img.gifProperties) {

src/image/loading_displaying.js

@@ -1070,6 +1070,108 @@ function _sAssign(sVal, iVal) {
  * }
  * </code>
  * </div>
+ * <div>
+ * <code>
+ * let img;
+ *
+ * function preload() {
+ *   img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ *   // Create a 3D canvas
+ *   background(200);
+ *   createCanvas(400, 400, WEBGL);
+ * }
+ * function draw() {
+ *   image(img, 0, 0, -100);
+ *   describe('An image at the center 100 units away from the camera');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * let img;
+ * function preload() {
+ *   img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ *   // Create a 3D canvas
+ *   createCanvas(400, 400, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   image(img, 0, 0, 400 , 300 , 300);
+ *   describe('Scale image 300 by 300 and zoomin 400 units');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * let img;
+ * function preload() {
+ *   img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ *   // Create a 3D canvas
+ *   createCanvas(400, 400, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   image(img, 0, 0, -400 , 300 , 300);
+ *   describe('Scale image 300 by 300 and zoomout 400 units');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * let img;
+ * function preload() {
+ *   img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ *   // Create a 3D canvas
+ *   createCanvas(400, 400, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   image(img, 0, 0, 0, 400, 400,500, 100, 200, 200);
+ *   describe('Draw a subsection of the image from 500 by 100 units position at the center with size 400x400');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * let img;
+ * function preload() {
+ *   img = loadImage('assets/moonwalk.jpg');
+ * }
+ *
+ * function setup() {
+ *   // Create a 3D canvas
+ *   createCanvas(400, 400, WEBGL);
+ * }
+ *
+ * function draw() {
+ *   background(200);
+ *   image(img, 0, 0, -200, 400, 400,500, 100, 200, 200);
+ *   describe('Draw a subsection of the image from 500 by 100 units position at the center with size 400x400 and zoomedout by 200 units');
+ * }
+ *
+ * </code>
+ * </div>
+ *
+ *
  */
 /**
  * @method image
@@ -1097,6 +1199,7 @@ p5.prototype.image = function(
   img,
   dx,
   dy,
+  dz,
   dWidth,
   dHeight,
   sx,
@@ -1110,7 +1213,20 @@ p5.prototype.image = function(
   // set defaults per spec: https://goo.gl/3ykfOq
 
   p5._validateParameters('image', arguments);
-
+  // If dz is not specified.
+  if (arguments.length % 2 === 1 ||  typeof arguments[9]  === 'string'){
+    // From the 3rd arguement shift the assingment one position to the right.
+    yAlign = xAlign;
+    xAlign = fit;
+    fit = sHeight;
+    sHeight = sWidth;
+    sWidth = sy;
+    sy = sx;
+    sx = dHeight;
+    dHeight = dWidth;
+    dWidth = dz;
+    dz = 0;
+  }
   let defW = img.width;
   let defH = img.height;
   yAlign = yAlign || constants.CENTER;
@@ -1185,7 +1301,8 @@ p5.prototype.image = function(
     vals.dx,
     vals.dy,
     vals.dw,
-    vals.dh
+    vals.dh,
+    dz
   );
 };
 

src/webgl/3d_primitives.js

@@ -3400,47 +3400,50 @@ p5.RendererGL.prototype.image = function(
   dx,
   dy,
   dWidth,
-  dHeight
+  dHeight,
+  dz
 ) {
   if (this._isErasing) {
     this.blendMode(this._cachedBlendMode);
   }
-
+  /*
+  // check for P5 Graphics instance
+  let isP5G = img instanceof p5.Graphics ? true : false;
+  // check for P5 Framebuffer instance
+  let isP5Fbo = img instanceof p5.Framebuffer ? true : false;
+
+  const viewport = this.GL.getParameter(this.GL.VIEWPORT);
+  const width = viewport[2];
+  const height = viewport[3];
+
+  if (!isP5G && !isP5Fbo){
+    dx = (-width / 2) + dx;
+    dy = (-height / 2) + dy;
+  }
+  */
   this._pInst.push();
-
   this._pInst.noLights();
   this._pInst.noStroke();
-
   this._pInst.texture(img);
   this._pInst.textureMode(constants.NORMAL);
 
-  let u0 = 0;
-  if (sx <= img.width) {
-    u0 = sx / img.width;
-  }
-
-  let u1 = 1;
-  if (sx + sWidth <= img.width) {
-    u1 = (sx + sWidth) / img.width;
-  }
-
-  let v0 = 0;
-  if (sy <= img.height) {
-    v0 = sy / img.height;
-  }
-
-  let v1 = 1;
-  if (sy + sHeight <= img.height) {
-    v1 = (sy + sHeight) / img.height;
-  }
+  // Calculate texture coordinates for subsection
+  let u0 = sx / img.width;
+  let u1 = (sx + sWidth) / img.width;
+  let v0 = sy / img.height;
+  let v1 = (sy + sHeight) / img.height;
 
+  // Draw a textured rectangle (plane) with the texture coordinates
   this.beginShape();
-  this.vertex(dx, dy, 0, u0, v0);
-  this.vertex(dx + dWidth, dy, 0, u1, v0);
-  this.vertex(dx + dWidth, dy + dHeight, 0, u1, v1);
-  this.vertex(dx, dy + dHeight, 0, u0, v1);
+  // Top-left corner
+  this.vertex(dx, dy, dz, u0, v0);
+  // Top-right corner
+  this.vertex(dx + dWidth, dy, dz, u1, v0);
+  // Bottom-right corner
+  this.vertex(dx + dWidth, dy + dHeight, dz, u1, u1);
+  // Bottom-left corner
+  this.vertex(dx, dy + dHeight, dz, u0, v1);
   this.endShape(constants.CLOSE);
-
   this._pInst.pop();
 
   if (this._isErasing) {