some initial code for a synth app using hydra

setsun · Jul 12, 2023 · eae5df5 · eae5df5
1 parent f22214d
commit eae5df5
Show file tree

Hide file tree

Showing 17 changed files with 244 additions and 22 deletions.
diff --git a/apps/portfolio/.github/workflows/production.yml b/apps/portfolio/.github/workflows/production.yml
diff --git a/apps/synth/.eslintrc.js b/apps/synth/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};
diff --git a/apps/synth/README.md b/apps/synth/README.md
@@ -0,0 +1 @@
+# `synth`
diff --git a/apps/synth/index.html b/apps/synth/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Synth</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/synth/package.json b/apps/synth/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "synth",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "hydra-ts": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regl": "^1.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react": "^4.0.1",
+    "eslint": "^8.44.0",
+    "eslint-config-custom": "workspace:*",
+    "tailwind-config": "workspace:*",
+    "tailwindcss": "^3.3.2",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.0"
+  }
+}
diff --git a/apps/synth/postcss.config.js b/apps/synth/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/synth/public/vite.svg b/apps/synth/public/vite.svg
diff --git a/apps/synth/src/App.tsx b/apps/synth/src/App.tsx
@@ -0,0 +1,29 @@
+import { Hydra, generators } from 'hydra-ts';
+import REGL from 'regl';
+import { useState, useLayoutEffect } from "react";
+
+const regl = REGL();
+
+function App() {
+  const [hydra, setHydra] = useState<Hydra>(null);
+
+  useLayoutEffect(() => {
+    const hydra = new Hydra({ regl, width: window.innerWidth, height: window.innerHeight });
+
+    const { sources, outputs, loop } = hydra;
+
+    const { osc } = generators;
+
+    const [o0] = outputs;
+
+    setHydra(hydra);
+
+    osc(4, 0.1, 1.2).out(o0)
+
+    loop.start();
+  }, []);
+
+  return null;
+}
+
+export default App;
diff --git a/apps/synth/src/assets/react.svg b/apps/synth/src/assets/react.svg
diff --git a/apps/synth/src/main.tsx b/apps/synth/src/main.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+import "./styles/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/apps/synth/src/styles/globals.css b/apps/synth/src/styles/globals.css
@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  @apply bg-slate-950 text-white m-0 p-0;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
diff --git a/apps/synth/src/vite-env.d.ts b/apps/synth/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/synth/tailwind.config.js b/apps/synth/tailwind.config.js
@@ -0,0 +1,7 @@
+// tailwind config is required for editor support
+
+const sharedConfig = require("tailwind-config/tailwind.config.js");
+
+module.exports = {
+  presets: [sharedConfig],
+};
diff --git a/apps/synth/tsconfig.json b/apps/synth/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "lib": ["dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [".", "../tsconfig/@types"],
+  "exclude": ["dist", "build", "node_modules"],
+}
diff --git a/apps/synth/vite.config.ts b/apps/synth/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    global: 'window',
+  },
+});
diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json
@@ -5,7 +5,7 @@
   "compilerOptions": {
     "lib": ["ES2015"],
     "module": "ESNext",
-    "target": "ES6",
+    "target": "ES2015",
     "jsx": "react-jsx"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml