WIP: Experimental VEDA.js support

README.md

@@ -21,7 +21,7 @@ Web-based P2P collaborative editor for live coding music and graphics
 * Web Plugins, for languages embedded in editor:
   - [Hydra](https://github.com/ojack/hydra)
   - [p5.js](https://p5js.org/)
-  - [VEDA.js](https://github.com/fand/vedajs) (*not implemented yet*)
+  - [VEDA.js](https://github.com/fand/vedajs)
   - [Tilt](https://github.com/munshkr/tilt) (*not implemented yet*)
 
 

packages/web/components/HydraError.tsx → packages/web/components/LocalError.tsx

@@ -1,4 +1,4 @@
-const HydraError = ({ children }) => (
+const LocalError = ({ children }) => (
   <>
     <span className="error">{children}</span>
     <style jsx>
@@ -17,4 +17,4 @@ const HydraError = ({ children }) => (
   </>
 );
 
-export default HydraError;
+export default LocalError;

packages/web/components/Session.tsx

@@ -7,13 +7,14 @@ import Mosaic from "./Mosaic";
 import Audio from "./Audio";
 
 const MAX_LINES: number = 100;
-const LOCAL_TARGETS = ["hydra"];
+const LOCAL_TARGETS = ["hydra", "veda"];
 
 type Props = {
   websocketsHost: string;
   sessionName: string;
   userName?: string;
   onHydraEvaluation: (code: string) => void;
+  onVedaEvaluation: (code: string) => void;
   audioStreamingEnabled: boolean;
   extraIceServers?: IceServerType[];
   layout: {
@@ -46,6 +47,7 @@ class Session extends Component<Props, State> {
   static defaultProps = {
     userName: "anonymous",
     onHydraEvaluation: () => {},
+    onVedaEvaluation: () => {},
   };
 
   componentDidMount() {
@@ -141,6 +143,9 @@ class Session extends Component<Props, State> {
       case "hydra":
         this.props.onHydraEvaluation(body);
         break;
+      case "veda":
+        this.props.onVedaEvaluation(body);
+        break;
       default:
         console.error("Unhandle local target:", target);
     }

packages/web/components/TextEditor.tsx

@@ -54,6 +54,7 @@ const modesByTarget = {
   foxdot: "python",
   sclang: "smalltalk",
   hydra: "javascript",
+  veda: "javascript",
 };
 
 const EvaluateButton = ({ onClick }) => (

packages/web/lib/VedaWrapper.ts

@@ -0,0 +1,47 @@
+import Veda from "vedajs";
+
+export type ErrorHandler = (error: string) => void;
+
+class VedaWrapper {
+  veda: any;
+  playing: boolean;
+  onError: ErrorHandler;
+
+  constructor(canvas: HTMLCanvasElement, onError: ErrorHandler) {
+    this.onError = onError || (() => {});
+    this.playing = false;
+
+    this.veda = new Veda();
+    this.veda.setCanvas(canvas);
+
+    // Wrap around Veda.render() function with a try/catch
+    // to gracefully handle shader program exceptions.
+    const vedaRender = this.veda.render;
+    this.veda.render = () => {
+      try {
+        vedaRender.apply(this.veda);
+      } catch (err) {
+        console.warn("VEDA ERROR", err);
+        // this.onError(err);
+      }
+    };
+  }
+
+  evalFragment(code: string) {
+    this.veda.loadFragmentShader(code);
+    this.play();
+  }
+
+  evalVertex(code: string) {
+    this.veda.loadVertexShader(code);
+    this.play();
+  }
+
+  play() {
+    if (this.playing) return;
+    this.veda.play();
+    this.playing = true;
+  }
+}
+
+export default VedaWrapper;

packages/web/package.json

@@ -23,6 +23,7 @@
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-sass": "^1.0.1",
+    "classnames": "^2.2.6",
     "commander": "^2.20.0",
     "cross-env": "^7.0.0",
     "express": "^4.17.1",
@@ -33,6 +34,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "simple-peer": "^9.6.2",
+    "vedajs": "^0.15.0",
     "ws": "^7.0.1"
   },
   "devDependencies": {