From 4326a022dcad5c958a9bdca52ce9ef0a6d1859b1 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Wed, 14 Aug 2024 08:05:54 +0100 Subject: [PATCH 01/26] Support for 3D coordinate on Image --- src/image/loading_displaying.js | 42 +++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index c0ce679117..83fabeff63 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1097,6 +1097,7 @@ p5.prototype.image = function( img, dx, dy, + dz, dWidth, dHeight, sx, @@ -1175,18 +1176,35 @@ p5.prototype.image = function( _sh ); - // tint the image if there is a tint - this._renderer.image( - img, - vals.sx, - vals.sy, - vals.sw, - vals.sh, - vals.dx, - vals.dy, - vals.dw, - vals.dh - ); + //if it is a WEGL instance default use 3D rendering + if (this._renderer instanceof p5.RendererGL) { + this._renderer.image3D( + img, + vals.sx, + vals.sy, + dz, + vals.sw, + vals.sh, + vals.dx, + vals.dy, + vals.dw, + vals.dh + ); + }else { + // tint the image if there is a tint + // Default 2D rendering + this._renderer.image( + img, + vals.sx, + vals.sy, + vals.sw, + vals.sh, + vals.dx, + vals.dy, + vals.dw, + vals.dh + ); + } }; /** From 97efe532247420c8596b07fe2aa25a9d98815444 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Wed, 14 Aug 2024 16:44:29 +0100 Subject: [PATCH 02/26] Added function to support 3D image coordinates and texture --- src/webgl/p5.RendererGL.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 9915e4c023..0b3bf9192e 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -2391,6 +2391,24 @@ p5.RendererGL = class RendererGL extends p5.Renderer { return triangleVerts; } + + image3D(img,sx,sy,sz,sWidth,sHeight,dx,dy,dWidth,dHeight) { + if (this._isErasing) { + this.blendMode(this._cachedBlendMode); + } + + this._pInst.push(); + this._pInst.translate(sx, sy, sz); + this._pInst.texture(img); + this._pInst.noStroke(); + this._pInst.plane(sWidth, sHeight); + this._pInst.pop(); + + if (this._isErasing) { + this.blendMode(constants.REMOVE); + } + } + }; /** * ensures that p5 is using a 3d renderer. throws an error if not. From c2d614211c189f6ef109f832c442da1b210d0991 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Fri, 16 Aug 2024 20:37:02 +0100 Subject: [PATCH 03/26] fixed 2D breakage --- src/image/loading_displaying.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 83fabeff63..e0ca62d47a 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1112,6 +1112,19 @@ p5.prototype.image = function( p5._validateParameters('image', arguments); + if(this._renderer instanceof p5.RendererGL === false){ + // 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; + } + let defW = img.width; let defH = img.height; yAlign = yAlign || constants.CENTER; From 168e0e36af9f5e22c80cb21a81eda8d08ef00aec Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Fri, 16 Aug 2024 20:41:21 +0100 Subject: [PATCH 04/26] commit changes --- src/image/loading_displaying.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index e0ca62d47a..1f6c4e84a2 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1124,7 +1124,7 @@ p5.prototype.image = function( dHeight = dWidth; dWidth = dz; } - + let defW = img.width; let defH = img.height; yAlign = yAlign || constants.CENTER; From aab2120a02946452aa5911fd0b6ac3bb8e37715a Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 19 Aug 2024 08:30:22 +0100 Subject: [PATCH 05/26] catch framebuffer or graphic instance --- src/image/loading_displaying.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 1f6c4e84a2..6e27ca5456 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1111,6 +1111,10 @@ p5.prototype.image = function( // set defaults per spec: https://goo.gl/3ykfOq p5._validateParameters('image', arguments); + // 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; if(this._renderer instanceof p5.RendererGL === false){ // From the 3rd arguement shift the assingment one position to the right @@ -1189,8 +1193,9 @@ p5.prototype.image = function( _sh ); - //if it is a WEGL instance default use 3D rendering - if (this._renderer instanceof p5.RendererGL) { + //if it is not graphics nor framebuffer but WEGL instance + //default to use 3D rendering + if (this._renderer instanceof p5.RendererGL && !isP5G && !isP5Fbo) { this._renderer.image3D( img, vals.sx, From 7942b7328d65b0094f9bb372d613375c21123a7d Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Tue, 20 Aug 2024 15:37:46 +0100 Subject: [PATCH 06/26] added scalling --- src/webgl/p5.RendererGL.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 0b3bf9192e..ed9b1a6a61 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -2398,7 +2398,8 @@ p5.RendererGL = class RendererGL extends p5.Renderer { } this._pInst.push(); - this._pInst.translate(sx, sy, sz); + this._pInst.translate(dx, dy, sz); + this._pInst.scale(dWidth / sWidth, dHeight / sHeight); this._pInst.texture(img); this._pInst.noStroke(); this._pInst.plane(sWidth, sHeight); From 2a808793fe87dc9b548696722ec8f5b130ee1a21 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Thu, 22 Aug 2024 06:58:00 +0100 Subject: [PATCH 07/26] using vertex for texture mapping instead of plane --- src/webgl/p5.RendererGL.js | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index ed9b1a6a61..732dd60abe 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -2393,16 +2393,35 @@ p5.RendererGL = class RendererGL extends p5.Renderer { } image3D(img,sx,sy,sz,sWidth,sHeight,dx,dy,dWidth,dHeight) { - if (this._isErasing) { - this.blendMode(this._cachedBlendMode); - } - + const viewport = this.GL.getParameter(this.GL.VIEWPORT); + const width = viewport[2]; + const height = viewport[3]; + dx = (-width / 2) + dx; + dy = (-height / 2) + dy; this._pInst.push(); - this._pInst.translate(dx, dy, sz); - this._pInst.scale(dWidth / sWidth, dHeight / sHeight); - this._pInst.texture(img); + this._pInst.noLights(); this._pInst.noStroke(); - this._pInst.plane(sWidth, sHeight); + this._pInst.texture(img); + this._pInst.textureMode(constants.NORMAL); + + // 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(); + // Top-left corner + this.vertex(dx, dy, sz, u0, v0); + // Top-right corner + this.vertex(dx + dWidth, dy, sz, u1, v0); + // Bottom-right corner + this.vertex(dx + dWidth, dy + dHeight, sz, u1, u1); + // Bottom-left corner + this.vertex(dx, dy + dHeight, sz, u0, v1); + this.endShape(constants.CLOSE); + this._pInst.pop(); if (this._isErasing) { From 96997fd7b48e8df321d108f9970b33eca152a31b Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Thu, 22 Aug 2024 06:59:25 +0100 Subject: [PATCH 08/26] defaulting to 0 in webgl context --- src/image/loading_displaying.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 6e27ca5456..348319614b 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1196,6 +1196,7 @@ p5.prototype.image = function( //if it is not graphics nor framebuffer but WEGL instance //default to use 3D rendering if (this._renderer instanceof p5.RendererGL && !isP5G && !isP5Fbo) { + if (dz === undefined){dz = 0;} this._renderer.image3D( img, vals.sx, From ca19e53b4b7dfddb8a6976fc3e489bad2fae5c6a Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Thu, 22 Aug 2024 08:05:05 +0100 Subject: [PATCH 09/26] Added examples and dz param introduction --- src/image/loading_displaying.js | 104 ++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 348319614b..f5c34c426a 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1070,6 +1070,108 @@ function _sAssign(sVal, iVal) { * } * * + * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + * + *
+ * */ /** * @method image @@ -1078,6 +1180,8 @@ function _sAssign(sVal, iVal) { * rectangle in which to draw the source image * @param {Number} dy the y-coordinate of the destination * rectangle in which to draw the source image + * @param {Number} dz the z-coordinate (depth) of the destination + * rectangle in which to draw the source image (WEBGL only) * @param {Number} dWidth the width of the destination rectangle * @param {Number} dHeight the height of the destination rectangle * @param {Number} sx the x-coordinate of the subsection of the source From 1c76a8da09960c9dedfe3bd235048c8e3e6f8d99 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Thu, 22 Aug 2024 08:20:45 +0100 Subject: [PATCH 10/26] removed examples --- src/image/loading_displaying.js | 101 -------------------------------- 1 file changed, 101 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index f5c34c426a..3a68960282 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1069,107 +1069,6 @@ function _sAssign(sVal, iVal) { * describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.'); * } * - * - * - *
- * - * 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'); - * } - * - *
- * - *
- * - * 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'); - * } - * - *
- * - *
- * - * 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'); - * } - * - *
- * - *
- * - * 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'); - * } - * - *
- * - *
- * - * 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'); - * } - * - * *
* */ From 6e31086a079b594ebd1d860eabd29a9c5962a84a Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Thu, 22 Aug 2024 08:30:22 +0100 Subject: [PATCH 11/26] removed dz param introduction --- src/image/loading_displaying.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 3a68960282..4caef09c09 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1079,8 +1079,6 @@ function _sAssign(sVal, iVal) { * rectangle in which to draw the source image * @param {Number} dy the y-coordinate of the destination * rectangle in which to draw the source image - * @param {Number} dz the z-coordinate (depth) of the destination - * rectangle in which to draw the source image (WEBGL only) * @param {Number} dWidth the width of the destination rectangle * @param {Number} dHeight the height of the destination rectangle * @param {Number} sx the x-coordinate of the subsection of the source From 247e855a381b97feab72cd3eb72eada6dfd7a9f6 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Fri, 23 Aug 2024 10:57:25 +0100 Subject: [PATCH 12/26] Added dz Param and examples --- src/image/loading_displaying.js | 103 ++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 4caef09c09..372906a399 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1070,6 +1070,107 @@ function _sAssign(sVal, iVal) { * } * * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + *
+ * + *
+ * + * 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'); + * } + * + * + *
+ * * */ /** @@ -1079,6 +1180,8 @@ function _sAssign(sVal, iVal) { * rectangle in which to draw the source image * @param {Number} dy the y-coordinate of the destination * rectangle in which to draw the source image + * @param {Number} dz the z-coordinate (depth) of the destination + * rectangle in which to draw the source image (WEBGL only) * @param {Number} dWidth the width of the destination rectangle * @param {Number} dHeight the height of the destination rectangle * @param {Number} sx the x-coordinate of the subsection of the source From 8d81b735ea6ecb198837224df7ec029aaaa2d2a4 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Fri, 23 Aug 2024 11:01:00 +0100 Subject: [PATCH 13/26] dz parameter on Contain --- test/unit/image/loading.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/image/loading.js b/test/unit/image/loading.js index 8f8d23e66d..8165b7932a 100644 --- a/test/unit/image/loading.js +++ b/test/unit/image/loading.js @@ -537,7 +537,7 @@ suite('displaying images that use fit mode', function() { test('CONTAIN when source image is larger than destination', function() { let src = myp5.createImage(400, 1000); sinon.spy(myp5._renderer, 'image'); - myp5.image(src, 0, 0, 300, 400, 0, 0, 400, 1000, myp5.CONTAIN); + myp5.image(src, 0, 0, 0, 300, 400, 0, 0, 400, 1000, myp5.CONTAIN); assert(myp5._renderer.image.calledOnce); assert.equal(myp5._renderer.image.getCall(0).args[7], 400 / (1000 / 400)); // dw assert.equal(myp5._renderer.image.getCall(0).args[8], 1000 / (1000 / 400)); // dh @@ -546,7 +546,7 @@ suite('displaying images that use fit mode', function() { test('CONTAIN when source image is smaller than destination', function() { let src = myp5.createImage(40, 90); sinon.spy(myp5._renderer, 'image'); - myp5.image(src, 0, 0, 300, 500, 0, 0, 400, 1000, myp5.CONTAIN); + myp5.image(src, 0, 0, 0, 300, 500, 0, 0, 400, 1000, myp5.CONTAIN); assert(myp5._renderer.image.calledOnce); assert.equal(myp5._renderer.image.getCall(0).args[7], 40 / (90 / 500)); // dw assert.equal(myp5._renderer.image.getCall(0).args[8], 90 / (90 / 500)); // dh From 7ae6f8b159aaac18ac6616317e17ab4e9859b0a9 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 26 Aug 2024 00:57:44 +0100 Subject: [PATCH 14/26] replaced WEBGL check with dz check --- src/image/loading_displaying.js | 56 ++++++++++----------------------- 1 file changed, 17 insertions(+), 39 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 372906a399..a49a88f4c0 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1215,13 +1215,9 @@ p5.prototype.image = function( // set defaults per spec: https://goo.gl/3ykfOq p5._validateParameters('image', arguments); - // 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; - - if(this._renderer instanceof p5.RendererGL === false){ - // From the 3rd arguement shift the assingment one position to the right + // 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; @@ -1231,8 +1227,8 @@ p5.prototype.image = function( sx = dHeight; dHeight = dWidth; dWidth = dz; + dz = 0; } - let defW = img.width; let defH = img.height; yAlign = yAlign || constants.CENTER; @@ -1297,37 +1293,19 @@ p5.prototype.image = function( _sh ); - //if it is not graphics nor framebuffer but WEGL instance - //default to use 3D rendering - if (this._renderer instanceof p5.RendererGL && !isP5G && !isP5Fbo) { - if (dz === undefined){dz = 0;} - this._renderer.image3D( - img, - vals.sx, - vals.sy, - dz, - vals.sw, - vals.sh, - vals.dx, - vals.dy, - vals.dw, - vals.dh - ); - }else { - // tint the image if there is a tint - // Default 2D rendering - this._renderer.image( - img, - vals.sx, - vals.sy, - vals.sw, - vals.sh, - vals.dx, - vals.dy, - vals.dw, - vals.dh - ); - } + // tint the image if there is a tint + this._renderer.image( + img, + vals.sx, + vals.sy, + dz, + vals.sw, + vals.sh, + vals.dx, + vals.dy, + vals.dw, + vals.dh + ); }; /** From ab328704db7266d1fc42d39521dff2fd2e3fcbef Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 26 Aug 2024 01:04:14 +0100 Subject: [PATCH 15/26] removed Image3D function --- src/webgl/p5.RendererGL.js | 38 -------------------------------------- 1 file changed, 38 deletions(-) diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 732dd60abe..9915e4c023 100644 --- a/src/webgl/p5.RendererGL.js +++ b/src/webgl/p5.RendererGL.js @@ -2391,44 +2391,6 @@ p5.RendererGL = class RendererGL extends p5.Renderer { return triangleVerts; } - - image3D(img,sx,sy,sz,sWidth,sHeight,dx,dy,dWidth,dHeight) { - const viewport = this.GL.getParameter(this.GL.VIEWPORT); - const width = viewport[2]; - const height = viewport[3]; - 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); - - // 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(); - // Top-left corner - this.vertex(dx, dy, sz, u0, v0); - // Top-right corner - this.vertex(dx + dWidth, dy, sz, u1, v0); - // Bottom-right corner - this.vertex(dx + dWidth, dy + dHeight, sz, u1, u1); - // Bottom-left corner - this.vertex(dx, dy + dHeight, sz, u0, v1); - this.endShape(constants.CLOSE); - - this._pInst.pop(); - - if (this._isErasing) { - this.blendMode(constants.REMOVE); - } - } - }; /** * ensures that p5 is using a 3d renderer. throws an error if not. From ed1796a4cf18724cfd3173befbc522e81562d1ca Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 26 Aug 2024 01:12:35 +0100 Subject: [PATCH 16/26] added support for Z coordiante --- src/webgl/3d_primitives.js | 55 ++++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 9dc5d65622..f50bcaba2b 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -3395,6 +3395,7 @@ p5.RendererGL.prototype.image = function( img, sx, sy, + dz, sWidth, sHeight, dx, @@ -3405,47 +3406,49 @@ p5.RendererGL.prototype.image = function( 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 (!isPG and !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) { this.blendMode(constants.REMOVE); } + } }; export default p5; From e764cb15bff72e2b242dc7a88287328ccd7d652e Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 26 Aug 2024 01:24:25 +0100 Subject: [PATCH 17/26] fixed syntax error --- src/webgl/3d_primitives.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index f50bcaba2b..dde23d8953 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -3415,7 +3415,7 @@ p5.RendererGL.prototype.image = function( const width = viewport[2]; const height = viewport[3]; - if (!isPG and !isP5Fbo){ + if (!isPG && !isP5Fbo){ dx = (-width / 2) + dx; dy = (-height / 2) + dy; } From 038a5adc0fcace1db111fad0a5aac6a8d38fc9b4 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 26 Aug 2024 01:26:23 +0100 Subject: [PATCH 18/26] fixed syntax error --- src/webgl/3d_primitives.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index dde23d8953..86e91702dd 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -3448,7 +3448,6 @@ p5.RendererGL.prototype.image = function( if (this._isErasing) { this.blendMode(constants.REMOVE); } - } }; export default p5; From 71027b00d544ed044dda851dfaac93cc7a1be45d Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 26 Aug 2024 01:31:13 +0100 Subject: [PATCH 19/26] fixed lint --- src/webgl/3d_primitives.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 86e91702dd..734d763ad0 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -3415,9 +3415,9 @@ p5.RendererGL.prototype.image = function( const width = viewport[2]; const height = viewport[3]; - if (!isPG && !isP5Fbo){ + if (!isP5G && !isP5Fbo){ dx = (-width / 2) + dx; - dy = (-height / 2) + dy; + dy = (-height / 2) + dy; } this._pInst.push(); From 07beef9ab5faf3208806fbf9eee4852f7b4a7f4b Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Sat, 7 Sep 2024 21:45:34 +0100 Subject: [PATCH 20/26] Added support for webgl mode --- src/core/helpers.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/helpers.js b/src/core/helpers.js index b6cfe371b2..bc1971ea63 100644 --- a/src/core/helpers.js +++ b/src/core/helpers.js @@ -5,6 +5,8 @@ import * as constants from './constants'; function modeAdjust(a, b, c, d, mode) { + const e = (-c / 2) + c; //support for webgl width + const f = (-d / 2) + d; //support for webgl height if (mode === constants.CORNER) { return { x: a, y: b, w: c, h: d }; } else if (mode === constants.CORNERS) { @@ -12,7 +14,7 @@ function modeAdjust(a, b, c, d, mode) { } else if (mode === constants.RADIUS) { return { x: a - c, y: b - d, w: 2 * c, h: 2 * d }; } else if (mode === constants.CENTER) { - return { x: a - c * 0.5, y: b - d * 0.5, w: c, h: d }; + return { x: a - e, y: b - f, w: c, h: d }; } } From 1b53827aba2739fa20a369272e16b14270403f81 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 9 Sep 2024 00:32:19 +0100 Subject: [PATCH 21/26] dz as last parameter --- src/webgl/3d_primitives.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 734d763ad0..6ad06921a0 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -3395,31 +3395,32 @@ p5.RendererGL.prototype.image = function( img, sx, sy, - dz, sWidth, sHeight, 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(); From af0b2e807619ea126e2f14bbe9be023a19ea1998 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 9 Sep 2024 00:34:28 +0100 Subject: [PATCH 22/26] dz as last parameter on imade2D --- src/image/loading_displaying.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index a49a88f4c0..1efe4bd1e3 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1180,7 +1180,7 @@ function _sAssign(sVal, iVal) { * rectangle in which to draw the source image * @param {Number} dy the y-coordinate of the destination * rectangle in which to draw the source image - * @param {Number} dz the z-coordinate (depth) of the destination + * @param {Number} [dz] the z-coordinate (depth) of the destination * rectangle in which to draw the source image (WEBGL only) * @param {Number} dWidth the width of the destination rectangle * @param {Number} dHeight the height of the destination rectangle @@ -1298,13 +1298,13 @@ p5.prototype.image = function( img, vals.sx, vals.sy, - dz, vals.sw, vals.sh, vals.dx, vals.dy, vals.dw, - vals.dh + vals.dh, + dz ); }; From 9e197856396d91fdd9c7c469d72ab854f762884b Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 9 Sep 2024 00:35:36 +0100 Subject: [PATCH 23/26] Update p5.Renderer2D.js --- src/core/p5.Renderer2D.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index e9e2195d30..48e7a01fcb 100644 --- a/src/core/p5.Renderer2D.js +++ b/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) { From 80844dc37131a9d6cac2ee8ef76c54d517040373 Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 9 Sep 2024 00:37:02 +0100 Subject: [PATCH 24/26] revert changes --- src/core/helpers.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/core/helpers.js b/src/core/helpers.js index bc1971ea63..b6cfe371b2 100644 --- a/src/core/helpers.js +++ b/src/core/helpers.js @@ -5,8 +5,6 @@ import * as constants from './constants'; function modeAdjust(a, b, c, d, mode) { - const e = (-c / 2) + c; //support for webgl width - const f = (-d / 2) + d; //support for webgl height if (mode === constants.CORNER) { return { x: a, y: b, w: c, h: d }; } else if (mode === constants.CORNERS) { @@ -14,7 +12,7 @@ function modeAdjust(a, b, c, d, mode) { } else if (mode === constants.RADIUS) { return { x: a - c, y: b - d, w: 2 * c, h: 2 * d }; } else if (mode === constants.CENTER) { - return { x: a - e, y: b - f, w: c, h: d }; + return { x: a - c * 0.5, y: b - d * 0.5, w: c, h: d }; } } From 15d001544a2c5c65148da1898a47aeb8521b256b Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 9 Sep 2024 00:39:45 +0100 Subject: [PATCH 25/26] revert changes --- test/unit/image/loading.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/image/loading.js b/test/unit/image/loading.js index 8165b7932a..8f8d23e66d 100644 --- a/test/unit/image/loading.js +++ b/test/unit/image/loading.js @@ -537,7 +537,7 @@ suite('displaying images that use fit mode', function() { test('CONTAIN when source image is larger than destination', function() { let src = myp5.createImage(400, 1000); sinon.spy(myp5._renderer, 'image'); - myp5.image(src, 0, 0, 0, 300, 400, 0, 0, 400, 1000, myp5.CONTAIN); + myp5.image(src, 0, 0, 300, 400, 0, 0, 400, 1000, myp5.CONTAIN); assert(myp5._renderer.image.calledOnce); assert.equal(myp5._renderer.image.getCall(0).args[7], 400 / (1000 / 400)); // dw assert.equal(myp5._renderer.image.getCall(0).args[8], 1000 / (1000 / 400)); // dh @@ -546,7 +546,7 @@ suite('displaying images that use fit mode', function() { test('CONTAIN when source image is smaller than destination', function() { let src = myp5.createImage(40, 90); sinon.spy(myp5._renderer, 'image'); - myp5.image(src, 0, 0, 0, 300, 500, 0, 0, 400, 1000, myp5.CONTAIN); + myp5.image(src, 0, 0, 300, 500, 0, 0, 400, 1000, myp5.CONTAIN); assert(myp5._renderer.image.calledOnce); assert.equal(myp5._renderer.image.getCall(0).args[7], 40 / (90 / 500)); // dw assert.equal(myp5._renderer.image.getCall(0).args[8], 90 / (90 / 500)); // dh From f0f57cce5f3000cc06cced1b64ab4bd708ade62f Mon Sep 17 00:00:00 2001 From: FORCHA PEARL Date: Mon, 9 Sep 2024 00:52:53 +0100 Subject: [PATCH 26/26] removed dz from param docs --- src/image/loading_displaying.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js index 1efe4bd1e3..3ba2b04177 100644 --- a/src/image/loading_displaying.js +++ b/src/image/loading_displaying.js @@ -1180,8 +1180,6 @@ function _sAssign(sVal, iVal) { * rectangle in which to draw the source image * @param {Number} dy the y-coordinate of the destination * rectangle in which to draw the source image - * @param {Number} [dz] the z-coordinate (depth) of the destination - * rectangle in which to draw the source image (WEBGL only) * @param {Number} dWidth the width of the destination rectangle * @param {Number} dHeight the height of the destination rectangle * @param {Number} sx the x-coordinate of the subsection of the source