Fix || and && operators in p5.strands if conditions

Add LogicalExpression handler to transpile logical operators to .or() and .and()
method calls. Fixes #8358.

Author: Aayushdev18

src/strands/strands_transpiler.js

@@ -275,6 +275,37 @@ const ASTCallbacks = {
       };
       node.arguments = [node.right];
     },
+    LogicalExpression(node, _state, ancestors) {
+      // Don't convert uniform default values to node methods, as
+      // they should be evaluated at runtime, not compiled.
+      if (ancestors.some(nodeIsUniform)) { return; }
+      // If the left hand side of an expression is one of these types,
+      // we should construct a node from it.
+      const unsafeTypes = ['Literal', 'ArrayExpression', 'Identifier'];
+      if (unsafeTypes.includes(node.left.type)) {
+        const leftReplacementNode = {
+          type: 'CallExpression',
+          callee: {
+            type: 'Identifier',
+            name: '__p5.strandsNode',
+          },
+          arguments: [node.left]
+        }
+        node.left = leftReplacementNode;
+      }
+      // Replace the logical operator with a call expression
+      // in other words a call to BaseNode.or(), .and() etc.
+      node.type = 'CallExpression';
+      node.callee = {
+        type: 'MemberExpression',
+        object: node.left,
+        property: {
+          type: 'Identifier',
+          name: replaceBinaryOperator(node.operator),
+        },
+      };
+      node.arguments = [node.right];
+    },
     IfStatement(node, _state, ancestors) {
       if (ancestors.some(nodeIsUniform)) { return; }
       // Transform if statement into strandsIf() call

test/unit/webgl/p5.Shader.js

@@ -714,6 +714,52 @@ suite('p5.Shader', function() {
         assert.approximately(pixelColor[1], 255, 5); // Green channel should be 255
         assert.approximately(pixelColor[2], 255, 5); // Blue channel should be 255
       });
+      test('handle if statement with || (OR) operator', () => {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const testShader = myp5.baseMaterialShader().modify(() => {
+          myp5.getPixelInputs(inputs => {
+            let c = [1, 1, 1, 1];
+            if (myp5.abs(inputs.texCoord.x - 0.5) > 0.2 || myp5.abs(inputs.texCoord.y - 0.5) > 0.2) {
+              c = [1, 0, 0, 1];
+            }
+            inputs.color = c;
+            return inputs;
+          });
+        }, { myp5 });
+        myp5.noStroke();
+        myp5.shader(testShader);
+        myp5.plane(myp5.width, myp5.height);
+        const centerPixel = myp5.get(25, 25);
+        assert.approximately(centerPixel[0], 255, 5);
+        assert.approximately(centerPixel[1], 255, 5);
+        assert.approximately(centerPixel[2], 255, 5);
+        const edgePixel = myp5.get(5, 25);
+        assert.approximately(edgePixel[0], 255, 5);
+        assert.approximately(edgePixel[1], 0, 5);
+        assert.approximately(edgePixel[2], 0, 5);
+      });
+      test('handle if statement with && (AND) operator', () => {
+        myp5.createCanvas(50, 50, myp5.WEBGL);
+        const testShader = myp5.baseMaterialShader().modify(() => {
+          const condition1 = myp5.uniformFloat(() => 1.0);
+          const condition2 = myp5.uniformFloat(() => 1.0);
+          myp5.getPixelInputs(inputs => {
+            let color = myp5.float(0.0);
+            if (condition1 > 0.5 && condition2 > 0.5) {
+              color = myp5.float(1.0);
+            }
+            inputs.color = [color, color, color, 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], 255, 5);
+        assert.approximately(pixelColor[1], 255, 5);
+        assert.approximately(pixelColor[2], 255, 5);
+      });
       // Keep one direct API test for completeness
       test('handle direct StrandsIf API usage', () => {
         myp5.createCanvas(50, 50, myp5.WEBGL);