Fix p5.strands assignment to property swizzles

src/strands/strands_transpiler.js

@@ -218,7 +218,7 @@ function buildPropertyPath(memberExpr) {
     const propName = current.property.name || current.property.value;
     if (isSwizzle(propName)) {
       current = current.object;
-      break;
+      continue;
     }
     parts.unshift(propName);
     current = current.object;

src/webgl/3d_primitives.js

@@ -2733,6 +2733,8 @@ function primitives3D(p5, fn) {
       rect: wrap(this.rect, this),
       quad: wrap(this.quad, this),
       ellipse: wrap(this.ellipse, this),
+      circle: wrap(this.circle, this),
+      square: wrap(this.square, this),
       arc: wrap(this.arc, this),
       model: wrap(r.model),
       line: wrap(this.line, this),

test/unit/visual/cases/webgl.js

@@ -1465,6 +1465,38 @@ visualSuite('WebGL', function () {
       p5.instances(count).spline(-5, 5, 0, -2, -5, 0, 2, 5, 0, 5, -5, 0);
       screenshot();
     });
+
+    visualTest(
+      'conditional swizzle assignment inside of branching',
+      (p5, screenshot) => {
+        p5.createCanvas(50, 50, p5.WEBGL);
+        const shader = p5.baseMaterialShader().modify(
+          () => {
+            p5.worldInputs.begin();
+            // For the first instance, bump the circle vertices out to +/- 15
+            // to turn it into a square. The second instance remains a circle
+            if (p5.instanceIndex < 1) {
+              p5.worldInputs.position.x = p5.sign(p5.worldInputs.position.x) * 15;
+              p5.worldInputs.position.y = p5.sign(p5.worldInputs.position.y) * 15;
+            }
+            // Spread the instances out horizontally to be side by side
+            p5.worldInputs.position += [
+              (p5.instanceIndex - 0.5) * 30,
+              0,
+              0
+            ];
+            p5.worldInputs.end();
+          },
+          { p5 }
+        );
+        p5.background(200);
+        p5.noStroke();
+        p5.fill(255, 0, 0);
+        p5.shader(shader);
+        p5.instances(2).circle(0, 0, 20);
+        screenshot();
+      }
+    );
   });
 
   visualSuite('p5.strands', () => {

test/unit/visual/cases/webgpu.js

@@ -533,6 +533,38 @@ visualSuite('WebGPU', function () {
         await screenshot();
       }
     );
+
+    visualTest(
+      'conditional swizzle assignment inside of branching',
+      async function (p5, screenshot) {
+        await p5.createCanvas(50, 50, p5.WEBGPU);
+        const shader = p5.baseMaterialShader().modify(
+          () => {
+            p5.worldInputs.begin();
+            // For the first instance, bump the circle vertices out to +/- 15
+            // to turn it into a square. The second instance remains a circle
+            if (p5.instanceIndex < 1) {
+              p5.worldInputs.position.x = p5.sign(p5.worldInputs.position.x) * 15;
+              p5.worldInputs.position.y = p5.sign(p5.worldInputs.position.y) * 15;
+            }
+            // Spread the instances out horizontally to be side by side
+            p5.worldInputs.position += [
+              (p5.instanceIndex - 0.5) * 30,
+              0,
+              0
+            ];
+            p5.worldInputs.end();
+          },
+          { p5 }
+        );
+        p5.background(200);
+        p5.noStroke();
+        p5.fill(255, 0, 0);
+        p5.shader(shader);
+        p5.instances(2).circle(0, 0, 20);
+        await screenshot();
+      }
+    );
   });
 
   visualTest(

test/unit/visual/screenshots/WebGL/instanced randering/conditional swizzle assignment inside of branching/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}

test/unit/visual/screenshots/WebGPU/Shaders/conditional swizzle assignment inside of branching/metadata.json

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}