New version with so many features

css/style.css

@@ -57,6 +57,7 @@ html {
     min-width: 12rem;
     background-color: darkslategray;
     border: 3px solid black;
+    overflow: hidden;
 }
 
 .node .input {
@@ -89,13 +90,16 @@ html {
     border-left: 1px solid white;
     border-top: 1px solid white;
     border-bottom: 1px solid white;
-    width: 2rem;
+    padding-left: 0.2rem;
+    min-width: calc(2rem - 0.2rem);
     text-align: right;
     border-radius: 1rem 0rem 0rem 1rem;
     margin-left: auto;
     margin-top: 0.4rem;
     user-select: none;
     cursor: grab;
+    line-height: 1.5rem;
+    justify-items: center;
 }
 
 .node .outputContainer {
@@ -291,4 +295,23 @@ input[type=number] {
 
 #nodecount {
     padding-left: 2rem;
-}
+}
+input[imageInput] {
+    visibility: hidden;
+    overflow: visible;
+}
+input[imageInput]::before {
+    content: "Select image...";
+    visibility: visible;
+    border: 2px solid rgb(80, 80, 80);
+    border-radius: 4px;
+    text-align: center;
+    background-color: rgb(40, 40, 40);
+    color: white;
+    display: block;
+    margin-top: 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+    padding: 0.2rem;
+}

flow.html

@@ -45,6 +45,9 @@
   <td id="nodecount">
     0⬒
   </td>
+  <td>
+    <div class="btn" role="button" onclick="startHats('start')">Run</div>
+  </td>
   </tr>
   </table>
   </div>
@@ -74,12 +77,14 @@
     }
   </script>
 
+  <script src="scripts/input/index.js"></script>
+
   <script src="libs/noise.js"></script>
   <script src="libs/worley.js"></script>
   <script src="libs/soundplayer.js"></script>
   <script src="libs/sfx.js"></script>
 
-  <script src="scripts/input/index.js"></script>
+  <script src="scripts/input/logic.js"></script>
   <script src="scripts/input/math.js"></script>
   <script src="scripts/input/classes.js"></script>
   <script src="scripts/input/vectorClasses.js"></script>
@@ -95,12 +100,13 @@
   <script src="scripts/output/soundwave.js"></script>
   <script src="scripts/output/image.js"></script>
 
+  <script src="scripts/ui/events.js"></script>
   <script src="scripts/ui/termsAndConditions.js"></script>
   <script src="scripts/ui/dragElem.js"></script>
   <script src="scripts/ui/bLink.js"></script>
   <script src="scripts/ui/draggableCanvas.js"></script>
-  <script src="scripts/ui/node.js"></script>
   <script src="scripts/ui/zoom.js"></script>
+  <script src="scripts/ui/node.js"></script>
   <script src="scripts/ui/serialise.js"></script>
   <script src="scripts/ui/suggestions.js"></script>
   <script src="scripts/ui/nodecount.js"></script>

roadmap.txt

@@ -17,4 +17,6 @@ Add vector2 outputs, vector3 outputs and vector4 outputs - Done
 Add more math nodes - Done
 Fix error when deserialise tries to make links to unknown nodes - Done
 Make serialise() not always save the label, only when it is renameable. - Todo
-Add video output node - Todo
+Add video output node - Todo
+Add image input node - Done
+Fix image input scaling bug - Todo

scripts/input/classes.js

@@ -2,10 +2,7 @@ addNode("add", {
   alias: ["Add", "addition", "plus", "+"],
   inputs: ["A", "B"],
   func: (a, b) => {
-    if (typeof a !== "number" || typeof b !== "number") {
-      return 0;
-    }
-    return [a + b];
+    return [parseFloat(a) + parseFloat(b)];
   },
   color: "darkcyan",
   doc: "Adds inputs A and B together and then returns it.",
@@ -55,8 +52,8 @@ addNode("power", {
   color: "darkcyan",
   doc: "Returns Base to the power Exponent and then returns it.",
 });
-addNode("if", {
-  alias: ["If"],
+addNode("mathif", {
+  alias: ["Math If"],
   inputs: ["A", "B", "A>B", "A=B", "A<B"],
   func: (a, b, agtb, aeb, alsb) => {
     if (a > b) {

scripts/input/colorClasses.js

@@ -8,7 +8,7 @@ addNode("hsl2rgb", {
       l /= 100;
       var r, g, b;
 
-      if (s == 0) {
+      if (s === 0) {
         r = g = b = l; // achromatic
       } else {
         var hue2rgb = function hue2rgb(p, q, t) {

scripts/input/compiler.js

@@ -12,23 +12,25 @@ function compileGraph(
     libraryEntry.usespkg.forEach((lib) => {
       alert(
         "Node type " +
-          node.getAttribute("data-type") +
-          " uses package " +
-          lib +
-          `\n\nMake sure that this package is loaded when using the compiled graph.`
+        node.getAttribute("data-type") +
+        " uses package " +
+        lib +
+        `\n\nMake sure that this package is loaded when using the compiled graph.`
       );
     });
   }
-  var rows = node.querySelectorAll("tr");
+  var rows = node.querySelectorAll("tr:not(.execrow)");
   var func = libraryEntry.func;
+  var execout = [];
+  var execoutElements = node.querySelectorAll(".execout");
   var argv = [];
   for (let i = 0; i < rows.length; i++) {
     var row = rows[i];
     if (
       row.childNodes[1]?.childNodes[0]?.value &&
-      parseFloat(row.childNodes[1].childNodes[0].value)
+      row.childNodes[1].childNodes[0].value
     ) {
-      argv.push(parseFloat(row.childNodes[1].childNodes[0].value));
+      argv.push(row.childNodes[1].childNodes[0].value);
     } else if (
       row.childNodes[0]?.["link"]?.["outputNode"]?.parentElement?.parentElement
     ) {
@@ -45,6 +47,14 @@ function compileGraph(
       argv.push(0);
     }
   }
+  execoutElements.forEach((elm)=>{
+    if (elm && elm.link) {
+      execout.push(compileGraph(elm.link.inputNode.parentElement.parentElement.parentElement, stripped, alertMessages, 0));
+    } else {
+      execout.push(null);
+    }
+  });
+
   if (flags.benchmarking) {
     console.log(
       "Compiled graph in " + (performance.now() - start).toFixed(2) + "ms"
@@ -55,9 +65,14 @@ function compileGraph(
     argv: argv,
     nodeRef: stripped ? undefined : node,
     fields: undefined,
+    execout: execout,
+    command: libraryEntry.command,
     refId: node.refId,
     lIndex: lIndex || 0,
     calculate: function (label = false, index = 0) {
+      if (this.command) {
+        return [];
+      }
       let values = [];
       let cache = {};
       for (let arg = 0; arg < this.argv.length; arg++) {
@@ -79,6 +94,41 @@ function compileGraph(
       }
       return this.func.apply(this?.nodeRef || null, values) || [0];
     },
+    exec: async function (label = false, index = 0) {
+      if (!this.command) {
+        return;
+      }
+      let values = [];
+      let cache = {};
+      for (let arg = 0; arg < this.argv.length; arg++) {
+        const argument = this.argv[arg];
+        if (typeof argument === "object") {
+          if (!cache[argument.refId]) {
+            cache[argument.refId] = argument.calculate(label);
+          }
+          values.push(cache[argument.refId][argument.lIndex]);
+        } else {
+          values.push(argument || 0);
+        }
+      }
+      if (label && this.nodeRef) {
+        if (!this.fields) this.fields = this.nodeRef.querySelectorAll("input");
+        values.forEach((v, i) => {
+          this.fields[i]?.setAttribute("placeholder", v);
+        });
+      }
+      var branchIdx = await this.func.apply(this?.nodeRef || null, values);
+      branchIdx ||= [0];
+      if (!Array.isArray(branchIdx)) {
+        branchIdx = [branchIdx];
+      }
+      for (let i = 0; i < branchIdx.length; i++) {
+        const idx = branchIdx[i];
+        if (this.execout[idx]) {
+          await this.execout[idx].exec();
+        }
+      }
+    },
   };
 }
 
@@ -87,7 +137,7 @@ function stringifyGraph(graph) {
     if (typeof arg === "object") {
       return stringifyGraph(arg);
     } else {
-      return arg.toString();
+      return '"' + arg.toString() + '"';
     }
   }
   function stringifyArgs(args) {
@@ -98,19 +148,23 @@ function stringifyGraph(graph) {
     });
     return js + `\n]`;
   }
-  return `{\nfunc: ${graph.func.toString()},\nrefId: ${graph.refId},\nlIndex: ${
-    graph.lIndex
-  },\ncalculate: ${graph.calculate.toString()},\nargv: ${stringifyArgs(
-    graph.argv
-  )}}`;
+  return `{\nfunc: ${graph.func.toString()},\nrefId: ${graph.refId},\nlIndex: ${graph.lIndex
+    },\ncalculate: ${graph.calculate.toString()},\nargv: ${stringifyArgs(
+      graph.argv
+    )},\ncommand: ${graph.command},\nexecout: ${
+      stringifyArgs(graph.execout)
+    },\nexec: ${graph.exec.toString()}}`;
 }
 
 function _DEEPCOMPILE(graph, surface = false) {
+  if (graph.command) {
+    throw new Error("Deepcompiled or translated graphs do not support execution or logic flow, only values.")
+  }
   function stringifyArg(arg) {
     if (typeof arg === "object") {
       return "(" + _DEEPCOMPILE(arg) + ")";
     } else {
-      return arg.toString();
+      return '"' + arg.toString() + '"';
     }
   }
   function stringifyArgs(args) {
@@ -121,9 +175,8 @@ function _DEEPCOMPILE(graph, surface = false) {
     });
     return j;
   }
-  return `(${graph.func.toString()})(${stringifyArgs(graph.argv)})${
-    surface ? "" : `[${graph.lIndex}]`
-  }`;
+  return `(${graph.func.toString()})(${stringifyArgs(graph.argv)})${surface ? "" : `[${graph.lIndex}]`
+    }`;
 }
 function translateGraph(graph, name = "main") {
   if (flags.benchmarking) {
@@ -143,9 +196,9 @@ function translateGraph(graph, name = "main") {
 function _compressGraph(graph, surface = false) {
   function stringifyArg(arg) {
     if (typeof arg === "object") {
-      return "(" + _DEEPCOMPILE(arg) + ")";
+      return "(" + _compressGraph(arg) + ")";
     } else {
-      return arg.toString();
+      return '"' + arg.toString() + '"';
     }
   }
   function stringifyArgs(args) {
@@ -156,11 +209,13 @@ function _compressGraph(graph, surface = false) {
     });
     return j;
   }
-  return `(${graph.func.toString()}).apply(window.nodemap[${
-    graph.refId
+  return `(${graph.func.toString()}).apply(window.nodemap[${graph.refId
   }], [${stringifyArgs(graph.argv)}])${surface ? "" : `[${graph.lIndex}]`}`;
 }
 function recompileGraph(graph, name = "main") {
+  if (graph.command) {
+    throw new Error("Recompiled graphs do not support execution or logic flow, only values.")
+  }
   if (flags.benchmarking) {
     var start = performance.now();
   }
@@ -173,5 +228,5 @@ function recompileGraph(graph, name = "main") {
       "Translated graph in " + (performance.now() - start).toFixed(2) + "ms"
     );
   }
-  return value;
+  return eval(value);
 }

scripts/input/documentation.js

@@ -15,6 +15,7 @@ function displayDocumentation() {
       if (window.library[key].argv.length > 0) {
         var argumentsHeader = document.createElement("h4");
         argumentsHeader.innerText = "Arguments: ";
+        argumentsHeader.style = "margin-bottom: 0;"
         var inputsTable = document.createElement("table");
         for (let i = 0; i < window.library[key].argv.length; i++) {
           var arg = window.library[key].argv[i];

scripts/input/index.js

@@ -8,12 +8,31 @@ function addNode(namespace, data = {}) {
   if (typeof data !== "object") {
     return;
   }
+  data.command ||= false;
+  data.hat = data.command ? data.hat || false : false;
   data.namespace = namespace;
   data.alias ||= [namespace];
   data.title ||= data.alias[0];
   data.renameable ||= false;
   data.argv ||= data.inputs || [];
+  if (data.hat) {
+    data.argv = data.inputs = [];
+  }
   data.outputs ||= ["O"];
+  if (data.command) {
+    var bad = false;
+    data.outputs.forEach(out => {
+      if (!out.includes("⏩")) {
+        bad = true;
+      }
+    });
+    if (data.outputs.length < 1) {
+      bad = true;
+    }
+    if (bad) {
+      data.outputs = ["⏩"];
+    }
+  }
   data.func ||= function () {
     return [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
   };