port to bun+vite+react-router6

eatspaint · Dec 14, 2023 · fa71ad8 · fa71ad8
1 parent da100fb
commit fa71ad8
Show file tree

Hide file tree

Showing 42 changed files with 143 additions and 5,422 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-*.log
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/CNAME b/CNAME
diff --git a/bun.lockb b/bun.lockb
diff --git a/bundle-v1.1.js b/bundle-v1.1.js
diff --git a/index.html b/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>i don't watch football</title>
-    <link rel="stylesheet" href="./css.css">
   </head>
-
   <body>
-    <div id='root'></div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
-  <script src="bundle-v1.1.js"></script>
-</html>
+</html>
diff --git a/js/App.js b/js/App.js
diff --git a/js/Home.js b/js/Home.js
diff --git a/js/index.js b/js/index.js
diff --git a/package.json b/package.json
@@ -1,29 +1,25 @@
 {
-  "name": "generative",
-  "version": "1.0.0",
-  "main": "index.js",
-  "author": "eatspaint",
-  "license": "MIT",
+  "name": "generative-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "babel": "^6.23.0",
-    "babel-loader": "^8.0.6",
+    "@p5-wrapper/react": "^4.3.2",
     "ccapture.js": "aceslowman/ccapture.js#npm-fix",
-    "p5": "^0.9.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-p5-wrapper": "^2.0.0",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
-    "styled-components": "^4.3.2",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.7",
-    "webpack-dev-server": "^3.8.0"
+    "p5": "^1.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.0"
   },
-  "scripts": {
-    "start": "webpack-dev-server",
-    "build": "webpack"
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.1.0"
   }
 }
diff --git a/src/Home.jsx b/src/Home.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ROUTE_MAP } from './Routes';
+
+const renderLink = ({ name }) => (
+  <Link key={`link-to-${name}`} to={`/${name}`}>{name}</Link>
+);
+
+const Home = () => (
+  <div className="nav">
+    {ROUTE_MAP.map(renderLink)}
+  </div>
+);
+
+export default Home;
diff --git a/js/Routes.js → src/Routes.jsx b/js/Routes.js → src/Routes.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import P5Wrapper from 'react-p5-wrapper';
+import { ReactP5Wrapper } from '@p5-wrapper/react';
 
 import {
   atmos,
@@ -59,7 +59,7 @@ const renderRoute = ({ name, sketch }) => (
     key={name}
     path={`/${name}`}
     render={
-      () => <P5Wrapper sketch={sketch}/>
+      () => <ReactP5Wrapper sketch={sketch}/>
     }
   />
 );
@@ -70,4 +70,9 @@ const Routes = () => (
   </>
 );
 
-export default Routes;
+export const routes = ROUTE_MAP.map(({ name, sketch }) => ({
+  element: <ReactP5Wrapper sketch={sketch}/>,
+  path: `/${name}`,
+}))
+
+export default Routes;
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/css.css → src/index.css b/css.css → src/index.css
@@ -10,10 +10,23 @@ body {
   align-items: center;
 }
 
-canvas{
+canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
 }
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.nav a {
+  padding: 6px;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import Home from './Home';
+import { routes } from './Routes';
+import './index.css'
+
+const router = createBrowserRouter([
+  { path: '/', element: <Home /> },
+  ...routes,
+])
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
diff --git a/js/sketches/atmos.js → src/sketches/atmos.js b/js/sketches/atmos.js → src/sketches/atmos.js
diff --git a/js/sketches/branch.js → src/sketches/branch.js b/js/sketches/branch.js → src/sketches/branch.js
diff --git a/js/sketches/bubblegum.js → src/sketches/bubblegum.js b/js/sketches/bubblegum.js → src/sketches/bubblegum.js
diff --git a/js/sketches/cells.js → src/sketches/cells.js b/js/sketches/cells.js → src/sketches/cells.js
diff --git a/js/sketches/colorFire.js → src/sketches/colorFire.js b/js/sketches/colorFire.js → src/sketches/colorFire.js
diff --git a/js/sketches/curve.js → src/sketches/curve.js b/js/sketches/curve.js → src/sketches/curve.js
diff --git a/js/sketches/cutout.js → src/sketches/cutout.js b/js/sketches/cutout.js → src/sketches/cutout.js
diff --git a/js/sketches/drops.js → src/sketches/drops.js b/js/sketches/drops.js → src/sketches/drops.js
diff --git a/js/sketches/every.js → src/sketches/every.js b/js/sketches/every.js → src/sketches/every.js
diff --git a/js/sketches/index.js → src/sketches/index.js b/js/sketches/index.js → src/sketches/index.js
diff --git a/js/sketches/lines.js → src/sketches/lines.js b/js/sketches/lines.js → src/sketches/lines.js
diff --git a/js/sketches/moire.js → src/sketches/moire.js b/js/sketches/moire.js → src/sketches/moire.js
diff --git a/js/sketches/movement.js → src/sketches/movement.js b/js/sketches/movement.js → src/sketches/movement.js
diff --git a/js/sketches/oil.js → src/sketches/oil.js b/js/sketches/oil.js → src/sketches/oil.js
diff --git a/js/sketches/ooo.js → src/sketches/ooo.js b/js/sketches/ooo.js → src/sketches/ooo.js
diff --git a/js/sketches/pix.js → src/sketches/pix.js b/js/sketches/pix.js → src/sketches/pix.js
diff --git a/js/sketches/sand.js → src/sketches/sand.js b/js/sketches/sand.js → src/sketches/sand.js
diff --git a/js/sketches/shift.js → src/sketches/shift.js b/js/sketches/shift.js → src/sketches/shift.js
diff --git a/js/sketches/sins.js → src/sketches/sins.js b/js/sketches/sins.js → src/sketches/sins.js
diff --git a/js/sketches/template.js → src/sketches/template.js b/js/sketches/template.js → src/sketches/template.js
diff --git a/js/sketches/tiled.js → src/sketches/tiled.js b/js/sketches/tiled.js → src/sketches/tiled.js
diff --git a/js/sketches/towers.js → src/sketches/towers.js b/js/sketches/towers.js → src/sketches/towers.js
diff --git a/js/sketches/warp.js → src/sketches/warp.js b/js/sketches/warp.js → src/sketches/warp.js
@@ -12,22 +12,22 @@ export default (p) => {
     xImg.resize(xResolution, yResolution);
     yImg.resize(xResolution, yResolution);
     cImg.resize(xResolution, yResolution);
-  
-    xImg.filter(p.GRAY);
-    yImg.filter(p.GRAY);
-  
+
+    // xImg.filter(p.GRAY);
+    // yImg.filter(p.GRAY);
+
     xImg.loadPixels();
     yImg.loadPixels();
     cImg.loadPixels();
-  
+
     outputImg.loadPixels();
   }
 
   const processImages = () => {
     for (let i = 0; i < (outputImg.pixels.length / 4); i++) {
       // Find x & y coords within resolution based on pixel brightness
-      let x = p.floor(p.map(getPixVal(xImg, i), 0, 255, 0, xResolution));
-      let y = p.floor(p.map(getPixVal(yImg, i), 0, 255, 0, yResolution));
+      let x = p.floor(p.map(getPixVal(xImg, i), 0, 765, 0, xResolution));
+      let y = p.floor(p.map(getPixVal(yImg, i), 0, 765, 0, yResolution));
       // Use x/y coords to find a specific pixel index for sampling
       let pixel = p.floor(x + (y * xResolution));
       // Lookup the color of said pixel
@@ -38,9 +38,11 @@ export default (p) => {
     outputImg.updatePixels();
   };
 
-  const getPixVal = (img, i) => (
-    img.pixels[i * 4]
-  );
+  // get sum of RGB space for pixel; output range: (0..765)
+  const getPixVal = (img, i) => {
+    const idx = i * 4;
+    return img.pixels[idx] + img.pixels[idx + 1] + img.pixels[idx + 2];
+  };
 
   const getColor = (pixels, i) => pixels.slice(i, i + 4);
 
@@ -63,15 +65,30 @@ export default (p) => {
     p.createCanvas(p.windowWidth, p.windowHeight);
     p.frameRate(10);
 
+    let [xImgPrompt, yImgPrompt, cImgPrompt] = [undefined, undefined, undefined];
+
+    // proper window.location.search isn't defined since we're using a hash router
+    const search = window.location.href.split('?')[1]
+
+    if (search) {
+      [xImgPrompt, yImgPrompt, cImgPrompt] = search.split('-');
+      console.log([xImgPrompt, yImgPrompt, cImgPrompt]);
+    }
+
+    const baseUrl = 'https://source.unsplash.com/random';
     // Slightly offsetting resolutions ensures we don't get the same img cached when hitting unsplash
+    const xUrl = `${baseUrl}/${xResolution}x${yResolution + 1}${xImgPrompt ? `?${xImgPrompt}` : ''}`
+    const yUrl = `${baseUrl}/${xResolution + 1}x${yResolution}${yImgPrompt ? `?${yImgPrompt}` : ''}`
+    const cUrl = `${baseUrl}/${xResolution}x${yResolution}${cImgPrompt ? `?${cImgPrompt}` : ''}`
+
     // Nested callbacks to prevent ios blocking parallel requests
-    xImg = p.loadImage(`https://source.unsplash.com/random/${xResolution}x${yResolution + 1}`, () => {
+    xImg = p.loadImage(xUrl, () => {
       status = 'Requesting second image...';
       p.loop();
-      yImg = p.loadImage(`https://source.unsplash.com/random/${xResolution + 1}x${yResolution}`, () => {
+      yImg = p.loadImage(yUrl, () => {
         status = 'Requesting third image...';
         p.loop();
-        cImg = p.loadImage(`https://source.unsplash.com/random/${xResolution}x${yResolution}`, () => {
+        cImg = p.loadImage(cUrl, () => {
           prepareImages();
           processImages();
           ready = true;

diff --git a/js/sketches/waves.js → src/sketches/waves.js b/js/sketches/waves.js → src/sketches/waves.js
diff --git a/js/sketches/wavesMoving.js → src/sketches/wavesMoving.js b/js/sketches/wavesMoving.js → src/sketches/wavesMoving.js
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/webpack.config.js b/webpack.config.js