Handle swizzle assignments

Author: davepagurek

src/strands/strands_glslBackend.js

@@ -200,22 +200,15 @@ export const glslBackend = {
     // dependsOn[0] = targetNodeID, dependsOn[1] = sourceNodeID
     const targetNodeID = node.dependsOn[0];
     const sourceNodeID = node.dependsOn[1];
-    const targetNode = getNodeDataFromID(dag, targetNodeID);
-    
-    // Check if this is a varying variable assignment (target has identifier)
-    let targetName;
-    if (targetNode && targetNode.identifier) {
-      targetName = targetNode.identifier; // Use variable identifier directly
-    } else {
-      targetName = generationContext.tempNames[targetNodeID]; // Use temp name for phi nodes
-    }
 
+    // Generate the target expression (could be variable or swizzle)
+    const targetExpr = this.generateExpression(generationContext, dag, targetNodeID);
     const sourceExpr = this.generateExpression(generationContext, dag, sourceNodeID);
     const semicolon = generationContext.suppressSemicolon ? '' : ';';
 
     // Generate assignment if we have both target and source
-    if (targetName && sourceExpr && targetName !== sourceExpr) {
-      generationContext.write(`${targetName} = ${sourceExpr}${semicolon}`);
+    if (targetExpr && sourceExpr && targetExpr !== sourceExpr) {
+      generationContext.write(`${targetExpr} = ${sourceExpr}${semicolon}`);
     }
   },
   generateDeclaration(generationContext, dag, nodeID) {

src/strands/strands_node.js

@@ -1,5 +1,5 @@
 import { swizzleTrap, primitiveConstructorNode, variableNode } from './ir_builders';
-import { BaseType, NodeType } from './ir_types';
+import { BaseType, NodeType, OpCode } from './ir_types';
 import { getNodeDataFromID, createNodeData, getOrCreateNode } from './ir_dag';
 import { recordInBasicBlock } from './ir_cfg';
 export class StrandsNode {
@@ -75,6 +75,72 @@ export class StrandsNode {
 
     return this;
   }
+  bridgeSwizzle(swizzlePattern, value) {
+    const { dag, cfg } = this.strandsContext;
+    const orig = getNodeDataFromID(dag, this.id);
+    const baseType = orig?.baseType ?? BaseType.FLOAT;
+    
+    let newValueID;
+    if (value instanceof StrandsNode) {
+      newValueID = value.id;
+    } else {
+      const newVal = primitiveConstructorNode(
+        this.strandsContext, 
+        { baseType, dimension: this.dimension }, 
+        value
+      );
+      newValueID = newVal.id;
+    }
+    
+    // For varying variables, create swizzle assignment
+    if (this._originalIdentifier) {
+      // Create a variable node for the target with swizzle
+      const { id: targetVarID } = variableNode(
+        this.strandsContext,
+        { baseType: this._originalBaseType, dimension: this._originalDimension },
+        this._originalIdentifier
+      );
+      
+      // Create a swizzle node for the target (myVarying.xyz)
+      const swizzleNode = createNodeData({
+        nodeType: NodeType.OPERATION,
+        opCode: OpCode.Unary.SWIZZLE,
+        baseType: this._originalBaseType,
+        dimension: swizzlePattern.length, // xyz = 3, xy = 2, etc.
+        swizzle: swizzlePattern,
+        dependsOn: [targetVarID]
+      });
+      const swizzleID = getOrCreateNode(dag, swizzleNode);
+      
+      // Create assignment node: myVarying.xyz = value
+      const assignmentNode = createNodeData({
+        nodeType: NodeType.ASSIGNMENT,
+        dependsOn: [swizzleID, newValueID],
+        phiBlocks: []
+      });
+      const assignmentID = getOrCreateNode(dag, assignmentNode);
+      recordInBasicBlock(cfg, cfg.currentBlock, assignmentID);
+      
+      // Track for global assignments processing in the current hook context
+      this.strandsContext.globalAssignments.push(assignmentID);
+      
+      // Simply update this node to be a variable node with the identifier
+      // This ensures it always generates the variable name in expressions
+      const variableNodeData = createNodeData({
+        nodeType: NodeType.VARIABLE,
+        baseType: this._originalBaseType,
+        dimension: this._originalDimension,
+        identifier: this._originalIdentifier
+      });
+      const variableID = getOrCreateNode(dag, variableNodeData);
+      
+      this.id = variableID; // Point to the variable node, not the assignment node
+    } else {
+      this.id = newValueID; // For non-varying variables, just update to new value
+    }
+    
+    return this;
+  }
   getValue() {
     if (this._originalIdentifier) {
       const { id, dimension } = variableNode(

src/strands/strands_transpiler.js

@@ -178,6 +178,7 @@ const ASTCallbacks = {
         node.operator = '=';
         node.right = rightReplacementNode;
       }
+      // Handle direct varying variable assignment: myVarying = value
       if (_state.varyings[node.left.name]) {
         node.type = 'ExpressionStatement';
         node.expression = {
@@ -196,6 +197,51 @@ const ASTCallbacks = {
           arguments: [node.right],
         }
       }
+      // Handle swizzle assignment to varying variable: myVarying.xyz = value
+      // Note: node.left.object might be worldPos.getValue() due to prior Identifier transformation
+      else if (node.left.type === 'MemberExpression') {
+        let varyingName = null;
+        
+        // Check if it's a direct identifier: myVarying.xyz
+        if (node.left.object.type === 'Identifier' && _state.varyings[node.left.object.name]) {
+          varyingName = node.left.object.name;
+        }
+        // Check if it's a getValue() call: myVarying.getValue().xyz
+        else if (node.left.object.type === 'ExpressionStatement' &&
+                 node.left.object.expression?.type === 'CallExpression' &&
+                 node.left.object.expression.callee?.type === 'MemberExpression' &&
+                 node.left.object.expression.callee.property?.name === 'getValue' &&
+                 node.left.object.expression.callee.object?.type === 'Identifier' &&
+                 _state.varyings[node.left.object.expression.callee.object.name]) {
+          varyingName = node.left.object.expression.callee.object.name;
+        }
+        
+        if (varyingName) {
+          const swizzlePattern = node.left.property.name;
+          node.type = 'ExpressionStatement';
+          node.expression = {
+            type: 'CallExpression',
+            callee: {
+              type: 'MemberExpression',
+              object: {
+                type: 'Identifier',
+                name: varyingName
+              },
+              property: {
+                type: 'Identifier',
+                name: 'bridgeSwizzle',
+              }
+            },
+            arguments: [
+              {
+                type: 'Literal',
+                value: swizzlePattern
+              },
+              node.right
+            ],
+          }
+        }
+      }
     },
     BinaryExpression(node, _state, ancestors) {
       // Don't convert uniform default values to node methods, as

test/unit/webgl/p5.Shader.js

@@ -1100,7 +1100,7 @@ suite('p5.Shader', function() {
         assert.approximately(cornerColor[2], 0, 5);
       });
 
-      test.only('handle passing a value from a vertex hook to a fragment hook', () => {
+      test('handle passing a value from a vertex hook to a fragment hook', () => {
         myp5.createCanvas(50, 50, myp5.WEBGL);
 
         const testShader = myp5.baseMaterialShader().modify(() => {
@@ -1114,9 +1114,6 @@ suite('p5.Shader', function() {
           });
         }, { myp5 });
 
-        console.log('VERTEX SHADER OUTPUT:');
-        console.log(testShader.vertSrc());
-
         myp5.background(0, 0, 255); // Make the background blue to tell it apart
         myp5.noStroke();
         myp5.shader(testShader);