Add comments about duck typing usage

Author: davepagurek

src/color/p5.Color.js

@@ -61,7 +61,11 @@ class Color {
   static #colorjsMaxes = {};
   static #grayscaleMap = {};
 
-  // For duck typing
+  // This property is here where duck typing (checking if obj.isColor) needs
+  // to be used over more standard type checking (obj instanceof Color). This
+  // needs to happen where we are building multiple files, such as in p5.webgpu.js,
+  // where if we `import { Color }` directly, it will be a separate copy of the
+  // Color class from the one imported in the main p5.js bundle.
   isColor = true;
 
   // Used to add additional color modes to p5.js

src/math/p5.Vector.js

@@ -48,6 +48,12 @@ class Vector {
       this.dimensions = dimensions;
       this._values = values;
     }
+
+    // This property is here where duck typing (checking if obj.isVector) needs
+    // to be used over more standard type checking (obj instanceof Vector). This
+    // needs to happen where we are building multiple files, such as in p5.webgpu.js,
+    // where if we `import { Vector }` directly, it will be a separate copy of the
+    // Vector class from the one imported in the main p5.js bundle.
     this.isVector = true;
   }
 

src/webgl/p5.Shader.js

@@ -1099,6 +1099,10 @@ class Shader {
       return;
     }
 
+    // In p5.strands-related code, where some of the code may be in
+    // p5.webgpu.js instead of the main p5.js build, we generally use
+    // duck typing instead of instanceof to avoid accidentally importing
+    // and comparing against a separate copy of p5 classes
     if (data?.isVector) {
       data = data.values.length !== data.dimensions ? data.values.slice(0, data.dimensions) : data.values;
     } else if (data?.isColor) {

src/webgpu/p5.RendererWebGPU.js

@@ -1869,6 +1869,9 @@ function rendererWebGPU(p5, fn) {
     // value: number or number[] - the data to write
     _packField(field, value, floatView, dataView, baseOffset) {
       if (value === undefined) return;
+
+      // Duck typing instead of instanceof to avoid importing a separate
+      // copy of the Color/Vector classes
       if (value?.isVector) {
         value = value.values.length !== value.dimensions ? value.values.slice(0, value.dimensions) : value.values;
       } else if (value?.isColor) {
@@ -3113,6 +3116,8 @@ ${hookUniformFields}}
     // Maps a plain JS value to the WGSL type string that represents it in a struct.
     _jsValueToWgslType(value) {
       if (typeof value === 'number') return 'f32';
+      // Duck typing instead of instanceof to avoid importing a separate
+      // copy of the Color/Vector classes
       if (value?.isVector) {
         if (value.dimensions === 2) return 'vec2f';
         if (value.dimensions === 3) return 'vec3f';
@@ -3148,6 +3153,8 @@ ${hookUniformFields}}
             value !== null &&
             typeof value === 'object' &&
             !Array.isArray(value) &&
+            // Duck typing instead of instanceof to avoid importing a separate
+            // copy of the Color/Vector classes
             !value?.isVector &&
             !value?.isColor
           ) {