Sep 18, 2025 · Jun 24, 2025 · Jun 27, 2025 · Jul 1, 2025 · Jul 5, 2025 · Jul 7, 2025
diff --git a/preview/global/sketch.js b/preview/global/sketch.js
 p5.disableFriendlyErrors = true;

 function callback() {

  getFinalColor((col) => {
    let x = vec4(1);
    // return 1;
    return vec4(1).div(ivec4(1).mult(ivec4(2.0, 3.0, 2, 3)));
    let y = col.sub(-1,1,0,0);
    return col.add(y);
  });
 }

 }

 function draw(){

  orbitControl();
  background(0);
  shader(bloomShader);
  sphere(100)
 }
diff --git a/src/strands/GLSL_backend.js b/src/strands/GLSL_backend.js
 import { NodeType, OpCodeToSymbol, BlockType, OpCode } from "./utils";
 import { getNodeDataFromID } from "./directed_acyclic_graph";
 import { getNodeDataFromID, extractTypeInfo } from "./directed_acyclic_graph";
 import * as FES from './strands_FES'

 const TypeNames = {
  'float1': 'float',
  'float2': 'vec2',
  'float3': 'vec3',
  'float4': 'vec4',

  'int1':   'int',
  'int2':   'ivec2',
  'int3':   'ivec3',
  'int4':   'ivec4',

  'bool1':  'bool',
  'bool2':  'bvec2',
  'bool3':  'bvec3',
  'bool4':  'bvec4',

  'mat2':   'mat2x2',
  'mat3':   'mat3x3',
  'mat4':   'mat4x4',
 }

 const cfgHandlers = {
  [BlockType.DEFAULT]: (blockID, strandsContext, generationContext) => {
    // const { dag, cfg } = strandsContext;
  [BlockType.IF_COND](blockID, strandsContext, generationContext) {
    const { dag, cfg } = strandsContext;
    const conditionID = cfg.blockConditions[blockID];
    const condExpr = glslBackend.generateExpression (dag, conditionID, generationContext);
    const condExpr = glslBackend.generateExpression(generationContext, dag, conditionID);
    generationContext.write(`if (${condExpr}) {`)
    generationContext.indent++;
    this[BlockType.DEFAULT](blockID, strandsContext, generationContext);
    }).join(', ')}) {`;
    return firstLine;
  },
  generateDataTypeName(baseType, dimension) {
    return baseType + dimension;

  getTypeName(baseType, dimension) {
    return TypeNames[baseType + dimension]
  },
  generateDeclaration() {

  generateDeclaration(generationContext, dag, nodeID) {
    const expr = this.generateExpression(generationContext, dag, nodeID);
    const tmp = `T${generationContext.nextTempID++}`;
    generationContext.tempNames[nodeID] = tmp;

    const T = extractTypeInfo(dag, nodeID);
    const typeName = this.getTypeName(T.baseType, T.dimension);
    return `${typeName} ${tmp} = ${expr};`;
  },

  generateReturn(generationContext, dag, nodeID) {

  },
  generateExpression(dag, nodeID, generationContext) {

  generateExpression(generationContext, dag, nodeID) {
    const node = getNodeDataFromID(dag, nodeID);
    if (generationContext.tempNames?.[nodeID]) {
      return generationContext.tempNames[nodeID];
      if (node.opCode === OpCode.Nary.CONSTRUCTOR) {
        if (node.dependsOn.length === 1 && node.dimension === 1) {
          console.log("AARK")
          return this.generateExpression(dag, node.dependsOn[0], generationContext);
          return this.generateExpression(generationContext,dag, node.dependsOn[0]);
        }
        const T = this.generateDataTypeName(node.baseType, node.dimension);
        const deps = node.dependsOn.map((dep) => this.generateExpression(dag, dep, generationContext));
        const T = this.getTypeName(node.baseType, node.dimension);
        const deps = node.dependsOn.map((dep) => this.generateExpression(generationContext, dag, dep));
        return `${T}(${deps.join(', ')})`;
      }
      if (node.opCode === OpCode.Nary.FUNCTION) {
        return "functioncall!";
      }
      if (node.dependsOn.length === 2) {
        const [lID, rID] = node.dependsOn;
        const left  = this.generateExpression(dag, lID, generationContext);
        const right = this.generateExpression(dag, rID, generationContext);
        const left  = this.generateExpression(generationContext, dag, lID);
        const right = this.generateExpression(generationContext, dag, rID);
        const opSym = OpCodeToSymbol[node.opCode];
        if (useParantheses) {
          return `(${left} ${opSym} ${right})`;
      }
      if (node.dependsOn.length === 1) {
        const [i] = node.dependsOn;
        const val  = this.generateExpression(dag, i, generationContext);
        const val  = this.generateExpression(generationContext, dag, i);
        const sym  = OpCodeToSymbol[node.opCode];
        return `${sym}${val}`;
      }
      FES.internalError(`${node.nodeType} not working yet`)
    }
  },

  generateBlock(blockID, strandsContext, generationContext) {
    const type = strandsContext.cfg.blockTypes[blockID];
    const handler = cfgHandlers[type] || cfgHandlers[BlockType.DEFAULT];
diff --git a/src/strands/builder.js b/src/strands/builder.js
 import * as DAG from './directed_acyclic_graph'
 import * as CFG from './control_flow_graph'
 import * as FES from './strands_FES'
 import { NodeType, OpCode, BaseType,BasePriority } from './utils';
 import { NodeType, OpCode, BaseType,extractTypeInfo } from './utils';
 import { StrandsNode } from './user_API';

 //////////////////////////////////////////////
  return id;
 }

 export function extractTypeInfo(strandsContext, nodeID) {
  const dag = strandsContext.dag;
  const baseType = dag.baseTypes[nodeID];
  return {
    baseType,
    dimension: dag.dimensions[nodeID],
    priority: BasePriority[baseType],
  };
 }

 export function createBinaryOpNode(strandsContext, leftStrandsNode, rightArg, opCode) {
  const { dag, cfg } = strandsContext;
  // Construct a node for right if its just an array or number etc.
diff --git a/src/strands/code_generation.js b/src/strands/code_generation.js
 import { WEBGL } from '../core/constants';
 import { glslBackend } from './GLSL_backend';
 import { NodeType } from './utils';
 import { extractTypeInfo } from './builder';
 import { sortCFG } from './control_flow_graph';
 import { sortDAG } from './directed_acyclic_graph';

 let globalTempCounter = 0;
 let backend;

 function generateTopLevelDeclarations(strandsContext, dagOrder) {
 function generateTopLevelDeclarations(strandsContext,generationContext,dagOrder) {
  const usedCount = {};
  const dag = strandsContext.dag;
  for (const nodeID of dagOrder) {
    usedCount[nodeID] = (dag.usedBy[nodeID] || []).length;
  }

  const tempNames = {};
  const declarations = [];
  for (const nodeID of dagOrder) {
    if (dag.nodeTypes[nodeID] !== NodeType.OPERATION) {
      continue;
    }

    if (usedCount[nodeID] > 0) {
      const expr = backend.generateExpression(dag, nodeID, { tempNames });
      const tmp = `T${globalTempCounter++}`;
      tempNames[nodeID] = tmp;

      const T = extractTypeInfo(strandsContext, nodeID);
      declarations.push(`${T.baseType+T.dimension} ${tmp} = ${expr};`);
      const newDeclaration = backend.generateDeclaration(generationContext, dag, nodeID);
      declarations.push(newDeclaration);
    }
  }

  return{declarations, tempNames };
  return declarations;
 }

 export function generateShaderCode(strandsContext) {
    const cfgSorted = sortCFG(cfg.outgoingEdges, entryBlockID);

    const generationContext = {
      ...generateTopLevelDeclarations(strandsContext, dagSorted),
      indent: 1,
      codeLines: [],
      write(line) {
        this.codeLines.push('  '.repeat(this.indent) + line);
      },
      dagSorted,
      tempNames: {},
      declarations: [],
      nextTempID: 0,
    };
    generationContext.declarations = generateTopLevelDeclarations(strandsContext, generationContext, dagSorted);


    generationContext.declarations.forEach(decl => generationContext.write(decl));
    for (const blockID of cfgSorted) {
      backend.generateBlock(blockID, strandsContext, generationContext);
    }

    const firstLine = backend.hookEntry(hookType);
    const finalExpression = `return ${backend.generateExpression(dag, rootNodeID, generationContext)};`;
    const finalExpression = `return ${backend.generateExpression(generationContext, dag, rootNodeID)};`;
    generationContext.write(finalExpression);
    console.log(hookType);
    hooksObj[hookType.name] = [firstLine, ...generationContext.codeLines, '}'].join('\n');
    hooksObj[`${hookType.returnType.typeName} ${hookType.name}`] = [firstLine, ...generationContext.codeLines, '}'].join('\n');
  }

  return hooksObj;
diff --git a/src/strands/directed_acyclic_graph.js b/src/strands/directed_acyclic_graph.js
 import { NodeTypeRequiredFields, NodeTypeToName } from './utils';
 import { NodeTypeRequiredFields, NodeTypeToName, BasePriority } from './utils';
 import * as FES from './strands_FES';

 /////////////////////////////////
  }
 }

 export function extractTypeInfo(dag, nodeID) {
  return {
    baseType: dag.baseTypes[nodeID],
    dimension: dag.dimensions[nodeID],
    priority: BasePriority[dag.baseTypes[nodeID]],
  };
 }
 /////////////////////////////////
 // Private functions
 /////////////////////////////////
diff --git a/src/strands/p5.strands.js b/src/strands/p5.strands.js
      // 3. Generate shader code hooks object from the IR
      // .......
      const hooksObject = generateShaderCode(strandsContext);
      console.log(hooksObject.getFinalColor);

      // Call modify with the generated hooks object
      // return oldModify.call(this, generatedModifyArgument);
      console.log(hooksObject);
      console.log(hooksObject['vec4 getFinalColor']);

      // Reset the strands runtime context
      // deinitStrandsContext(strandsContext);

      // Call modify with the generated hooks object
      return oldModify.call(this, hooksObject);
    }
    else {
      return oldModify.call(this, shaderModifier)
diff --git a/src/strands/user_API.js b/src/strands/user_API.js
      args.push(argObject);
    } else {
      const typeInfo = TypeInfoFromGLSLName[paramType.typeName];
      const arg = createVariableNode(strandsContext, typeInfo, param.name);
      args.push(arg)
      const id = createVariableNode(strandsContext, typeInfo, param.name);
      const arg = new StrandsNode(id);
      args.push(arg);
    }
  }
  return args;
      CFG.pushBlock(cfg, entryBlockID);

      const args = createHookArguments(strandsContext, hookType.parameters);
      const returned = hookUserCallback(args);
      const returned = hookUserCallback(...args);
      let returnedNode;

      const expectedReturnType = hookType.returnType;
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,9 @@
		p5.disableFriendlyErrors = true;

		function callback() {

		getFinalColor((col) => {
		let x = vec4(1);
		// return 1;
		return vec4(1).div(ivec4(1).mult(ivec4(2.0, 3.0, 2, 3)));
		let y = col.sub(-1,1,0,0);
		return col.add(y);
		});
		}

Expand All		@@ -15,5 +13,8 @@ async function setup(){
		}

		function draw(){

		orbitControl();
		background(0);
		shader(bloomShader);
		sphere(100)
		}
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,28 @@
		import { NodeType, OpCodeToSymbol, BlockType, OpCode } from "./utils";
		import { getNodeDataFromID } from "./directed_acyclic_graph";
		import { getNodeDataFromID, extractTypeInfo } from "./directed_acyclic_graph";
		import * as FES from './strands_FES'

		const TypeNames = {
		'float1': 'float',
		'float2': 'vec2',
		'float3': 'vec3',
		'float4': 'vec4',

		'int1': 'int',
		'int2': 'ivec2',
		'int3': 'ivec3',
		'int4': 'ivec4',

		'bool1': 'bool',
		'bool2': 'bvec2',
		'bool3': 'bvec3',
		'bool4': 'bvec4',

		'mat2': 'mat2x2',
		'mat3': 'mat3x3',
		'mat4': 'mat4x4',
		}

		const cfgHandlers = {
		[BlockType.DEFAULT]: (blockID, strandsContext, generationContext) => {
		// const { dag, cfg } = strandsContext;
Expand All		@@ -19,7 +40,7 @@ const cfgHandlers = {
		[BlockType.IF_COND](blockID, strandsContext, generationContext) {
		const { dag, cfg } = strandsContext;
		const conditionID = cfg.blockConditions[blockID];
		const condExpr = glslBackend.generateExpression (dag, conditionID, generationContext);
		const condExpr = glslBackend.generateExpression(generationContext, dag, conditionID);
		generationContext.write(`if (${condExpr}) {`)
		generationContext.indent++;
		this[BlockType.DEFAULT](blockID, strandsContext, generationContext);
Expand DownExpand Up		@@ -57,13 +78,26 @@ export const glslBackend = {
		}).join(', ')}) {`;
		return firstLine;
		},
		generateDataTypeName(baseType, dimension) {
		return baseType + dimension;

		getTypeName(baseType, dimension) {
		return TypeNames[baseType + dimension]
		},
		generateDeclaration() {

		generateDeclaration(generationContext, dag, nodeID) {
		const expr = this.generateExpression(generationContext, dag, nodeID);
		const tmp = `T${generationContext.nextTempID++}`;
		generationContext.tempNames[nodeID] = tmp;

		const T = extractTypeInfo(dag, nodeID);
		const typeName = this.getTypeName(T.baseType, T.dimension);
		return `${typeName} ${tmp} = ${expr};`;
		},

		generateReturn(generationContext, dag, nodeID) {

		},
		generateExpression(dag, nodeID, generationContext) {

		generateExpression(generationContext, dag, nodeID) {
		const node = getNodeDataFromID(dag, nodeID);
		if (generationContext.tempNames?.[nodeID]) {
		return generationContext.tempNames[nodeID];
Expand All		@@ -80,19 +114,19 @@ export const glslBackend = {
		if (node.opCode === OpCode.Nary.CONSTRUCTOR) {
		if (node.dependsOn.length === 1 && node.dimension === 1) {
		console.log("AARK")
		return this.generateExpression(dag, node.dependsOn[0], generationContext);
		return this.generateExpression(generationContext,dag, node.dependsOn[0]);
		}
		const T = this.generateDataTypeName(node.baseType, node.dimension);
		const deps = node.dependsOn.map((dep) => this.generateExpression(dag, dep, generationContext));
		const T = this.getTypeName(node.baseType, node.dimension);
		const deps = node.dependsOn.map((dep) => this.generateExpression(generationContext, dag, dep));
		return `${T}(${deps.join(', ')})`;
		}
		if (node.opCode === OpCode.Nary.FUNCTION) {
		return "functioncall!";
		}
		if (node.dependsOn.length === 2) {
		const [lID, rID] = node.dependsOn;
		const left = this.generateExpression(dag, lID, generationContext);
		const right = this.generateExpression(dag, rID, generationContext);
		const left = this.generateExpression(generationContext, dag, lID);
		const right = this.generateExpression(generationContext, dag, rID);
		const opSym = OpCodeToSymbol[node.opCode];
		if (useParantheses) {
		return `(${left} ${opSym} ${right})`;
Expand All		@@ -102,7 +136,7 @@ export const glslBackend = {
		}
		if (node.dependsOn.length === 1) {
		const [i] = node.dependsOn;
		const val = this.generateExpression(dag, i, generationContext);
		const val = this.generateExpression(generationContext, dag, i);
		const sym = OpCodeToSymbol[node.opCode];
		return `${sym}${val}`;
		}
Expand All		@@ -111,6 +145,7 @@ export const glslBackend = {
		FES.internalError(`${node.nodeType} not working yet`)
		}
		},

		generateBlock(blockID, strandsContext, generationContext) {
		const type = strandsContext.cfg.blockTypes[blockID];
		const handler = cfgHandlers[type] \|\| cfgHandlers[BlockType.DEFAULT];
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import * as DAG from './directed_acyclic_graph'
		import * as CFG from './control_flow_graph'
		import * as FES from './strands_FES'
		import { NodeType, OpCode, BaseType,BasePriority } from './utils';
		import { NodeType, OpCode, BaseType,extractTypeInfo } from './utils';
		import { StrandsNode } from './user_API';

		//////////////////////////////////////////////
Expand DownExpand Up		@@ -39,16 +39,6 @@ export function createVariableNode(strandsContext, typeInfo, identifier) {
		return id;
		}

		export function extractTypeInfo(strandsContext, nodeID) {
		const dag = strandsContext.dag;
		const baseType = dag.baseTypes[nodeID];
		return {
		baseType,
		dimension: dag.dimensions[nodeID],
		priority: BasePriority[baseType],
		};
		}

		export function createBinaryOpNode(strandsContext, leftStrandsNode, rightArg, opCode) {
		const { dag, cfg } = strandsContext;
		// Construct a node for right if its just an array or number etc.
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,38 +1,32 @@
		import { WEBGL } from '../core/constants';
		import { glslBackend } from './GLSL_backend';
		import { NodeType } from './utils';
		import { extractTypeInfo } from './builder';
		import { sortCFG } from './control_flow_graph';
		import { sortDAG } from './directed_acyclic_graph';

		let globalTempCounter = 0;
		let backend;

		function generateTopLevelDeclarations(strandsContext, dagOrder) {
		function generateTopLevelDeclarations(strandsContext,generationContext,dagOrder) {
		const usedCount = {};
		const dag = strandsContext.dag;
		for (const nodeID of dagOrder) {
		usedCount[nodeID] = (dag.usedBy[nodeID] \|\| []).length;
		}

		const tempNames = {};
		const declarations = [];
		for (const nodeID of dagOrder) {
		if (dag.nodeTypes[nodeID] !== NodeType.OPERATION) {
		continue;
		}

		if (usedCount[nodeID] > 0) {
		const expr = backend.generateExpression(dag, nodeID, { tempNames });
		const tmp = `T${globalTempCounter++}`;
		tempNames[nodeID] = tmp;

		const T = extractTypeInfo(strandsContext, nodeID);
		declarations.push(`${T.baseType+T.dimension} ${tmp} = ${expr};`);
		const newDeclaration = backend.generateDeclaration(generationContext, dag, nodeID);
		declarations.push(newDeclaration);
		}
		}

		return{declarations, tempNames };
		return declarations;
		}

		export function generateShaderCode(strandsContext) {
Expand All		@@ -47,25 +41,28 @@ export function generateShaderCode(strandsContext) {
		const cfgSorted = sortCFG(cfg.outgoingEdges, entryBlockID);

		const generationContext = {
		...generateTopLevelDeclarations(strandsContext, dagSorted),
		indent: 1,
		codeLines: [],
		write(line) {
		this.codeLines.push(' '.repeat(this.indent) + line);
		},
		dagSorted,
		tempNames: {},
		declarations: [],
		nextTempID: 0,
		};
		generationContext.declarations = generateTopLevelDeclarations(strandsContext, generationContext, dagSorted);


		generationContext.declarations.forEach(decl => generationContext.write(decl));
		for (const blockID of cfgSorted) {
		backend.generateBlock(blockID, strandsContext, generationContext);
		}

		const firstLine = backend.hookEntry(hookType);
		const finalExpression = `return ${backend.generateExpression(dag, rootNodeID, generationContext)};`;
		const finalExpression = `return ${backend.generateExpression(generationContext, dag, rootNodeID)};`;
		generationContext.write(finalExpression);
		console.log(hookType);
		hooksObj[hookType.name] = [firstLine, ...generationContext.codeLines, '}'].join('\n');
		hooksObj[`${hookType.returnType.typeName} ${hookType.name}`] = [firstLine, ...generationContext.codeLines, '}'].join('\n');
		}

		return hooksObj;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		import { NodeTypeRequiredFields, NodeTypeToName } from './utils';
		import { NodeTypeRequiredFields, NodeTypeToName, BasePriority } from './utils';
		import * as FES from './strands_FES';

		/////////////////////////////////
Expand DownExpand Up		@@ -67,6 +67,13 @@ export function getNodeDataFromID(graph, id) {
		}
		}

		export function extractTypeInfo(dag, nodeID) {
		return {
		baseType: dag.baseTypes[nodeID],
		dimension: dag.dimensions[nodeID],
		priority: BasePriority[dag.baseTypes[nodeID]],
		};
		}
		/////////////////////////////////
		// Private functions
		/////////////////////////////////
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -70,13 +70,14 @@ function strands(p5, fn) {
		// 3. Generate shader code hooks object from the IR
		// .......
		const hooksObject = generateShaderCode(strandsContext);
		console.log(hooksObject.getFinalColor);

		// Call modify with the generated hooks object
		// return oldModify.call(this, generatedModifyArgument);
		console.log(hooksObject);
		console.log(hooksObject['vec4 getFinalColor']);

		// Reset the strands runtime context
		// deinitStrandsContext(strandsContext);

		// Call modify with the generated hooks object
		return oldModify.call(this, hooksObject);
		}
		else {
		return oldModify.call(this, shaderModifier)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -152,8 +152,9 @@ function createHookArguments(strandsContext, parameters){
		args.push(argObject);
		} else {
		const typeInfo = TypeInfoFromGLSLName[paramType.typeName];
		const arg = createVariableNode(strandsContext, typeInfo, param.name);
		args.push(arg)
		const id = createVariableNode(strandsContext, typeInfo, param.name);
		const arg = new StrandsNode(id);
		args.push(arg);
		}
		}
		return args;
Expand All		@@ -174,7 +175,7 @@ export function createShaderHooksFunctions(strandsContext, fn, shader) {
		CFG.pushBlock(cfg, entryBlockID);

		const args = createHookArguments(strandsContext, hookType.parameters);
		const returned = hookUserCallback(args);
		const returned = hookUserCallback(...args);
		let returnedNode;

		const expectedReturnType = hookType.returnType;
Expand Down