From a61386c081d3d42117a0e997c4f8adfe0b13d5e2 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Thu, 29 Dec 2022 03:28:15 +0900 Subject: [PATCH 01/10] Implemented color interpolation in bezierVertex() Inside the vertex functions called inside the bezierVertex and quadraticVertex functions, curFillColor is now all the same. We want this to be interpolated between the curFillColor value when the previous vertex function was called (external or internal) and the current curFillColor value. --- src/webgl/3d_primitives.js | 106 ++++++++++++++++++++++++++++++++++++- 1 file changed, 104 insertions(+), 2 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 55bd9e60ab..721268bb13 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1556,7 +1556,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { let w_x = []; let w_y = []; let w_z = []; - let t, _x, _y, _z, i; + let t, _x, _y, _z, i, k; const argLength = args.length; t = 0; @@ -1587,14 +1587,46 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { } const LUTLength = this._lookUpTableBezier.length; + + // Get the last fill color + const _vertexColors = this.immediateMode.geometry.vertexColors; + const _vertexColorSize = _vertexColors.length; + const lastFillColor = [ + _vertexColors[_vertexColorSize - 4], + _vertexColors[_vertexColorSize - 3], + _vertexColors[_vertexColorSize - 2], + _vertexColors[_vertexColorSize - 1] + ]; + const finalFillColor = this.curFillColor.slice(); if (argLength === 6) { this.isBezier = true; w_x = [this.immediateMode._bezierVertex[0], args[0], args[2], args[4]]; w_y = [this.immediateMode._bezierVertex[1], args[1], args[3], args[5]]; + // calCalculate intermediate colors + let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2)); + let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2)); + let d2 = sqrt(pow(w_x[2]-w_x[3],2) + pow(w_y[2]-w_y[3],2)); + const totalLength = d0 + d1 + d2; + d0 /= totalLength; + d2 /= totalLength; + const firstFillColor = []; + const secondFillColor = []; + for (k = 0; k < 4; k++) { + firstFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); + secondFillColor.push(lastFillColor[k] * d2 + finalFillColor[k] * (1-d2)); + } for (i = 0; i < LUTLength; i++) { + // Interpolate colors using control points + this.curFillColor = [0, 0, 0, 0]; + for (k = 0; k < 4; k++) { + this.curFillColor[k] += this._lookUpTableBezier[i][0] * lastFillColor[k]; + this.curFillColor[k] += this._lookUpTableBezier[i][1] * firstFillColor[k]; + this.curFillColor[k] += this._lookUpTableBezier[i][2] * secondFillColor[k]; + this.curFillColor[k] += this._lookUpTableBezier[i][3] * finalFillColor[k]; + } _x = w_x[0] * this._lookUpTableBezier[i][0] + w_x[1] * this._lookUpTableBezier[i][1] + @@ -1607,6 +1639,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_y[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y); } + this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor this.immediateMode._bezierVertex[0] = args[4]; this.immediateMode._bezierVertex[1] = args[5]; } else if (argLength === 9) { @@ -1615,7 +1648,28 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_x = [this.immediateMode._bezierVertex[0], args[0], args[3], args[6]]; w_y = [this.immediateMode._bezierVertex[1], args[1], args[4], args[7]]; w_z = [this.immediateMode._bezierVertex[2], args[2], args[5], args[8]]; + // Calculate intermediate colors + let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2) + pow(w_z[0]-w_z[1],2)); + let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2) + pow(w_z[1]-w_z[2],2)); + let d2 = sqrt(pow(w_x[2]-w_x[3],2) + pow(w_y[2]-w_y[3],2) + pow(w_z[2]-w_z[3],2)); + const totalLength = d0 + d1 + d2; + d0 /= totalLength; + d2 /= totalLength; + const firstFillColor = []; + const secondFillColor = []; + for (k = 0; k < 4; k++) { + firstFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); + secondFillColor.push(lastFillColor[k] * d2 + finalFillColor[k] * (1-d2)); + } for (i = 0; i < LUTLength; i++) { + // Interpolate colors using control points + this.curFillColor = [0, 0, 0, 0]; + for (k = 0; k < 4; k++) { + this.curFillColor[k] += this._lookUpTableBezier[i][0] * lastFillColor[k]; + this.curFillColor[k] += this._lookUpTableBezier[i][1] * firstFillColor[k]; + this.curFillColor[k] += this._lookUpTableBezier[i][2] * secondFillColor[k]; + this.curFillColor[k] += this._lookUpTableBezier[i][3] * finalFillColor[k]; + } _x = w_x[0] * this._lookUpTableBezier[i][0] + w_x[1] * this._lookUpTableBezier[i][1] + @@ -1633,6 +1687,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_z[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y, _z); } + this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor this.immediateMode._bezierVertex[0] = args[6]; this.immediateMode._bezierVertex[1] = args[7]; this.immediateMode._bezierVertex[2] = args[8]; @@ -1647,7 +1702,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { let w_x = []; let w_y = []; let w_z = []; - let t, _x, _y, _z, i; + let t, _x, _y, _z, i, k; const argLength = args.length; t = 0; @@ -1678,14 +1733,42 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { } const LUTLength = this._lookUpTableQuadratic.length; + + // Get the last fill color + const _vertexColors = this.immediateMode.geometry.vertexColors; + const _vertexColorSize = _vertexColors.length; + const lastFillColor = [ + _vertexColors[_vertexColorSize - 4], + _vertexColors[_vertexColorSize - 3], + _vertexColors[_vertexColorSize - 2], + _vertexColors[_vertexColorSize - 1] + ]; + const finalFillColor = this.curFillColor.slice(); if (argLength === 4) { this.isQuadratic = true; w_x = [this.immediateMode._quadraticVertex[0], args[0], args[2]]; w_y = [this.immediateMode._quadraticVertex[1], args[1], args[3]]; + + // calCalculate intermediate colors + let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2)); + let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2)); + const totalLength = d0 + d1; + d0 /= totalLength; + const middleFillColor = []; + for (k = 0; k < 4; k++) { + middleFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); + } for (i = 0; i < LUTLength; i++) { + // Interpolate colors using control points + this.curFillColor = [0, 0, 0, 0]; + for (k = 0; k < 4; k++) { + this.curFillColor[k] += this._lookUpTableQuadratic[i][0] * lastFillColor[k]; + this.curFillColor[k] += this._lookUpTableQuadratic[i][1] * middleFillColor[k]; + this.curFillColor[k] += this._lookUpTableQuadratic[i][2] * finalFillColor[k]; + } _x = w_x[0] * this._lookUpTableQuadratic[i][0] + w_x[1] * this._lookUpTableQuadratic[i][1] + @@ -1697,6 +1780,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y); } + this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor this.immediateMode._quadraticVertex[0] = args[2]; this.immediateMode._quadraticVertex[1] = args[3]; } else if (argLength === 6) { @@ -1705,8 +1789,25 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_x = [this.immediateMode._quadraticVertex[0], args[0], args[3]]; w_y = [this.immediateMode._quadraticVertex[1], args[1], args[4]]; w_z = [this.immediateMode._quadraticVertex[2], args[2], args[5]]; + + // calCalculate intermediate colors + let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2) + pow(w_z[0]-w_z[1],2)); + let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2) + pow(w_z[1]-w_z[2],2)); + const totalLength = d0 + d1; + d0 /= totalLength; + const middleFillColor = []; + for (k = 0; k < 4; k++) { + middleFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); + } for (i = 0; i < LUTLength; i++) { + // Interpolate colors using control points + this.curFillColor = [0, 0, 0, 0]; + for (k = 0; k < 4; k++) { + this.curFillColor[k] += this._lookUpTableQuadratic[i][0] * lastFillColor[k]; + this.curFillColor[k] += this._lookUpTableQuadratic[i][1] * middleFillColor[k]; + this.curFillColor[k] += this._lookUpTableQuadratic[i][2] * finalFillColor[k]; + } _x = w_x[0] * this._lookUpTableQuadratic[i][0] + w_x[1] * this._lookUpTableQuadratic[i][1] + @@ -1722,6 +1823,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y, _z); } + this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor this.immediateMode._quadraticVertex[0] = args[3]; this.immediateMode._quadraticVertex[1] = args[4]; this.immediateMode._quadraticVertex[2] = args[5]; From 3b75ee8226f9cf139ddbd9ce88b871042ce49387 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Thu, 29 Dec 2022 03:53:43 +0900 Subject: [PATCH 02/10] Cleaned up some spaces and shorten some lines. I fixed some unnecessary spaces and lines that were too long. --- src/webgl/3d_primitives.js | 99 ++++++++++++++++++++++++++------------ 1 file changed, 68 insertions(+), 31 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 721268bb13..fb62387654 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1587,7 +1587,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { } const LUTLength = this._lookUpTableBezier.length; - + // Get the last fill color const _vertexColors = this.immediateMode.geometry.vertexColors; const _vertexColorSize = _vertexColors.length; @@ -1614,18 +1614,26 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { const firstFillColor = []; const secondFillColor = []; for (k = 0; k < 4; k++) { - firstFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); - secondFillColor.push(lastFillColor[k] * d2 + finalFillColor[k] * (1-d2)); + firstFillColor.push( + lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + ); + secondFillColor.push( + lastFillColor[k] * d2 + finalFillColor[k] * (1-d2) + ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; for (k = 0; k < 4; k++) { - this.curFillColor[k] += this._lookUpTableBezier[i][0] * lastFillColor[k]; - this.curFillColor[k] += this._lookUpTableBezier[i][1] * firstFillColor[k]; - this.curFillColor[k] += this._lookUpTableBezier[i][2] * secondFillColor[k]; - this.curFillColor[k] += this._lookUpTableBezier[i][3] * finalFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][0] * lastFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][1] * firstFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][2] * secondFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][3] * finalFillColor[k]; } _x = w_x[0] * this._lookUpTableBezier[i][0] + @@ -1639,7 +1647,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_y[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y); } - this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor + this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor this.immediateMode._bezierVertex[0] = args[4]; this.immediateMode._bezierVertex[1] = args[5]; } else if (argLength === 9) { @@ -1649,26 +1657,43 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_y = [this.immediateMode._bezierVertex[1], args[1], args[4], args[7]]; w_z = [this.immediateMode._bezierVertex[2], args[2], args[5], args[8]]; // Calculate intermediate colors - let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2) + pow(w_z[0]-w_z[1],2)); - let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2) + pow(w_z[1]-w_z[2],2)); - let d2 = sqrt(pow(w_x[2]-w_x[3],2) + pow(w_y[2]-w_y[3],2) + pow(w_z[2]-w_z[3],2)); + let d0 = sqrt( + pow(w_x[0]-w_x[1],2) + + pow(w_y[0]-w_y[1],2) + + pow(w_z[0]-w_z[1],2)); + let d1 = sqrt( + pow(w_x[1]-w_x[2],2) + + pow(w_y[1]-w_y[2],2) + + pow(w_z[1]-w_z[2],2)); + let d2 = sqrt( + pow(w_x[2]-w_x[3],2) + + pow(w_y[2]-w_y[3],2) + + pow(w_z[2]-w_z[3],2)); const totalLength = d0 + d1 + d2; d0 /= totalLength; d2 /= totalLength; const firstFillColor = []; const secondFillColor = []; for (k = 0; k < 4; k++) { - firstFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); - secondFillColor.push(lastFillColor[k] * d2 + finalFillColor[k] * (1-d2)); + firstFillColor.push( + lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + ); + secondFillColor.push( + lastFillColor[k] * d2 + finalFillColor[k] * (1-d2) + ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; for (k = 0; k < 4; k++) { - this.curFillColor[k] += this._lookUpTableBezier[i][0] * lastFillColor[k]; - this.curFillColor[k] += this._lookUpTableBezier[i][1] * firstFillColor[k]; - this.curFillColor[k] += this._lookUpTableBezier[i][2] * secondFillColor[k]; - this.curFillColor[k] += this._lookUpTableBezier[i][3] * finalFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][0] * lastFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][1] * firstFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][2] * secondFillColor[k]; + this.curFillColor[k] += + this._lookUpTableBezier[i][3] * finalFillColor[k]; } _x = w_x[0] * this._lookUpTableBezier[i][0] + @@ -1687,7 +1712,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_z[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y, _z); } - this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor + this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor this.immediateMode._bezierVertex[0] = args[6]; this.immediateMode._bezierVertex[1] = args[7]; this.immediateMode._bezierVertex[2] = args[8]; @@ -1733,7 +1758,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { } const LUTLength = this._lookUpTableQuadratic.length; - + // Get the last fill color const _vertexColors = this.immediateMode.geometry.vertexColors; const _vertexColorSize = _vertexColors.length; @@ -1750,7 +1775,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_x = [this.immediateMode._quadraticVertex[0], args[0], args[2]]; w_y = [this.immediateMode._quadraticVertex[1], args[1], args[3]]; - + // calCalculate intermediate colors let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2)); let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2)); @@ -1765,9 +1790,12 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; for (k = 0; k < 4; k++) { - this.curFillColor[k] += this._lookUpTableQuadratic[i][0] * lastFillColor[k]; - this.curFillColor[k] += this._lookUpTableQuadratic[i][1] * middleFillColor[k]; - this.curFillColor[k] += this._lookUpTableQuadratic[i][2] * finalFillColor[k]; + this.curFillColor[k] += + this._lookUpTableQuadratic[i][0] * lastFillColor[k]; + this.curFillColor[k] += + this._lookUpTableQuadratic[i][1] * middleFillColor[k]; + this.curFillColor[k] += + this._lookUpTableQuadratic[i][2] * finalFillColor[k]; } _x = w_x[0] * this._lookUpTableQuadratic[i][0] + @@ -1780,7 +1808,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y); } - this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor + this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor this.immediateMode._quadraticVertex[0] = args[2]; this.immediateMode._quadraticVertex[1] = args[3]; } else if (argLength === 6) { @@ -1789,10 +1817,16 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_x = [this.immediateMode._quadraticVertex[0], args[0], args[3]]; w_y = [this.immediateMode._quadraticVertex[1], args[1], args[4]]; w_z = [this.immediateMode._quadraticVertex[2], args[2], args[5]]; - + // calCalculate intermediate colors - let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2) + pow(w_z[0]-w_z[1],2)); - let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2) + pow(w_z[1]-w_z[2],2)); + let d0 = sqrt( + pow(w_x[0]-w_x[1],2) + + pow(w_y[0]-w_y[1],2) + + pow(w_z[0]-w_z[1],2)); + let d1 = sqrt( + pow(w_x[1]-w_x[2],2) + + pow(w_y[1]-w_y[2],2) + + pow(w_z[1]-w_z[2],2)); const totalLength = d0 + d1; d0 /= totalLength; const middleFillColor = []; @@ -1804,9 +1838,12 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; for (k = 0; k < 4; k++) { - this.curFillColor[k] += this._lookUpTableQuadratic[i][0] * lastFillColor[k]; - this.curFillColor[k] += this._lookUpTableQuadratic[i][1] * middleFillColor[k]; - this.curFillColor[k] += this._lookUpTableQuadratic[i][2] * finalFillColor[k]; + this.curFillColor[k] += + this._lookUpTableQuadratic[i][0] * lastFillColor[k]; + this.curFillColor[k] += + this._lookUpTableQuadratic[i][1] * middleFillColor[k]; + this.curFillColor[k] += + this._lookUpTableQuadratic[i][2] * finalFillColor[k]; } _x = w_x[0] * this._lookUpTableQuadratic[i][0] + @@ -1823,7 +1860,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y, _z); } - this.curFillColor = finalFillColor; // Set curFillColor back to finalFillColor + this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor this.immediateMode._quadraticVertex[0] = args[3]; this.immediateMode._quadraticVertex[1] = args[4]; this.immediateMode._quadraticVertex[2] = args[5]; From 0cbf66a3bc0f7b2916a7c29b1a633be5bbfd5218 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Thu, 29 Dec 2022 03:56:45 +0900 Subject: [PATCH 03/10] shorten some lines Some lines were too long, so I shortened them. --- src/webgl/3d_primitives.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index fb62387654..dbd5a74055 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1783,7 +1783,9 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { d0 /= totalLength; const middleFillColor = []; for (k = 0; k < 4; k++) { - middleFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); + middleFillColor.push( + lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + ); } for (i = 0; i < LUTLength; i++) { @@ -1831,7 +1833,9 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { d0 /= totalLength; const middleFillColor = []; for (k = 0; k < 4; k++) { - middleFillColor.push(lastFillColor[k] * (1-d0) + finalFillColor[k] * d0); + middleFillColor.push( + lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + ); } for (i = 0; i < LUTLength; i++) { From 46ff92c836301d3b84f458dca329095b3dec2521 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Thu, 29 Dec 2022 04:07:46 +0900 Subject: [PATCH 04/10] Change sqrt, pow to Math.sqrt, Math.pow Since sqrt cannot be referenced from this file, I rewrote it to Math.sqrt. --- src/webgl/3d_primitives.js | 70 ++++++++++++++++++++++++-------------- 1 file changed, 45 insertions(+), 25 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index dbd5a74055..76a1bec21e 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1605,9 +1605,18 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_x = [this.immediateMode._bezierVertex[0], args[0], args[2], args[4]]; w_y = [this.immediateMode._bezierVertex[1], args[1], args[3], args[5]]; // calCalculate intermediate colors - let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2)); - let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2)); - let d2 = sqrt(pow(w_x[2]-w_x[3],2) + pow(w_y[2]-w_y[3],2)); + let d0 = Math.sqrt( + Math.pow(w_x[0]-w_x[1],2) + + Math.pow(w_y[0]-w_y[1],2) + ); + let d1 = Math.sqrt( + Math.pow(w_x[1]-w_x[2],2) + + Math.pow(w_y[1]-w_y[2],2) + ); + let d2 = Math.sqrt( + Math.pow(w_x[2]-w_x[3],2) + + Math.pow(w_y[2]-w_y[3],2) + ); const totalLength = d0 + d1 + d2; d0 /= totalLength; d2 /= totalLength; @@ -1657,18 +1666,21 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_y = [this.immediateMode._bezierVertex[1], args[1], args[4], args[7]]; w_z = [this.immediateMode._bezierVertex[2], args[2], args[5], args[8]]; // Calculate intermediate colors - let d0 = sqrt( - pow(w_x[0]-w_x[1],2) + - pow(w_y[0]-w_y[1],2) + - pow(w_z[0]-w_z[1],2)); - let d1 = sqrt( - pow(w_x[1]-w_x[2],2) + - pow(w_y[1]-w_y[2],2) + - pow(w_z[1]-w_z[2],2)); - let d2 = sqrt( - pow(w_x[2]-w_x[3],2) + - pow(w_y[2]-w_y[3],2) + - pow(w_z[2]-w_z[3],2)); + let d0 = Math.sqrt( + Math.pow(w_x[0]-w_x[1],2) + + Math.pow(w_y[0]-w_y[1],2) + + Math.pow(w_z[0]-w_z[1],2) + ); + let d1 = Math.sqrt( + Math.pow(w_x[1]-w_x[2],2) + + Math.pow(w_y[1]-w_y[2],2) + + Math.pow(w_z[1]-w_z[2],2) + ); + let d2 = Math.sqrt( + Math.pow(w_x[2]-w_x[3],2) + + Math.pow(w_y[2]-w_y[3],2) + + Math.pow(w_z[2]-w_z[3],2) + ); const totalLength = d0 + d1 + d2; d0 /= totalLength; d2 /= totalLength; @@ -1777,8 +1789,14 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_y = [this.immediateMode._quadraticVertex[1], args[1], args[3]]; // calCalculate intermediate colors - let d0 = sqrt(pow(w_x[0]-w_x[1],2) + pow(w_y[0]-w_y[1],2)); - let d1 = sqrt(pow(w_x[1]-w_x[2],2) + pow(w_y[1]-w_y[2],2)); + let d0 = Math.sqrt( + Math.pow(w_x[0]-w_x[1],2) + + Math.pow(w_y[0]-w_y[1],2) + ); + let d1 = Math.sqrt( + Math.pow(w_x[1]-w_x[2],2) + + Math.pow(w_y[1]-w_y[2],2) + ); const totalLength = d0 + d1; d0 /= totalLength; const middleFillColor = []; @@ -1821,14 +1839,16 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_z = [this.immediateMode._quadraticVertex[2], args[2], args[5]]; // calCalculate intermediate colors - let d0 = sqrt( - pow(w_x[0]-w_x[1],2) + - pow(w_y[0]-w_y[1],2) + - pow(w_z[0]-w_z[1],2)); - let d1 = sqrt( - pow(w_x[1]-w_x[2],2) + - pow(w_y[1]-w_y[2],2) + - pow(w_z[1]-w_z[2],2)); + let d0 = Math.sqrt( + Math.pow(w_x[0]-w_x[1],2) + + Math.pow(w_y[0]-w_y[1],2) + + Math.pow(w_z[0]-w_z[1],2) + ); + let d1 = Math.sqrt( + Math.pow(w_x[1]-w_x[2],2) + + Math.pow(w_y[1]-w_y[2],2) + + Math.pow(w_z[1]-w_z[2],2) + ); const totalLength = d0 + d1; d0 /= totalLength; const middleFillColor = []; From b2c4dbd69372bdea5b5441b2bfb63873fe81769b Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Fri, 30 Dec 2022 02:23:53 +0900 Subject: [PATCH 05/10] Clarified comments and simplified some processing There was a part where it was difficult to understand what kind of processing was being done, so I rewrote the comment to make it easier to understand. Also, some processing has been simplified using convenient functions. --- src/webgl/3d_primitives.js | 199 ++++++++++++++----------------------- 1 file changed, 74 insertions(+), 125 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 76a1bec21e..3da43dfdd1 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1556,7 +1556,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { let w_x = []; let w_y = []; let w_z = []; - let t, _x, _y, _z, i, k; + let t, _x, _y, _z, i, k, m; const argLength = args.length; t = 0; @@ -1588,61 +1588,44 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { const LUTLength = this._lookUpTableBezier.length; - // Get the last fill color - const _vertexColors = this.immediateMode.geometry.vertexColors; - const _vertexColorSize = _vertexColors.length; - const lastFillColor = [ - _vertexColors[_vertexColorSize - 4], - _vertexColors[_vertexColorSize - 3], - _vertexColors[_vertexColorSize - 2], - _vertexColors[_vertexColorSize - 1] - ]; - const finalFillColor = this.curFillColor.slice(); + // fillColors[0]: start point color + // fillColors[1],[2]: intermediate point color + // fillColors[3]: end point color + const fillColors = []; + for (m = 0; m < 4; m++) fillColors.push([]); + fillColors[0] = this.immediateMode.geometry.vertexColors.slice(-4); + fillColors[3] = this.curFillColor.slice(); if (argLength === 6) { this.isBezier = true; w_x = [this.immediateMode._bezierVertex[0], args[0], args[2], args[4]]; w_y = [this.immediateMode._bezierVertex[1], args[1], args[3], args[5]]; - // calCalculate intermediate colors - let d0 = Math.sqrt( - Math.pow(w_x[0]-w_x[1],2) + - Math.pow(w_y[0]-w_y[1],2) - ); - let d1 = Math.sqrt( - Math.pow(w_x[1]-w_x[2],2) + - Math.pow(w_y[1]-w_y[2],2) - ); - let d2 = Math.sqrt( - Math.pow(w_x[2]-w_x[3],2) + - Math.pow(w_y[2]-w_y[3],2) - ); + // The ratio of the distance between the start point, the two control- + // points, and the end point determines the intermediate color. + let d0 = Math.hypot(w_x[0]-w_x[1], w_y[0]-w_y[1]); + let d1 = Math.hypot(w_x[1]-w_x[2], w_y[1]-w_y[2]); + let d2 = Math.hypot(w_x[2]-w_x[3], w_y[2]-w_y[3]); const totalLength = d0 + d1 + d2; d0 /= totalLength; d2 /= totalLength; - const firstFillColor = []; - const secondFillColor = []; for (k = 0; k < 4; k++) { - firstFillColor.push( - lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + fillColors[1].push( + fillColors[0][k] * (1-d0) + fillColors[3][k] * d0 ); - secondFillColor.push( - lastFillColor[k] * d2 + finalFillColor[k] * (1-d2) + fillColors[2].push( + fillColors[0][k] * d2 + fillColors[3][k] * (1-d2) ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; - for (k = 0; k < 4; k++) { - this.curFillColor[k] += - this._lookUpTableBezier[i][0] * lastFillColor[k]; - this.curFillColor[k] += - this._lookUpTableBezier[i][1] * firstFillColor[k]; - this.curFillColor[k] += - this._lookUpTableBezier[i][2] * secondFillColor[k]; - this.curFillColor[k] += - this._lookUpTableBezier[i][3] * finalFillColor[k]; + for (m = 0; m < 4; m++) { + for (k = 0; k < 4; k++) { + this.curFillColor[k] += + this._lookUpTableBezier[i][m] * fillColors[m][k]; + } } _x = w_x[0] * this._lookUpTableBezier[i][0] + @@ -1656,7 +1639,8 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_y[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y); } - this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor + // so that we leave curFillColor with the last value the user set it to + this.curFillColor = fillColors[3]; this.immediateMode._bezierVertex[0] = args[4]; this.immediateMode._bezierVertex[1] = args[5]; } else if (argLength === 9) { @@ -1665,47 +1649,30 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_x = [this.immediateMode._bezierVertex[0], args[0], args[3], args[6]]; w_y = [this.immediateMode._bezierVertex[1], args[1], args[4], args[7]]; w_z = [this.immediateMode._bezierVertex[2], args[2], args[5], args[8]]; - // Calculate intermediate colors - let d0 = Math.sqrt( - Math.pow(w_x[0]-w_x[1],2) + - Math.pow(w_y[0]-w_y[1],2) + - Math.pow(w_z[0]-w_z[1],2) - ); - let d1 = Math.sqrt( - Math.pow(w_x[1]-w_x[2],2) + - Math.pow(w_y[1]-w_y[2],2) + - Math.pow(w_z[1]-w_z[2],2) - ); - let d2 = Math.sqrt( - Math.pow(w_x[2]-w_x[3],2) + - Math.pow(w_y[2]-w_y[3],2) + - Math.pow(w_z[2]-w_z[3],2) - ); + // The ratio of the distance between the start point, the two control- + // points, and the end point determines the intermediate color. + let d0 = Math.hypot(w_x[0]-w_x[1], w_y[0]-w_y[1], w_z[0]-w_z[1]); + let d1 = Math.hypot(w_x[1]-w_x[2], w_y[1]-w_y[2], w_z[1]-w_z[2]); + let d2 = Math.hypot(w_x[2]-w_x[3], w_y[2]-w_y[3], w_z[2]-w_z[3]); const totalLength = d0 + d1 + d2; d0 /= totalLength; d2 /= totalLength; - const firstFillColor = []; - const secondFillColor = []; for (k = 0; k < 4; k++) { - firstFillColor.push( - lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + fillColors[1].push( + fillColors[0][k] * (1-d0) + fillColors[3][k] * d0 ); - secondFillColor.push( - lastFillColor[k] * d2 + finalFillColor[k] * (1-d2) + fillColors[2].push( + fillColors[0][k] * d2 + fillColors[3][k] * (1-d2) ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; - for (k = 0; k < 4; k++) { - this.curFillColor[k] += - this._lookUpTableBezier[i][0] * lastFillColor[k]; - this.curFillColor[k] += - this._lookUpTableBezier[i][1] * firstFillColor[k]; - this.curFillColor[k] += - this._lookUpTableBezier[i][2] * secondFillColor[k]; - this.curFillColor[k] += - this._lookUpTableBezier[i][3] * finalFillColor[k]; + for (m = 0; m < 4; m++) { + for (k = 0; k < 4; k++) { + this.curFillColor[k] += + this._lookUpTableBezier[i][m] * fillColors[m][k]; + } } _x = w_x[0] * this._lookUpTableBezier[i][0] + @@ -1724,7 +1691,8 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { w_z[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y, _z); } - this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor + // so that we leave curFillColor with the last value the user set it to + this.curFillColor = fillColors[3]; this.immediateMode._bezierVertex[0] = args[6]; this.immediateMode._bezierVertex[1] = args[7]; this.immediateMode._bezierVertex[2] = args[8]; @@ -1739,7 +1707,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { let w_x = []; let w_y = []; let w_z = []; - let t, _x, _y, _z, i, k; + let t, _x, _y, _z, i, k, m; const argLength = args.length; t = 0; @@ -1771,16 +1739,13 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { const LUTLength = this._lookUpTableQuadratic.length; - // Get the last fill color - const _vertexColors = this.immediateMode.geometry.vertexColors; - const _vertexColorSize = _vertexColors.length; - const lastFillColor = [ - _vertexColors[_vertexColorSize - 4], - _vertexColors[_vertexColorSize - 3], - _vertexColors[_vertexColorSize - 2], - _vertexColors[_vertexColorSize - 1] - ]; - const finalFillColor = this.curFillColor.slice(); + // fillColors[0]: start point color + // fillColors[1]: intermediate point color + // fillColors[2]: end point color + const fillColors = []; + for (m = 0; m < 3; m++) fillColors.push([]); + fillColors[0] = this.immediateMode.geometry.vertexColors.slice(-4); + fillColors[2] = this.curFillColor.slice(); if (argLength === 4) { this.isQuadratic = true; @@ -1788,34 +1753,26 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_x = [this.immediateMode._quadraticVertex[0], args[0], args[2]]; w_y = [this.immediateMode._quadraticVertex[1], args[1], args[3]]; - // calCalculate intermediate colors - let d0 = Math.sqrt( - Math.pow(w_x[0]-w_x[1],2) + - Math.pow(w_y[0]-w_y[1],2) - ); - let d1 = Math.sqrt( - Math.pow(w_x[1]-w_x[2],2) + - Math.pow(w_y[1]-w_y[2],2) - ); + // The ratio of the distance between the start point, the two control- + // points, and the end point determines the intermediate color. + let d0 = Math.hypot(w_x[0]-w_x[1], w_y[0]-w_y[1]); + let d1 = Math.hypot(w_x[1]-w_x[2], w_y[1]-w_y[2]); const totalLength = d0 + d1; d0 /= totalLength; - const middleFillColor = []; for (k = 0; k < 4; k++) { - middleFillColor.push( - lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + fillColors[1].push( + fillColors[0][k] * (1-d0) + fillColors[2][k] * d0 ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; - for (k = 0; k < 4; k++) { - this.curFillColor[k] += - this._lookUpTableQuadratic[i][0] * lastFillColor[k]; - this.curFillColor[k] += - this._lookUpTableQuadratic[i][1] * middleFillColor[k]; - this.curFillColor[k] += - this._lookUpTableQuadratic[i][2] * finalFillColor[k]; + for (m = 0; m < 3; m++) { + for (k = 0; k < 4; k++) { + this.curFillColor[k] += + this._lookUpTableQuadratic[i][m] * fillColors[m][k]; + } } _x = w_x[0] * this._lookUpTableQuadratic[i][0] + @@ -1828,7 +1785,8 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y); } - this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor + // so that we leave curFillColor with the last value the user set it to + this.curFillColor = fillColors[2]; this.immediateMode._quadraticVertex[0] = args[2]; this.immediateMode._quadraticVertex[1] = args[3]; } else if (argLength === 6) { @@ -1838,36 +1796,26 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_y = [this.immediateMode._quadraticVertex[1], args[1], args[4]]; w_z = [this.immediateMode._quadraticVertex[2], args[2], args[5]]; - // calCalculate intermediate colors - let d0 = Math.sqrt( - Math.pow(w_x[0]-w_x[1],2) + - Math.pow(w_y[0]-w_y[1],2) + - Math.pow(w_z[0]-w_z[1],2) - ); - let d1 = Math.sqrt( - Math.pow(w_x[1]-w_x[2],2) + - Math.pow(w_y[1]-w_y[2],2) + - Math.pow(w_z[1]-w_z[2],2) - ); + // The ratio of the distance between the start point, the two control- + // points, and the end point determines the intermediate color. + let d0 = Math.hypot(w_x[0]-w_x[1], w_y[0]-w_y[1], w_z[0]-w_z[1]); + let d1 = Math.hypot(w_x[1]-w_x[2], w_y[1]-w_y[2], w_z[1]-w_z[2]); const totalLength = d0 + d1; d0 /= totalLength; - const middleFillColor = []; for (k = 0; k < 4; k++) { - middleFillColor.push( - lastFillColor[k] * (1-d0) + finalFillColor[k] * d0 + fillColors[1].push( + fillColors[0][k] * (1-d0) + fillColors[2][k] * d0 ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; - for (k = 0; k < 4; k++) { - this.curFillColor[k] += - this._lookUpTableQuadratic[i][0] * lastFillColor[k]; - this.curFillColor[k] += - this._lookUpTableQuadratic[i][1] * middleFillColor[k]; - this.curFillColor[k] += - this._lookUpTableQuadratic[i][2] * finalFillColor[k]; + for (m = 0; m < 3; m++) { + for (k = 0; k < 4; k++) { + this.curFillColor[k] += + this._lookUpTableQuadratic[i][m] * fillColors[m][k]; + } } _x = w_x[0] * this._lookUpTableQuadratic[i][0] + @@ -1884,7 +1832,8 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y, _z); } - this.curFillColor = finalFillColor; // Set curFillColor to finalFillColor + // so that we leave curFillColor with the last value the user set it to + this.curFillColor = fillColors[2]; this.immediateMode._quadraticVertex[0] = args[3]; this.immediateMode._quadraticVertex[1] = args[4]; this.immediateMode._quadraticVertex[2] = args[5]; From 4e9225d186a112f5808886ea967ef3b339d3d14e Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Fri, 30 Dec 2022 08:43:35 +0900 Subject: [PATCH 06/10] Minor comment correction The quadraticVertex has only one control point, so I reworded the comment accordingly. --- src/webgl/3d_primitives.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 3da43dfdd1..ac04ac6f1b 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1753,8 +1753,8 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_x = [this.immediateMode._quadraticVertex[0], args[0], args[2]]; w_y = [this.immediateMode._quadraticVertex[1], args[1], args[3]]; - // The ratio of the distance between the start point, the two control- - // points, and the end point determines the intermediate color. + // The ratio of the distance between the start point, the control- + // point, and the end point determines the intermediate color. let d0 = Math.hypot(w_x[0]-w_x[1], w_y[0]-w_y[1]); let d1 = Math.hypot(w_x[1]-w_x[2], w_y[1]-w_y[2]); const totalLength = d0 + d1; @@ -1796,8 +1796,8 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { w_y = [this.immediateMode._quadraticVertex[1], args[1], args[4]]; w_z = [this.immediateMode._quadraticVertex[2], args[2], args[5]]; - // The ratio of the distance between the start point, the two control- - // points, and the end point determines the intermediate color. + // The ratio of the distance between the start point, the control- + // point, and the end point determines the intermediate color. let d0 = Math.hypot(w_x[0]-w_x[1], w_y[0]-w_y[1], w_z[0]-w_z[1]); let d1 = Math.hypot(w_x[1]-w_x[2], w_y[1]-w_y[2], w_z[1]-w_z[2]); const totalLength = d0 + d1; From ba38fdd597e1fba17e8c81145688c3b8958b4ae4 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Sat, 31 Dec 2022 00:29:53 +0900 Subject: [PATCH 07/10] Simplify some processing of for-loop I thought it would be possible to simplify by nesting some of the internal processing of the for-loop that performs the interpolation processing, so I rewrote it. I added the roles of the variables used in the loop in the form of comments. Also, I thought that "control" was more appropriate than "intermediate", so I renamed it. --- src/webgl/3d_primitives.js | 65 +++++++++++--------------------------- 1 file changed, 18 insertions(+), 47 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index ac04ac6f1b..b7c673a025 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1557,6 +1557,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { let w_y = []; let w_z = []; let t, _x, _y, _z, i, k, m; + // variable i for bezierPoints, k for components, and m for anchor points. const argLength = args.length; t = 0; @@ -1589,7 +1590,7 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { const LUTLength = this._lookUpTableBezier.length; // fillColors[0]: start point color - // fillColors[1],[2]: intermediate point color + // fillColors[1],[2]: control point color // fillColors[3]: end point color const fillColors = []; for (m = 0; m < 4; m++) fillColors.push([]); @@ -1621,22 +1622,15 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + _x = _y = 0; for (m = 0; m < 4; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k]; } + _x += w_x[m] * this._lookUpTableBezier[i][m]; + _y += w_y[m] * this._lookUpTableBezier[i][m]; } - _x = - w_x[0] * this._lookUpTableBezier[i][0] + - w_x[1] * this._lookUpTableBezier[i][1] + - w_x[2] * this._lookUpTableBezier[i][2] + - w_x[3] * this._lookUpTableBezier[i][3]; - _y = - w_y[0] * this._lookUpTableBezier[i][0] + - w_y[1] * this._lookUpTableBezier[i][1] + - w_y[2] * this._lookUpTableBezier[i][2] + - w_y[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y); } // so that we leave curFillColor with the last value the user set it to @@ -1668,27 +1662,16 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + _x = _y = _z = 0; for (m = 0; m < 4; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k]; } + _x += w_x[m] * this._lookUpTableBezier[i][m]; + _y += w_y[m] * this._lookUpTableBezier[i][m]; + _z += w_z[m] * this._lookUpTableBezier[i][m]; } - _x = - w_x[0] * this._lookUpTableBezier[i][0] + - w_x[1] * this._lookUpTableBezier[i][1] + - w_x[2] * this._lookUpTableBezier[i][2] + - w_x[3] * this._lookUpTableBezier[i][3]; - _y = - w_y[0] * this._lookUpTableBezier[i][0] + - w_y[1] * this._lookUpTableBezier[i][1] + - w_y[2] * this._lookUpTableBezier[i][2] + - w_y[3] * this._lookUpTableBezier[i][3]; - _z = - w_z[0] * this._lookUpTableBezier[i][0] + - w_z[1] * this._lookUpTableBezier[i][1] + - w_z[2] * this._lookUpTableBezier[i][2] + - w_z[3] * this._lookUpTableBezier[i][3]; this.vertex(_x, _y, _z); } // so that we leave curFillColor with the last value the user set it to @@ -1708,6 +1691,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { let w_y = []; let w_z = []; let t, _x, _y, _z, i, k, m; + // variable i for bezierPoints, k for components, and m for anchor points. const argLength = args.length; t = 0; @@ -1740,7 +1724,7 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { const LUTLength = this._lookUpTableQuadratic.length; // fillColors[0]: start point color - // fillColors[1]: intermediate point color + // fillColors[1]: control point color // fillColors[2]: end point color const fillColors = []; for (m = 0; m < 3; m++) fillColors.push([]); @@ -1768,20 +1752,15 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + _x = _y = 0; for (m = 0; m < 3; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k]; } + _x += w_x[m] * this._lookUpTableQuadratic[i][m]; + _y += w_y[m] * this._lookUpTableQuadratic[i][m]; } - _x = - w_x[0] * this._lookUpTableQuadratic[i][0] + - w_x[1] * this._lookUpTableQuadratic[i][1] + - w_x[2] * this._lookUpTableQuadratic[i][2]; - _y = - w_y[0] * this._lookUpTableQuadratic[i][0] + - w_y[1] * this._lookUpTableQuadratic[i][1] + - w_y[2] * this._lookUpTableQuadratic[i][2]; this.vertex(_x, _y); } @@ -1811,24 +1790,16 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + _x = _y = _z = 0; for (m = 0; m < 3; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k]; } + _x += w_x[m] * this._lookUpTableQuadratic[i][m]; + _y += w_y[m] * this._lookUpTableQuadratic[i][m]; + _z += w_z[m] * this._lookUpTableQuadratic[i][m]; } - _x = - w_x[0] * this._lookUpTableQuadratic[i][0] + - w_x[1] * this._lookUpTableQuadratic[i][1] + - w_x[2] * this._lookUpTableQuadratic[i][2]; - _y = - w_y[0] * this._lookUpTableQuadratic[i][0] + - w_y[1] * this._lookUpTableQuadratic[i][1] + - w_y[2] * this._lookUpTableQuadratic[i][2]; - _z = - w_z[0] * this._lookUpTableQuadratic[i][0] + - w_z[1] * this._lookUpTableQuadratic[i][1] + - w_z[2] * this._lookUpTableQuadratic[i][2]; this.vertex(_x, _y, _z); } From 6e81bb262447f790c1bbd9fb36a6663e96f8999f Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Sat, 31 Dec 2022 01:17:46 +0900 Subject: [PATCH 08/10] Add process related to line color interpolation Exactly the same form of interpolation is applied to curStrokeColor as for curFillColor. --- src/webgl/3d_primitives.js | 54 +++++++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 4 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index b7c673a025..0d5535cb01 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -1597,6 +1597,12 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { fillColors[0] = this.immediateMode.geometry.vertexColors.slice(-4); fillColors[3] = this.curFillColor.slice(); + // Do the same for strokeColor. + const strokeColors = []; + for (m = 0; m < 4; m++) strokeColors.push([]); + strokeColors[0] = this.immediateMode.geometry.lineVertexColors.slice(-4); + strokeColors[3] = this.curStrokeColor.slice(); + if (argLength === 6) { this.isBezier = true; @@ -1617,24 +1623,34 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { fillColors[2].push( fillColors[0][k] * d2 + fillColors[3][k] * (1-d2) ); + strokeColors[1].push( + strokeColors[0][k] * (1-d0) + strokeColors[3][k] * d0 + ); + strokeColors[2].push( + strokeColors[0][k] * d2 + strokeColors[3][k] * (1-d2) + ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + this.curStrokeColor = [0, 0, 0, 0]; _x = _y = 0; for (m = 0; m < 4; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k]; + this.curStrokeColor[k] += + this._lookUpTableBezier[i][m] * strokeColors[m][k]; } _x += w_x[m] * this._lookUpTableBezier[i][m]; _y += w_y[m] * this._lookUpTableBezier[i][m]; } this.vertex(_x, _y); } - // so that we leave curFillColor with the last value the user set it to + // so that we leave currentColor with the last value the user set it to this.curFillColor = fillColors[3]; + this.curStrokeColor = strokeColors[3]; this.immediateMode._bezierVertex[0] = args[4]; this.immediateMode._bezierVertex[1] = args[5]; } else if (argLength === 9) { @@ -1658,15 +1674,24 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { fillColors[2].push( fillColors[0][k] * d2 + fillColors[3][k] * (1-d2) ); + strokeColors[1].push( + strokeColors[0][k] * (1-d0) + strokeColors[3][k] * d0 + ); + strokeColors[2].push( + strokeColors[0][k] * d2 + strokeColors[3][k] * (1-d2) + ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + this.curStrokeColor = [0, 0, 0, 0]; _x = _y = _z = 0; for (m = 0; m < 4; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableBezier[i][m] * fillColors[m][k]; + this.curStrokeColor[k] += + this._lookUpTableBezier[i][m] * strokeColors[m][k]; } _x += w_x[m] * this._lookUpTableBezier[i][m]; _y += w_y[m] * this._lookUpTableBezier[i][m]; @@ -1674,8 +1699,9 @@ p5.RendererGL.prototype.bezierVertex = function(...args) { } this.vertex(_x, _y, _z); } - // so that we leave curFillColor with the last value the user set it to + // so that we leave currentColor with the last value the user set it to this.curFillColor = fillColors[3]; + this.curStrokeColor = strokeColors[3]; this.immediateMode._bezierVertex[0] = args[6]; this.immediateMode._bezierVertex[1] = args[7]; this.immediateMode._bezierVertex[2] = args[8]; @@ -1731,6 +1757,12 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { fillColors[0] = this.immediateMode.geometry.vertexColors.slice(-4); fillColors[2] = this.curFillColor.slice(); + // Do the same for strokeColor. + const strokeColors = []; + for (m = 0; m < 3; m++) strokeColors.push([]); + strokeColors[0] = this.immediateMode.geometry.lineVertexColors.slice(-4); + strokeColors[2] = this.curStrokeColor.slice(); + if (argLength === 4) { this.isQuadratic = true; @@ -1747,16 +1779,22 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { fillColors[1].push( fillColors[0][k] * (1-d0) + fillColors[2][k] * d0 ); + strokeColors[1].push( + strokeColors[0][k] * (1-d0) + strokeColors[2][k] * d0 + ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + this.curStrokeColor = [0, 0, 0, 0]; _x = _y = 0; for (m = 0; m < 3; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k]; + this.curStrokeColor[k] += + this._lookUpTableQuadratic[i][m] * strokeColors[m][k]; } _x += w_x[m] * this._lookUpTableQuadratic[i][m]; _y += w_y[m] * this._lookUpTableQuadratic[i][m]; @@ -1764,8 +1802,9 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y); } - // so that we leave curFillColor with the last value the user set it to + // so that we leave currentColor with the last value the user set it to this.curFillColor = fillColors[2]; + this.curStrokeColor = strokeColors[2]; this.immediateMode._quadraticVertex[0] = args[2]; this.immediateMode._quadraticVertex[1] = args[3]; } else if (argLength === 6) { @@ -1785,16 +1824,22 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { fillColors[1].push( fillColors[0][k] * (1-d0) + fillColors[2][k] * d0 ); + strokeColors[1].push( + strokeColors[0][k] * (1-d0) + strokeColors[2][k] * d0 + ); } for (i = 0; i < LUTLength; i++) { // Interpolate colors using control points this.curFillColor = [0, 0, 0, 0]; + this.curStrokeColor = [0, 0, 0, 0]; _x = _y = _z = 0; for (m = 0; m < 3; m++) { for (k = 0; k < 4; k++) { this.curFillColor[k] += this._lookUpTableQuadratic[i][m] * fillColors[m][k]; + this.curStrokeColor[k] += + this._lookUpTableQuadratic[i][m] * strokeColors[m][k]; } _x += w_x[m] * this._lookUpTableQuadratic[i][m]; _y += w_y[m] * this._lookUpTableQuadratic[i][m]; @@ -1803,8 +1848,9 @@ p5.RendererGL.prototype.quadraticVertex = function(...args) { this.vertex(_x, _y, _z); } - // so that we leave curFillColor with the last value the user set it to + // so that we leave currentColor with the last value the user set it to this.curFillColor = fillColors[2]; + this.curStrokeColor = strokeColors[2]; this.immediateMode._quadraticVertex[0] = args[3]; this.immediateMode._quadraticVertex[1] = args[4]; this.immediateMode._quadraticVertex[2] = args[5]; From 25a799ff8f7df3bdc3b93dbdc01b636246de1eaf Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Sat, 31 Dec 2022 01:52:58 +0900 Subject: [PATCH 09/10] test for fill with bezier and quadraticVertex Add a unit test to make sure intermediate vertex colors are interpolated with start and end colors when using bezierVertex and quadraticVertex in immediateMode. --- test/unit/webgl/p5.RendererGL.js | 38 ++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js index 08d240cae3..52fbe2a2ec 100644 --- a/test/unit/webgl/p5.RendererGL.js +++ b/test/unit/webgl/p5.RendererGL.js @@ -1069,6 +1069,44 @@ suite('p5.RendererGL', function() { assert.deepEqual(myp5.get(256, 2), [142, 136, 140, 255]); assert.deepEqual(myp5.get(511, 2), [42, 36, 240, 255]); + done(); + }); + test('bezierVertex() should interpolate curFillColor', function(done) { + const renderer = myp5.createCanvas(256, 256, myp5.WEBGL); + + // start color: (255, 255, 255) + // end color: (255, 0, 0) + // Intermediate values are expected to be approximately half the value. + + renderer.noStroke(); + renderer.beginShape(); + renderer.fill(255); + renderer.vertex(-128, -128); + renderer.fill(255, 0, 0); + renderer.bezierVertex(128, -128, 128, 128, -128, 128); + renderer.endShape(); + + assert.deepEqual(myp5.get(128, 128), [255, 129, 129, 255]); + + done(); + }); + test('quadraticVertex() should interpolate curFillColor', function(done) { + const renderer = myp5.createCanvas(256, 256, myp5.WEBGL); + + // start color: (255, 255, 255) + // end color: (255, 0, 0) + // Intermediate values are expected to be approximately half the value. + + renderer.noStroke(); + renderer.beginShape(); + renderer.fill(255); + renderer.vertex(-128, -128); + renderer.fill(255, 0, 0); + renderer.quadraticVertex(256, 0, -128, 128); + renderer.endShape(); + + assert.deepEqual(myp5.get(128, 128), [255, 128, 128, 255]); + done(); }); }); From 6633fad058a4a9c1ac9b222499892319b6622357 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Sat, 31 Dec 2022 02:02:26 +0900 Subject: [PATCH 10/10] Eliminate unnecessary noStroke functions noStroke() was not a renderer function. Prior to that, the noStroke function was unnecessary for this test, so I decided to remove it. --- test/unit/webgl/p5.RendererGL.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js index 52fbe2a2ec..2fe395c1fd 100644 --- a/test/unit/webgl/p5.RendererGL.js +++ b/test/unit/webgl/p5.RendererGL.js @@ -1078,7 +1078,6 @@ suite('p5.RendererGL', function() { // end color: (255, 0, 0) // Intermediate values are expected to be approximately half the value. - renderer.noStroke(); renderer.beginShape(); renderer.fill(255); renderer.vertex(-128, -128); @@ -1097,7 +1096,6 @@ suite('p5.RendererGL', function() { // end color: (255, 0, 0) // Intermediate values are expected to be approximately half the value. - renderer.noStroke(); renderer.beginShape(); renderer.fill(255); renderer.vertex(-128, -128);