Merge pull request #3 from azan-n/azan/webchuck

chuck chuck chuck

Author: azan-n

assets/janis-dzenis-hLKNk9w1XzA-unsplash.jpg

@@ -10,13 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "colorthief": "^2.6.0",
+    "bezier-js": "^6.1.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "webchuck": "^1.2.10"
+    "tone": "^15.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/bezier-js": "^4.1.3",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",

assets/luise-and-nic-qEsRNeHtqOY-unsplash.jpg

@@ -1,67 +1,13 @@
-import { useState } from "react"
-import ColorThief, { RGBColor } from 'colorthief';
 import BezierCurve from "./components/BezierCurve";
 
 function App() {
-  const [image, setImage] = useState<string | null>(null)
-  const [dominantColors, setDominantColors] = useState<RGBColor[]>([])
-  // new Bezier().
-  // Handle image upload
-  const handleImageUpload = (event: any) => {
-    const file = event.target.files[0]
-    if (file) {
-      const imgFile = URL.createObjectURL(file)
-      setImage(imgFile)
-      extractDominantColors(file)
-    }
-  }
-
-  const extractDominantColors = (file: Blob | MediaSource) => {
-    const img = new Image()
-    img.src = URL.createObjectURL(file)
-    img.onload = () => {
-      const colorThief = new ColorThief()
-      const colors = colorThief.getPalette(img)
-      if (!colors) {
-        throw Error('Palette generation failed.')
-      } else {
-        setDominantColors(colors)
-        console.log(dominantColors);
-      }
-    }
-  }
-
   return (
     <main className='h-screen bg-slate-900 w-full text-slate-400 border-slate-700'>
       <div className='p-4'>
         <h1 className='font-mono'>scurvee</h1>
-        <section className='pt-4 grid grid-cols-1 md:grid-cols-2 gap-4 h-[calc(100vh_-_4rem)]'>
-          {/* Upload image, show image, remove image */}
-          <div className='border overflow-hidden flex items-center justify-center'>
-            {!image ?
-              (<label htmlFor="file-upload" className='cursor-pointer'>
-                <input
-                  id="file-upload"
-                  type="file"
-                  accept="image/*"
-                  onChange={handleImageUpload}
-                  className='inset-0 opacity-0'  // Hide the default input
-                />
-                <div className='bg-slate-700 cursor-pointer text-slate-200 py-3 px-6 rounded-lg hover:bg-slate-600 transition duration-300'>
-                  Upload Image
-                </div>
-              </label>) : null}
-
-
-            {image ? (
-              <img className="object-cover w-full h-full" src={image} alt="" />)
-              : (
-                null
-              )}
-          </div>
-
+        <section className='pt-4 h-[calc(100vh_-_4rem)]'>
           {/* MIDI visualizations? */}
-          <div className='border'>
+          <div className='border h-full'>
             <BezierCurve></BezierCurve>
           </div>
         </section>

assets/slava-auchynnikau-Ih5nQj1QMsY-unsplash.jpg

@@ -1,4 +1,6 @@
-import { useState } from "react";
+import { Bezier } from "bezier-js";
+import { useEffect, useState } from "react";
+import * as Tone from "tone";
 
 interface Point {
   x: number;
@@ -15,6 +17,10 @@ const BezierCurve: React.FC = () => {
     { x: 790, y: 500 },
   ]);
 
+  const generateBezier = () => {
+    return new Bezier(controlPoints);
+  }
+
   const [dragging, setDragging] = useState<number | null>(null); // Index of the point being dragged
   const [dragOffset, setDragOffset] = useState<[number, number] | null>(null); // Offset of mouse from control point
 
@@ -63,10 +69,17 @@ const BezierCurve: React.FC = () => {
     setDragging(null); // Stop dragging
   };
 
+  const [bezier, setBezier] = useState<Bezier>(generateBezier());
+
+  useEffect(() => {
+    setBezier(generateBezier())
+  }, [controlPoints])
+
   return (
-    <div>
+    <>
+
       <svg
-        className=""
+        className="h-full w-full"
         viewBox="0 0 800 600"
         onMouseMove={onMouseMove}
         onMouseUp={onMouseUp}
@@ -105,9 +118,69 @@ const BezierCurve: React.FC = () => {
           );
         })}
       </svg>
-      <p>{JSON.stringify(controlPoints)}</p>
-    </div>
+      <MidiNotesPlayer bezier={bezier} />
+    </>
   );
 };
 
 export default BezierCurve;
+
+import React from 'react';
+
+export function MidiNotesPlayer({ bezier }: { bezier: Bezier }) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [loop, setLoop] = useState<Tone.Loop>();
+  const [synth, setSynth] = useState<Tone.Synth>();
+
+  // Function to play the notes using Tone.js
+  const playNotes = () => {
+    Tone.start().then(() => {
+      const synth = new Tone.Synth().toDestination();
+      setSynth(synth);
+
+      const loop = new Tone.Loop(getLoopCallback(bezier, synth), "4n");
+      loop.start()
+
+      setLoop(loop)
+      // all loops start when the Transport is started
+      Tone.getTransport().start()
+      setIsPlaying(true); // Toggle the play/pause state
+    });
+  };
+
+  useEffect(() => {
+    if (loop && isPlaying && synth) {
+      loop.callback = getLoopCallback(bezier, synth);
+    }
+  }, [bezier])
+
+  const togglePlay = async () => {
+    if (!isPlaying) {
+      playNotes();
+    } else {
+      synth?.dispose()
+      loop?.dispose()
+      Tone.getTransport().stop();
+      setIsPlaying(false);
+    }
+  };
+
+  return (
+    <div>
+      <button className="font-mono" onClick={togglePlay}>
+        {isPlaying ? 'stop' : 'start'}
+      </button>
+    </div>
+  );
+};
+
+function getLoopCallback(bezier: Bezier, synth: Tone.Synth<Tone.SynthOptions>): ((time: Tone.Unit.Seconds) => void) {
+  return (time) => {
+    const lut = bezier.getLUT(4);
+    synth?.triggerAttackRelease(lut[randomInt(0, lut.length - 1)].y, "8n", time);
+  };
+}
+
+function randomInt(min: number, max: number) { // min and max included 
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}