animated pixel node, split node, time node, HSV node

Author: bandinopla

src/EditorNodes.ts

@@ -1,7 +1,7 @@
 import { Theme } from './colors/Theme';
 import { UVNode } from './nodes/attribute/UVNode';
 import { ColorNode } from './nodes/input/ColorNode';
-import { TimeNode } from './nodes/input/TimeNode';
+import { TimeNode } from './nodes/animation/TimeNode';
 import { tslInputNodes } from './nodes/input/TslInputNode';
 import { UniformValueNode } from './nodes/input/UniformValueNode';
 import { ValueNode } from './nodes/input/ValueNode';
@@ -20,6 +20,9 @@ import { MeshStandardNode } from './nodes/shader/MeshStandardNode';
 import { ImageTextureNode } from './nodes/texture/ImageTextureNode';
 import { BumpMapNode } from './nodes/vector/BumpMapNode';
 import { NormalMapNode } from './nodes/vector/NormalMapNode';
+import { AnimatedPixelNode } from './nodes/animation/AnimatedPixelNode';
+import { SpliNode } from './nodes/operators/SplitNode';
+import { HSVNode } from './nodes/input/HSVNode';
 
 // Define the type for class constructors that extend BaseType
 type Constructor<T extends Node> = new (...args: any[]) => T;
@@ -48,14 +51,22 @@ export const NodeTypes: NodeGroupType[] = [
                 name: 'Uniform Value',
                 id: 'uniform-value',
             },
-            { TypeClass: TimeNode, name:"time", id:"timer" },
             { TypeClass: ValueNode, name: 'Value', id: 'input-value' },
             { TypeClass: ColorNode, name: 'Color', id: 'color-value' },
+            { TypeClass: HSVNode, name:"HSV", id:"hsv"},
             { TypeClass: UVNode, name: 'UV', id: 'uv' },
             //{ TypeClass:PositionPropertiesNode, name:"Position", id:"position" },
             ...tslInputNodes,
         ],
     },
+    {
+        group:'Animation',
+        color: Theme.config.groupAnimation as string,
+        nodes: [
+            { TypeClass: TimeNode, name:"time", id:"timer" },
+            { TypeClass: AnimatedPixelNode, name:"Animated Pixel", id:"timer" },
+        ]
+    },
     {
         group: 'Logic',
         color: Theme.config.groupLogic as string,
@@ -104,6 +115,7 @@ export const NodeTypes: NodeGroupType[] = [
                 name: 'Swizzle',
                 id: 'swizzle',
             },
+            { TypeClass:SpliNode, name:"Split", id:"split"}
         ],
     },
     {

src/colors/Theme.ts

@@ -41,6 +41,7 @@ export class Theme {
     readonly groupLogic: FillStyle = '#203c3c';
     readonly groupFunction: FillStyle = '#005456';
     readonly groupCustomMade: FillStyle = '#785323';
+    readonly groupAnimation: FillStyle = '#6e1d20';
 
     readonly barBgColor: FillStyle = '#545454';
     readonly barFillColor: FillStyle = '#4772b3';

src/components/DraggableValue.ts

@@ -10,7 +10,7 @@ export class DraggableValue extends InteractiveLayoutElement {
     private promptValueOnMouseUp = false;
 
     constructor(
-        readonly name: string,
+        public name: string,
         readonly usesBar: boolean,
         readonly min: number,
         readonly max: number,

src/nodes/animation/AnimatedPixelNode.ts

@@ -0,0 +1,49 @@
+ 
+ 
+import { Theme } from "../../colors/Theme";
+import { DataType } from "../../core/IOutlet";
+import { Script } from "../../export/Script";
+import { Output } from "../../properties/Output";
+import { ExecutableLogicNode } from "../logic/ExecutableLogicNode";
+import { WinNode } from "../WinNode";
+
+ 
+
+/**
+ * Use this as skeleton for a new node...
+ */
+export class AnimatedPixelNode extends WinNode {
+
+    protected scriptOutput:Output;
+
+    constructor() {
+        super("Animated Pixel", Theme.config.groupAnimation, [
+            new Output("color ( VAR )", DataType.vec3, "color" ), 
+            new Output("on update", DataType.script),
+            new Output("final color", DataType.vec3, "output" ),
+        ]);
+
+        this.scriptOutput = this.getChildOfType(Output,1)!;
+    }  
+
+    protected override writeNodeScript( script: Script ): string {
+        // this is where we write our ThreeJs TSL javascript node code...
+        script.importModule("color");
+         
+        const colorVar = script.define( this.nodeName+"Var", "color(0,0,0).toVar()");
+ 
+        const scope = script.newScope(false); 
+ 
+        ( this.scriptOutput.connectedTo?.owner as ExecutableLogicNode )?.writeBlockScript(script); 
+
+        scope.exit();
+
+        const fn = script.defineFunction(
+            scope,
+            this.nodeName+"Fn",
+            false, 
+        );
+
+        return script.define( this.nodeName, `{ color:${colorVar}, output:${fn} }`);
+    } 
+}

src/nodes/input/TimeNode.ts src/nodes/animation/TimeNode.tssrc/nodes/input/TimeNode.ts renamed to src/nodes/animation/TimeNode.ts

@@ -13,7 +13,7 @@ import { WinNode } from "../WinNode";
 export class TimeNode extends WinNode {
 
     constructor() {
-        super("Timer", Theme.config.groupInput, [
+        super("Timer", Theme.config.groupAnimation, [
             new Output("seconds", DataType.wildcard),
         ])
     }
@@ -33,9 +33,9 @@ export class TimeNode extends WinNode {
             this.nodeName,
             '0',
         ); 
- 
-        script.writeLine(`${ref}.onFrameUpdate( frame => ${ref}.value = frame.time  )`);
- 
+  
+        script.importModule("uint");
+        script.writeLine(`${ref}.onFrameUpdate( frame => ${ref}.value = frame.time )`); 
 
         return ref;
     } 

src/nodes/input/HSVNode.ts

@@ -0,0 +1,35 @@
+ 
+import { DataType, IDataType } from '../../core/IOutlet';
+import { Script } from '../../export/Script';
+import { ValueNode } from './ValueNode';
+
+
+export class HSVNode extends ValueNode { 
+
+    constructor() { 
+        super()
+        this.size = 3;
+        
+        this.setTitle("HSV")
+        this.typeCombo.enabled = false;
+        this.inputs.forEach( (input,i)=>input.label="HSV"[i])
+    }
+  
+    override get nodeDataType(): IDataType | undefined {
+        return DataType.vec3;
+    }
+
+    protected override writeNodeScript(script: Script): string {
+  
+        script.importModule( ["vec3","mx_hsvtorgb"]);
+
+        const values = this.inputs
+            .filter((input) => input.enabled)
+            .map((input) => input.writeScript(script));
+
+        return script.define(
+            this.nodeName,
+            `mx_hsvtorgb(vec3(${values.join(',')}))`,
+        );
+    }
+}

src/nodes/input/ValueNode.ts

@@ -10,6 +10,7 @@ import { InputBaseNode } from './InputBaseNode';
 export class ValueNode extends InputBaseNode {
     protected inputs: InputOrValue[];
     protected output: Output;
+    protected typeCombo:DataTypeComboBox;
 
     constructor(acceptsInputs = true) {
         const lbl = ['X', 'Y', 'Z', 'W'];
@@ -23,6 +24,7 @@ export class ValueNode extends InputBaseNode {
             new Output('value', DataType.wildcard),
         ]);
 
+        this.typeCombo = this.getChildOfType(DataTypeComboBox)!;
         this.inputs = inputs;
         this.output = this.getChildOfType(Output)!;
         this.size = 0;

src/nodes/operators/SplitNode.ts

@@ -0,0 +1,46 @@
+import { Theme } from '../../colors/Theme';
+import { DataType, IDataType } from '../../core/IOutlet';
+import { Script } from '../../export/Script';
+import { BasicInputProperty } from '../../properties/BasicInputProperty';
+import { Output } from '../../properties/Output';
+import { WinNode } from '../WinNode';
+
+export class SpliNode extends WinNode {
+    protected channels: Output[];
+    protected source: BasicInputProperty; 
+
+    constructor() {
+        const props = "xyzw";
+        const channels = Array.from({ length:4 }).map( (_,i)=>new Output(props[i], DataType.float, props[i]) );
+
+        super('Split', Theme.config.groupMath, [
+            new BasicInputProperty(DataType.wildcard, 'source'), 
+            ...channels
+        ]);
+
+        this.source = this.getChildOfType(BasicInputProperty)!; 
+        this.channels = channels;
+    } 
+
+    override width(ctx: CanvasRenderingContext2D): number {
+        return super.width(ctx)/2
+    }
+
+    override get nodeDataType(): IDataType | undefined {  
+        return this.source.type == DataType.wildcard? DataType.vec4 : this.source.type ;
+    }
+
+    override update(): void {
+        const size = this.nodeDataType!.size;
+
+        this.channels.forEach(( channel, i) => {
+            channel.enabled = i < size;
+        });
+
+        super.update();
+    }
+
+    protected override writeNodeScript(script: Script): string { 
+        return this.source.writeScript(script);
+    } 
+} 

src/properties/BasicInputProperty.ts

@@ -6,17 +6,23 @@ import { Input } from './Input';
  * Just an input with a label.
  */
 export class BasicInputProperty extends Input {
+
+    protected _label:string;
+    set label(str:string){ this._label=str; }
+    get label(){ return this._label; }
+
     /**
      * @param size
      * @param label
      * @param defaultScriptIfNotConnected If not connected, what should this input add to the script?
      */
     constructor(
         type: IDataType,
-        public label: string,
+        label: string,
         protected defaultScriptIfNotConnected?: (script: Script) => string,
     ) {
         super(type);
+        this._label = label;
     }
 
     override renderContents(

src/properties/InputOrValue.ts

@@ -37,9 +37,7 @@ export class InputOrValue extends BasicInputProperty {
             asBar: false,
             defaultValue: 0,
             ...(!hasConfig ? { label } : label),
-        };
-
-        const lbl = !hasConfig ? label : label.label;
+        }; 
 
         super(DataType.float, valConfig.label);
 
@@ -70,7 +68,11 @@ export class InputOrValue extends BasicInputProperty {
                 }
             }
         });
-    }
+    } 
+
+    override set label(str: string) {
+        this.valueSlider.name = str;
+    } 
 
     /**
      * Inform the listner or if no listener was passed, then inform the top-most node that "something has changed"