move to src/ structure

src/script.js

@@ -9,7 +9,7 @@ const canvas = document.getElementById("videoCanvas")
 const ctx = canvas.getContext("2d")
 
 let videosToLoad = 2
-const maxVideosToLoad = 9
+const maxVideosToLoad = 4
 const videos = []
 let videosLoaded = 0
 
@@ -159,6 +159,11 @@ function drawVideos() {
     ctx.globalCompositeOperation = "source-over"
   })
 
+  // Get pixel data
+  // let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+  // Todo calculate effects based on imageDate
+
   // If showText is true, draw debug text
   if (showText) {
     drawDebugText()

src/utils/EventEmitter.js

@@ -0,0 +1,42 @@
+// EventEmitter.js
+class EventEmitter {
+    constructor(debug = false) {
+        this.events = {};
+        this.debug = debug;
+    }
+
+    on(event, listener) {
+        if (!this.events[event]) this.events[event] = [];
+        this.events[event].push(listener);
+    }
+
+    once(event, listener) {
+        const wrapper = (...args) => {
+            listener(...args);
+            this.off(event, wrapper);
+        };
+        this.on(event, wrapper);
+    }
+
+    off(event, listener) {
+        if (this.events[event]) {
+            this.events[event] = this.events[event].filter(l => l !== listener);
+        }
+    }
+
+    emit(event, data) {
+        if (this.debug) console.log(`Event emitted: ${event}`, data);
+        (this.events[event] || []).forEach(listener => listener(data));
+        (this.events['*'] || []).forEach(listener => listener(event, data));
+    }
+
+    listeners(event) {
+        return this.events[event] || [];
+    }
+
+    clear() {
+        this.events = {};
+    }
+}
+
+export default EventEmitter;