From 8c0b7909ba5fe8e36e072c05fba0fd5be9c35d0a Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 02:33:16 +0900
Subject: [PATCH 01/18] Prepare a color variable to send to the frag.

Add a new attribute variable "aVertexColor" that represents the vertex color.
At the same time, prepare a varying variable "vColor" to send to the fragmentshader.
This shader assigns aVertexColor to vColor.
---
 src/webgl/shaders/line.vert | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/webgl/shaders/line.vert b/src/webgl/shaders/line.vert
index a359155497..a48933cc51 100644
--- a/src/webgl/shaders/line.vert
+++ b/src/webgl/shaders/line.vert
@@ -27,7 +27,10 @@ uniform int uPerspective;
 
 attribute vec4 aPosition;
 attribute vec4 aDirection;
-  
+attribute vec4 aVertexColor;
+
+varying vec4 vColor;
+
 void main() {
   // using a scale <1 moves the lines towards the camera
   // in order to prevent popping effects due to half of
@@ -94,4 +97,6 @@ void main() {
 
   gl_Position.xy = p.xy + offset.xy * curPerspScale;
   gl_Position.zw = p.zw;
+  
+  vColor = aVertexColor;
 }

From f9d48bf0acf55fb8856e478b5a798f9427573c4f Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 02:39:49 +0900
Subject: [PATCH 02/18]  Prepare a flag to branch the output.

Prepare a variable called uUseLineColor that indicates whether to change the line color for each vertex.
At the same time, prepare vColor, which is a common variable with vertexShader, and use this flag to determine which one to use with uMaterialColor.
---
 src/webgl/shaders/line.frag | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/webgl/shaders/line.frag b/src/webgl/shaders/line.frag
index 47812beb8d..a27828b7ca 100644
--- a/src/webgl/shaders/line.frag
+++ b/src/webgl/shaders/line.frag
@@ -1,8 +1,11 @@
 precision mediump float;
 precision mediump int;
 
+varying vec4 vColor;
+
+uniform bool uUseLineColor;
 uniform vec4 uMaterialColor;
 
 void main() {
-  gl_FragColor = uMaterialColor;
-}
\ No newline at end of file
+  gl_FragColor = (uUseLineColor ? vColor : uMaterialColor);
+}

From 6522a55855a7f7303dcd652e16bda5ce559899e9 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 02:42:31 +0900
Subject: [PATCH 03/18] Removed unnecessary lines at the end of file.

Removed unnecessary lines at the end of file, sorry.

From c200fba911daafde263f22e375d7d28db4f040ae Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 09:44:28 +0900
Subject: [PATCH 04/18] Prepare a buffer to use for coloring lines

Prepare a buffer for storing information for coloring lines in both retained and immediate modes.
In addition, prepare a new flag for whether or not to color the line for each vertex, and add a process to register it with setUniform.
---
 src/webgl/p5.RendererGL.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index 43f194c2fe..f21865e6fb 100755
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -110,6 +110,8 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
   this._useNormalMaterial = false;
   this._useShininess = 1;
 
+  this._useLineColor = false;
+
   this._tint = [255, 255, 255, 255];
 
   // lightFalloff variables
@@ -149,6 +151,7 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
     geometry: {},
     buffers: {
       stroke: [
+        new p5.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', this, this._flatten),
         new p5.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten),
         new p5.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten)
       ],
@@ -184,6 +187,7 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
         new p5.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten)
       ],
       stroke: [
+        new p5.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', this, this._flatten),
         new p5.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten),
         new p5.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten)
       ],
@@ -1257,6 +1261,7 @@ p5.RendererGL.prototype._setStrokeUniforms = function(strokeShader) {
   strokeShader.bindShader();
 
   // set the uniform values
+  strokeShader.setUniform('uUseLineColor', this._useLineColor);
   strokeShader.setUniform('uMaterialColor', this.curStrokeColor);
   strokeShader.setUniform('uStrokeWeight', this.curStrokeWeight);
 };

From f07bf49705b53e147ef138e799aab639ce16b0ac Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 09:53:16 +0900
Subject: [PATCH 05/18] Added process to register color in vertex function

In the vertex function, register the color used to color the line for each vertex as an argument of the stroke function.
In addition, add a process to calculate the flag whether to color the line for each vertex in the _drawImmediateStroke function.
---
 src/webgl/p5.RendererGL.Immediate.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/webgl/p5.RendererGL.Immediate.js b/src/webgl/p5.RendererGL.Immediate.js
index c4867be454..ae8e7488cd 100644
--- a/src/webgl/p5.RendererGL.Immediate.js
+++ b/src/webgl/p5.RendererGL.Immediate.js
@@ -109,6 +109,13 @@ p5.RendererGL.prototype.vertex = function(x, y) {
     vertexColor[2],
     vertexColor[3]
   );
+  var lineVertexColor = this.curStrokeColor || [0.5, 0.5, 0.5, 1];
+  this.immediateMode.geometry.lineVertexColors.push(
+    lineVertexColor[0],
+    lineVertexColor[1],
+    lineVertexColor[2],
+    lineVertexColor[3]
+  );
 
   if (this.textureMode === constants.IMAGE) {
     if (this._tex !== null) {
@@ -405,6 +412,7 @@ p5.RendererGL.prototype._drawImmediateFill = function() {
 p5.RendererGL.prototype._drawImmediateStroke = function() {
   const gl = this.GL;
   const shader = this._getImmediateStrokeShader();
+  this._useLineColor = (this.immediateMode.geometry.lineVertexColors.length > 0);
   this._setStrokeUniforms(shader);
   for (const buff of this.immediateMode.buffers.stroke) {
     buff._prepareBuffer(this.immediateMode.geometry, shader);

From b51b70a70af49a9ce6131e55301ca03902204a35 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 10:00:34 +0900
Subject: [PATCH 06/18] Added a process to calculate the flag

Added a process to calculate the flag whether to color the line for each vertex.
Although it cannot be used when drawing primitives, we prepare a process to calculate the flag even in retainedMode
so that it can be used when constructing your own using p5.Geometry.
---
 src/webgl/p5.RendererGL.Retained.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webgl/p5.RendererGL.Retained.js b/src/webgl/p5.RendererGL.Retained.js
index 15737fcae5..05b9673f45 100644
--- a/src/webgl/p5.RendererGL.Retained.js
+++ b/src/webgl/p5.RendererGL.Retained.js
@@ -119,6 +119,7 @@ p5.RendererGL.prototype.drawBuffers = function(gId) {
 
   if (this._doStroke && geometry.lineVertexCount > 0) {
     const strokeShader = this._getRetainedStrokeShader();
+    this._useLineColor = (geometry.model.lineVertexColors.length > 0);
     this._setStrokeUniforms(strokeShader);
     for (const buff of this.retainedMode.buffers.stroke) {
       buff._prepareBuffer(geometry, strokeShader);

From e369748af12cc5ee30c1121049db04341cb1f9a2 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 10:10:47 +0900
Subject: [PATCH 07/18]  Added a process for per-vertex coloring

In the _edgesToVertices function, we process the array that stores the data for coloring the lines and synchronizes it with the array used to draw the lines.
Also, where p5.Geometry is prepared, prepare a new array to store the data used to color the lines.
---
 src/webgl/p5.Geometry.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index b60952be67..f4af14da58 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -45,6 +45,7 @@ p5.Geometry = function(detailX, detailY, callback) {
   //based on faces for most objects;
   this.edges = [];
   this.vertexColors = [];
+  this.lineVertexColors = [];
   this.detailX = detailX !== undefined ? detailX : 1;
   this.detailY = detailY !== undefined ? detailY : 1;
   this.dirtyFlags = {};
@@ -62,6 +63,7 @@ p5.Geometry.prototype.reset = function() {
   this.vertices.length = 0;
   this.edges.length = 0;
   this.vertexColors.length = 0;
+  this.lineVertexColors.length = 0;
   this.vertexNormals.length = 0;
   this.uvs.length = 0;
 
@@ -238,12 +240,16 @@ p5.Geometry.prototype._makeTriangleEdges = function() {
  * @chainable
  */
 p5.Geometry.prototype._edgesToVertices = function() {
+  const data = this.lineVertexColors.slice();
+  this.lineVertexColors.length = 0;
   this.lineVertices.length = 0;
   this.lineNormals.length = 0;
 
   for (let i = 0; i < this.edges.length; i++) {
-    const begin = this.vertices[this.edges[i][0]];
-    const end = this.vertices[this.edges[i][1]];
+    const e0 = this.edges[i][0];
+    const e1 = this.edges[i][1];
+    var begin = this.vertices[e0];
+    var end = this.vertices[e1];
     const dir = end
       .copy()
       .sub(begin)
@@ -260,6 +266,13 @@ p5.Geometry.prototype._edgesToVertices = function() {
     dirSub.push(-1);
     this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
     this.lineVertices.push(a, b, c, c, b, d);
+    if(data.length > 0){
+      var beginColor = [data[4*e0], data[4*e0+1], data[4*e0+2], data[4*e0+3]];
+      var endColor = [data[4*e1], data[4*e1+1], data[4*e1+2], data[4*e1+3]];
+      this.lineVertexColors.push(
+        beginColor, beginColor, endColor, endColor, beginColor, endColor
+      );
+    }
   }
   return this;
 };

From c54b7a94b1357ff9b5e1b88008553f242b6a1027 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 10:52:23 +0900
Subject: [PATCH 08/18] Shorten lines that are too long

There was a line with a long number of characters, so I shortened it with a line break.
---
 src/webgl/p5.RendererGL.Immediate.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/webgl/p5.RendererGL.Immediate.js b/src/webgl/p5.RendererGL.Immediate.js
index ae8e7488cd..7cf8f54108 100644
--- a/src/webgl/p5.RendererGL.Immediate.js
+++ b/src/webgl/p5.RendererGL.Immediate.js
@@ -412,7 +412,8 @@ p5.RendererGL.prototype._drawImmediateFill = function() {
 p5.RendererGL.prototype._drawImmediateStroke = function() {
   const gl = this.GL;
   const shader = this._getImmediateStrokeShader();
-  this._useLineColor = (this.immediateMode.geometry.lineVertexColors.length > 0);
+  this._useLineColor　=
+    (this.immediateMode.geometry.lineVertexColors.length > 0);
   this._setStrokeUniforms(shader);
   for (const buff of this.immediateMode.buffers.stroke) {
     buff._prepareBuffer(this.immediateMode.geometry, shader);

From e951bcb371aabf09a2b6d68416689654264f6b4e Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Thu, 22 Dec 2022 10:55:05 +0900
Subject: [PATCH 09/18] delete Irregular whitespace

Irregular whitespace existed, so delete it
---
 src/webgl/p5.RendererGL.Immediate.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webgl/p5.RendererGL.Immediate.js b/src/webgl/p5.RendererGL.Immediate.js
index 7cf8f54108..9da349f494 100644
--- a/src/webgl/p5.RendererGL.Immediate.js
+++ b/src/webgl/p5.RendererGL.Immediate.js
@@ -412,7 +412,7 @@ p5.RendererGL.prototype._drawImmediateFill = function() {
 p5.RendererGL.prototype._drawImmediateStroke = function() {
   const gl = this.GL;
   const shader = this._getImmediateStrokeShader();
-  this._useLineColor　=
+  this._useLineColor =
     (this.immediateMode.geometry.lineVertexColors.length > 0);
   this._setStrokeUniforms(shader);
   for (const buff of this.immediateMode.buffers.stroke) {

From 86a99f8e1df792c20f54e59d6f945c9a5d324ad4 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 02:02:45 +0900
Subject: [PATCH 10/18] Changed the variable name

Changed some variable names to make it easier to understand what they are doing.
---
 src/webgl/p5.Geometry.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index f4af14da58..90e3fe792d 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -240,16 +240,16 @@ p5.Geometry.prototype._makeTriangleEdges = function() {
  * @chainable
  */
 p5.Geometry.prototype._edgesToVertices = function() {
-  const data = this.lineVertexColors.slice();
+  const lineColorData = this.lineVertexColors.slice();
   this.lineVertexColors.length = 0;
   this.lineVertices.length = 0;
   this.lineNormals.length = 0;
 
   for (let i = 0; i < this.edges.length; i++) {
-    const e0 = this.edges[i][0];
-    const e1 = this.edges[i][1];
-    var begin = this.vertices[e0];
-    var end = this.vertices[e1];
+    const endIndex0 = this.edges[i][0];
+    const endIndex1 = this.edges[i][1];
+    var begin = this.vertices[endIndex0];
+    var end = this.vertices[endIndex1];
     const dir = end
       .copy()
       .sub(begin)
@@ -266,9 +266,11 @@ p5.Geometry.prototype._edgesToVertices = function() {
     dirSub.push(-1);
     this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
     this.lineVertices.push(a, b, c, c, b, d);
-    if(data.length > 0){
-      var beginColor = [data[4*e0], data[4*e0+1], data[4*e0+2], data[4*e0+3]];
-      var endColor = [data[4*e1], data[4*e1+1], data[4*e1+2], data[4*e1+3]];
+    if (data.length > 0) {
+      var beginColor = [lineColorData[4*endIndex0], lineColorData[4*endIndex0+1],
+                        lineColorData[4*endIndex0+2], lineColorData[4*endIndex0+3]];
+      var endColor = [lineColorData[4*endIndex1], lineColorData[4*endIndex1+1],
+                      lineColorData[4*endIndex1+2], lineColorData[4*endIndex1+3]];
       this.lineVertexColors.push(
         beginColor, beginColor, endColor, endColor, beginColor, endColor
       );

From 2c851c338eae0c9ae38893c1622b599b649fcca6 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 02:14:04 +0900
Subject: [PATCH 11/18] Some lines have been shortened slightly.

The line length was over, so I prepared a variable and shortened it a little.
---
 src/webgl/p5.Geometry.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index 90e3fe792d..18f137fadf 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -267,10 +267,12 @@ p5.Geometry.prototype._edgesToVertices = function() {
     this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
     this.lineVertices.push(a, b, c, c, b, d);
     if (data.length > 0) {
-      var beginColor = [lineColorData[4*endIndex0], lineColorData[4*endIndex0+1],
-                        lineColorData[4*endIndex0+2], lineColorData[4*endIndex0+3]];
-      var endColor = [lineColorData[4*endIndex1], lineColorData[4*endIndex1+1],
-                      lineColorData[4*endIndex1+2], lineColorData[4*endIndex1+3]];
+      const offset0 = 4*endIndex0;
+      const offset1 = 4*endIndex1;
+      var beginColor = [lineColorData[offset0], lineColorData[offset0+1],
+      lineColorData[offset0+2], lineColorData[offset0+3]];
+      var endColor = [lineColorData[offset1], lineColorData[offset1+1],
+      lineColorData[offset1+2], lineColorData[offset1+3]];
       this.lineVertexColors.push(
         beginColor, beginColor, endColor, endColor, beginColor, endColor
       );

From 4d6178db6dee82c52791def7b92f75cab7cbfc5e Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 02:18:43 +0900
Subject: [PATCH 12/18]  add indent

I added a space because the indent was missing.
---
 src/webgl/p5.Geometry.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index 18f137fadf..4af74bd036 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -270,9 +270,9 @@ p5.Geometry.prototype._edgesToVertices = function() {
       const offset0 = 4*endIndex0;
       const offset1 = 4*endIndex1;
       var beginColor = [lineColorData[offset0], lineColorData[offset0+1],
-      lineColorData[offset0+2], lineColorData[offset0+3]];
+        lineColorData[offset0+2], lineColorData[offset0+3]];
       var endColor = [lineColorData[offset1], lineColorData[offset1+1],
-      lineColorData[offset1+2], lineColorData[offset1+3]];
+        lineColorData[offset1+2], lineColorData[offset1+3]];
       this.lineVertexColors.push(
         beginColor, beginColor, endColor, endColor, beginColor, endColor
       );

From a04d12e196f302cc8e75538887f66110ba4c35c9 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 02:25:19 +0900
Subject: [PATCH 13/18]  Fixed because I forgot to change the name

I didn't change the name completely when changing data to lineColorData, so I fixed it. I'm sorry...
---
 src/webgl/p5.Geometry.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index 4af74bd036..973beccf59 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -266,7 +266,7 @@ p5.Geometry.prototype._edgesToVertices = function() {
     dirSub.push(-1);
     this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
     this.lineVertices.push(a, b, c, c, b, d);
-    if (data.length > 0) {
+    if (lineColorData.length > 0) {
       const offset0 = 4*endIndex0;
       const offset1 = 4*endIndex1;
       var beginColor = [lineColorData[offset0], lineColorData[offset0+1],

From a570ddf3b7fda734a3e7ca6fdd7fd88b66d6c34e Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 02:34:34 +0900
Subject: [PATCH 14/18]  Changed to receive only vColor

I decided to do the branch processing in the vertexShader, so I changed it so that it only receives vColor.
---
 src/webgl/shaders/line.frag | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/webgl/shaders/line.frag b/src/webgl/shaders/line.frag
index a27828b7ca..06413a7ba6 100644
--- a/src/webgl/shaders/line.frag
+++ b/src/webgl/shaders/line.frag
@@ -3,9 +3,6 @@ precision mediump int;
 
 varying vec4 vColor;
 
-uniform bool uUseLineColor;
-uniform vec4 uMaterialColor;
-
 void main() {
-  gl_FragColor = (uUseLineColor ? vColor : uMaterialColor);
+  gl_FragColor = vColor;
 }

From 42f66087d870d4088a55d213057eeaeba0bed98c Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 02:40:49 +0900
Subject: [PATCH 15/18] =?UTF-8?q?Separate=20vColor=20values=20=E2=80=8B?=
 =?UTF-8?q?=E2=80=8Bby=20flags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the vertexShader receive uUseLineColor and uMaterialColor, and let the value of uUseLineColor determine either aVertexColor or uMaterialColor as the vColor.
---
 src/webgl/shaders/line.vert | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/webgl/shaders/line.vert b/src/webgl/shaders/line.vert
index a48933cc51..ef70264ab7 100644
--- a/src/webgl/shaders/line.vert
+++ b/src/webgl/shaders/line.vert
@@ -22,6 +22,9 @@ uniform mat4 uModelViewMatrix;
 uniform mat4 uProjectionMatrix;
 uniform float uStrokeWeight;
 
+uniform bool uUseLineColor;
+uniform vec4 uMaterialColor;
+
 uniform vec4 uViewport;
 uniform int uPerspective;
 
@@ -98,5 +101,5 @@ void main() {
   gl_Position.xy = p.xy + offset.xy * curPerspScale;
   gl_Position.zw = p.zw;
   
-  vColor = aVertexColor;
+  vColor = (uUseLineColor ? aVertexColor : uMaterialColor);
 }

From 7d977e3fa7bc988cfd7274ef3d7ddd4cc72be0c1 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 10:06:22 +0900
Subject: [PATCH 16/18] Fix it so that you don't have to make a copy.

Create a new array, assign it to the array, and replace it at the end. This eliminates the need to make copies.
Also, I decided not to use offset0 and offset1 because I didn't think it was necessary to prepare extra variables.
---
 src/webgl/p5.Geometry.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js
index 973beccf59..3571761a17 100644
--- a/src/webgl/p5.Geometry.js
+++ b/src/webgl/p5.Geometry.js
@@ -240,8 +240,7 @@ p5.Geometry.prototype._makeTriangleEdges = function() {
  * @chainable
  */
 p5.Geometry.prototype._edgesToVertices = function() {
-  const lineColorData = this.lineVertexColors.slice();
-  this.lineVertexColors.length = 0;
+  const lineColorData = [];
   this.lineVertices.length = 0;
   this.lineNormals.length = 0;
 
@@ -266,18 +265,25 @@ p5.Geometry.prototype._edgesToVertices = function() {
     dirSub.push(-1);
     this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
     this.lineVertices.push(a, b, c, c, b, d);
-    if (lineColorData.length > 0) {
-      const offset0 = 4*endIndex0;
-      const offset1 = 4*endIndex1;
-      var beginColor = [lineColorData[offset0], lineColorData[offset0+1],
-        lineColorData[offset0+2], lineColorData[offset0+3]];
-      var endColor = [lineColorData[offset1], lineColorData[offset1+1],
-        lineColorData[offset1+2], lineColorData[offset1+3]];
-      this.lineVertexColors.push(
+    if (this.lineVertexColors.length > 0) {
+      var beginColor = [
+        this.lineVertexColors[4*endIndex0],
+        this.lineVertexColors[4*endIndex0+1],
+        this.lineVertexColors[4*endIndex0+2],
+        this.lineVertexColors[4*endIndex0+3]
+      ];
+      var endColor = [
+        this.lineVertexColors[4*endIndex1],
+        this.lineVertexColors[4*endIndex1+1],
+        this.lineVertexColors[4*endIndex1+2],
+        this.lineVertexColors[4*endIndex1+3]
+      ];
+      lineColorData.push(
         beginColor, beginColor, endColor, endColor, beginColor, endColor
       );
     }
   }
+  this.lineVertexColors = lineColorData;
   return this;
 };
 

From aea54f2a3d518b2fce41424f18248ffea6246f3a Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 24 Dec 2022 18:18:37 +0900
Subject: [PATCH 17/18] I fixed the missing semicolon.

A semicolon was missing at the end of the line, so I added it.
---
 src/webgl/shaders/line.frag | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webgl/shaders/line.frag b/src/webgl/shaders/line.frag
index 93a7e89f7f..38235635df 100644
--- a/src/webgl/shaders/line.frag
+++ b/src/webgl/shaders/line.frag
@@ -4,5 +4,5 @@ precision mediump int;
 varying vec4 vColor;
 
 void main() {
-  gl_FragColor = vec4(vColor.rgb, 1.) * vColor.a
+  gl_FragColor = vec4(vColor.rgb, 1.) * vColor.a;
 }

From a4600688ae2f1ab32880f64dc20174549164b0b5 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Wed, 28 Dec 2022 07:13:50 +0900
Subject: [PATCH 18/18] Added unit test for line color interpolation

Added a unit test to make sure that line colors are registered per vertex and interpolated properly when calling the stroke function just before the vertex function when drawing in immediateMode.
---
 test/unit/webgl/p5.RendererGL.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js
index 2ba5b41a3b..08d240cae3 100644
--- a/test/unit/webgl/p5.RendererGL.js
+++ b/test/unit/webgl/p5.RendererGL.js
@@ -1048,6 +1048,27 @@ suite('p5.RendererGL', function() {
         [-10, 0, 10]
       );
 
+      done();
+    });
+    test('strokes should interpolate colors between vertices', function(done) {
+      const renderer = myp5.createCanvas(512, 4, myp5.WEBGL);
+
+      // far left color: (242, 236, 40)
+      // far right color: (42, 36, 240)
+      // expected middle color: (142, 136, 140)
+
+      renderer.strokeWeight(4);
+      renderer.beginShape();
+      renderer.stroke(242, 236, 40);
+      renderer.vertex(-256, 0);
+      renderer.stroke(42, 36, 240);
+      renderer.vertex(256, 0);
+      renderer.endShape();
+
+      assert.deepEqual(myp5.get(0, 2), [242, 236, 40, 255]);
+      assert.deepEqual(myp5.get(256, 2), [142, 136, 140, 255]);
+      assert.deepEqual(myp5.get(511, 2), [42, 36, 240, 255]);
+
       done();
     });
   });