Fix for loops not traversing minified code properly

Author: davepagurek

src/strands/strands_for.js

@@ -359,7 +359,7 @@ export class StrandsFor {
     CFG.popBlock(cfg);
 
     const loopVarNode = createStrandsNode(phiNode.id, phiNode.dimension, this.strandsContext);
-    this.bodyResults = this.bodyCb(loopVarNode, phiVars);
+    this.bodyResults = this.bodyCb(loopVarNode, phiVars) || {};
     for (const key in this.bodyResults) {
       this.bodyResults[key] = this.strandsContext.p5.strandsNode(this.bodyResults[key]);
     }

src/strands/strands_transpiler.js

@@ -679,46 +679,71 @@ const ASTCallbacks = {
 
       // Analyze which outer scope variables are assigned in the loop body
       const assignedVars = new Set();
-      const analyzeBlock = (body, parentLocalVars = new Set()) => {
-        if (body.type !== 'BlockStatement') return;
 
-        // First pass: collect variable declarations within this block
-        const localVars = new Set([...parentLocalVars]);
-        for (const stmt of body.body) {
+      // Helper function to check if a block contains strands control flow calls as immediate children
+      const blockContainsStrandsControlFlow = (node) => {
+        if (node.type !== 'BlockStatement') return false;
+        return node.body.some(stmt => {
+          // Check for variable declarations with strands control flow init
           if (stmt.type === 'VariableDeclaration') {
-            for (const decl of stmt.declarations) {
-              if (decl.id.type === 'Identifier') {
-                localVars.add(decl.id.name);
-              }
-            }
+            const match = stmt.declarations.some(decl =>
+              decl.init?.type === 'CallExpression' &&
+              (
+                (
+                  decl.init?.callee?.type === 'MemberExpression' &&
+                  decl.init?.callee?.object?.type === 'Identifier' &&
+                  decl.init?.callee?.object?.name === '__p5' &&
+                  (decl.init?.callee?.property?.name === 'strandsFor' ||
+                    decl.init?.callee?.property?.name === 'strandsIf')
+                ) ||
+                (
+                  decl.init?.callee?.type === 'Identifier' &&
+                  (decl.init?.callee?.name === '__p5.strandsFor' ||
+                    decl.init?.callee?.name === '__p5.strandsIf')
+                )
+              )
+            );
+            return match
+          }
+          return false;
+        });
+      };
+
+      // First pass: collect all variable declarations in the body
+      const localVars = new Set();
+      ancestor(bodyFunction.body, {
+        VariableDeclarator(node, ancestors) {
+          // Skip if we're inside a block that contains strands control flow
+          if (ancestors.some(blockContainsStrandsControlFlow)) return;
+          if (node.id.type === 'Identifier') {
+            localVars.add(node.id.name);
           }
         }
+      });
+
+      // Second pass: find assignments to non-local variables using acorn-walk
+      ancestor(bodyFunction.body, {
+        AssignmentExpression(node, ancestors) {
+          // Skip if we're inside a block that contains strands control flow
+          if (ancestors.some(blockContainsStrandsControlFlow)) {
+            return
+          }
 
-        // Second pass: find assignments to non-local variables
-        for (const stmt of body.body) {
-          if (stmt.type === 'ExpressionStatement' &&
-              stmt.expression.type === 'AssignmentExpression') {
-            const left = stmt.expression.left;
-            if (left.type === 'Identifier') {
-              // Direct variable assignment: x = value
-              if (!localVars.has(left.name)) {
-                assignedVars.add(left.name);
-              }
-            } else if (left.type === 'MemberExpression' &&
-                       left.object.type === 'Identifier') {
-              // Property assignment: obj.prop = value (includes swizzles)
-              if (!localVars.has(left.object.name)) {
-                assignedVars.add(left.object.name);
-              }
+          const left = node.left;
+          if (left.type === 'Identifier') {
+            // Direct variable assignment: x = value
+            if (!localVars.has(left.name)) {
+              assignedVars.add(left.name);
+            }
+          } else if (left.type === 'MemberExpression' &&
+                     left.object.type === 'Identifier') {
+            // Property assignment: obj.prop = value (includes swizzles)
+            if (!localVars.has(left.object.name)) {
+              assignedVars.add(left.object.name);
             }
-          } else if (stmt.type === 'BlockStatement') {
-            // Recursively analyze nested block statements, passing down local vars
-            analyzeBlock(stmt, localVars);
           }
         }
-      };
-
-      analyzeBlock(bodyFunction.body);
+      });
 
       if (assignedVars.size > 0) {
         // Add copying, reference replacement, and return statements similar to if statements

test/unit/webgl/p5.Shader.js

@@ -898,6 +898,35 @@ suite('p5.Shader', function() {
         assert.approximately(pixelColor[2], 0, 5);   // 0.0 * 255 = 0
       });
 
+      test('handle for loop modifying multiple variables after minification', () => {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+
+        const testShader = myp5.baseMaterialShader().modify(() => {
+          myp5.getPixelInputs(inputs => {
+            let red = myp5.float(0.0);
+            let green = myp5.float(0.0);
+
+            for (let i = 0; i < 4; i++) {
+              // Note the comma!
+              red = red + 0.125,    // 4 * 0.125 = 0.5
+                green = green + 0.25; // 4 * 0.25 = 1.0
+            }
+
+            inputs.color = [red, green, 0.0, 1.0];
+            return inputs;
+          });
+        }, { myp5 });
+
+        myp5.noStroke();
+        myp5.shader(testShader);
+        myp5.plane(myp5.width, myp5.height);
+
+        const pixelColor = myp5.get(25, 25);
+        assert.approximately(pixelColor[0], 127, 5); // 0.5 * 255 ≈ 127
+        assert.approximately(pixelColor[1], 255, 5); // 1.0 * 255 = 255
+        assert.approximately(pixelColor[2], 0, 5);   // 0.0 * 255 = 0
+      });
+
       test('handle for loop with conditional inside', () => {
         myp5.createCanvas(50, 50, myp5.WEBGL);