Wrap GPU.js kernel functions in templates (#299)

* Wrap kernel functions in templates

* Add TODO

Author: tddough98

visualizer/src/Canvas/Labeled/LabeledCanvas.js

@@ -39,7 +39,7 @@ export const LabeledCanvas = ({ setCanvases }) => {
   useEffect(() => {
     const gpu = new GPU({ canvas: kernelCanvasRef.current });
     const kernel = gpu.createKernel(
-      function (labelArray, colormap, foreground, highlight, highlightColor, opacity) {
+      `function (labelArray, colormap, foreground, highlight, highlightColor, opacity) {
         const label = labelArray[this.constants.h - 1 - this.thread.y][this.thread.x];
         if (highlight && label === foreground && foreground !== 0) {
           const [r, g, b] = highlightColor;
@@ -48,7 +48,7 @@ export const LabeledCanvas = ({ setCanvases }) => {
           const [r, g, b] = colormap[label];
           this.color(r / 255, g / 255, b / 255, opacity);
         }
-      },
+      }`,
       {
         constants: { w: width, h: height },
         output: [width, height],

visualizer/src/Canvas/Labeled/OutlineCanvas.js

@@ -35,7 +35,10 @@ const OutlineCanvas = ({ setCanvases }) => {
   useEffect(() => {
     const gpu = new GPU({ canvas: kernelCanvasRef.current });
     const kernel = gpu.createKernel(
-      function (data, outlineAll, foreground, background) {
+      // template string needed to avoid minification breaking function
+      // by changing if (x) { y } to x && y
+      // TODO: research how to work around minification changes
+      `function (data, outlineAll, foreground, background) {
         const x = this.thread.x;
         const y = this.constants.h - 1 - this.thread.y;
         const label = data[y][x];
@@ -56,7 +59,7 @@ const OutlineCanvas = ({ setCanvases }) => {
         } else if (outlineAll && onOutline) {
           this.color(1, 1, 1, 1);
         }
-      },
+      }`,
       {
         constants: { w: width, h: height },
         output: [width, height],

visualizer/src/Canvas/Raw/ChannelCanvas.js

@@ -32,7 +32,7 @@ export const ChannelCanvas = ({ layer, setCanvases }) => {
   useEffect(() => {
     const gpu = new GPU();
     const kernel = gpu.createKernel(
-      function (data, on, color, min, max) {
+      `function (data, on, color, min, max) {
         if (on) {
           const x = this.thread.x;
           const y = this.constants.h - 1 - this.thread.y;
@@ -44,7 +44,7 @@ export const ChannelCanvas = ({ layer, setCanvases }) => {
         } else {
           this.color(0, 0, 0, 0);
         }
-      },
+      }`,
       {
         constants: { w: width, h: height },
         output: [width, height],

visualizer/src/Canvas/Raw/GrayscaleCanvas.js

@@ -26,7 +26,7 @@ export const GrayscaleCanvas = ({ setCanvases }) => {
   useEffect(() => {
     const gpu = new GPU();
     const kernel = gpu.createKernel(
-      function (data, min, max, brightness, contrast, invert) {
+      `function (data, min, max, brightness, contrast, invert) {
         const x = this.thread.x;
         const y = this.constants.h - 1 - this.thread.y;
         // Rescale value from min - max to 0 - 1
@@ -44,7 +44,7 @@ export const GrayscaleCanvas = ({ setCanvases }) => {
           v = 1 - v;
         }
         this.color(v, v, v, 1);
-      },
+      }`,
       {
         constants: { w: width, h: height },
         output: [width, height],

visualizer/src/Canvas/Tool/ThresholdCanvas.js

@@ -21,7 +21,7 @@ const ThresholdCanvas = ({ setCanvases }) => {
   useEffect(() => {
     const gpu = new GPU({ canvas: kernelCanvasRef.current });
     const kernel = gpu.createKernel(
-      function (x1, y1, x2, y2) {
+      `function (x1, y1, x2, y2) {
         const x = this.thread.x;
         const y = this.constants.h - this.thread.y;
         const minX = Math.min(x1, x2);
@@ -37,7 +37,7 @@ const ThresholdCanvas = ({ setCanvases }) => {
         } else {
           this.color(0, 0, 0, 0);
         }
-      },
+      }`,
       {
         constants: { w: width, h: height },
         output: [width, height],