some initial code for a synth app using hydra

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

Hide file tree

Showing 16 changed files with 243 additions and 21 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/nextjs.json",
+ "compilerOptions": {
+ "plugins": [{ "name": "next" }],
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["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/pnpm-lock.yaml b/pnpm-lock.yaml