script.js

@@ -14,61 +14,6 @@ let cachedVideos = []
 
 let showText = true
 
-const parameterStore = {
-    blendModeParams: {
-        mode: "tile", // New blend mode for tiling
-        opacity: 1,
-        // Additional parameters specific to the tile blend mode
-        tilePositionX: 0, // X-coordinate for positioning the tiled video
-        tilePositionY: 0, // Y-coordinate for positioning the tiled video
-        tileScaleX: 1, // Scale factor along the X-axis for the tiled video
-        tileScaleY: 1, // Scale factor along the Y-axis for the tiled video
-    },
-    filterParams: {
-        grayscale: 0,
-        blur: 0,
-        // Add more filter parameters as needed
-    },
-    presets: {
-        default: {
-            blendModeParams: { mode: "screen", opacity: 1 },
-        },
-        sepia: {
-            blendModeParams: { mode: "overlay", opacity: 0.5 },
-        },
-        tile: {
-            tilePositionX: 0,
-            tilePositionY: 0,
-            tileScaleX: 1,
-            tileScaleY: 1,
-        },
-        // Add more presets as needed
-    },
-    selectedPreset: "default",
-};
-
-function applyPreset(presetName) {
-  const preset = parameterStore.presets[presetName];
-  if (preset) {
-    for (const [category, categoryParams] of Object.entries(preset)) {
-      // Check if the category exists in the parameter store
-      if (parameterStore.hasOwnProperty(category)) {
-        // Iterate over each parameter in the preset
-        for (const [paramKey, paramValue] of Object.entries(categoryParams)) {
-          // Update the corresponding parameter in the parameter store
-          parameterStore[category][paramKey] = paramValue;
-        }
-      } else {
-        console.error(`Category "${category}" not found in parameter store.`);
-      }
-    }
-    // Update selected preset
-    parameterStore.selectedPreset = presetName;
-  } else {
-    console.error(`Preset "${presetName}" not found.`);
-  }
-}
-
 function debugLog(...args) {
   if (debugMode) {
     console.log(...args)
@@ -123,7 +68,7 @@ function handleVideoEnded(event) {
 function drawVideos() {
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-  let blendModes = ["screen","overlay","difference","lighten"]
+  let blendModes = ["source-over","overlay","screen"]
 
   videos.forEach((video,i) => {
     // Calculate scaling factor to fit the canvas
@@ -139,9 +84,9 @@ function drawVideos() {
 
     // Use default blend mode for first video (i=0), repeat the rest of blendModes
     if (i === 0) {
-      ctx.globalCompositeOperation = "source-over"
+      ctx.globalCompositeOperation = blendModes[0]
     } else {
-      ctx.globalCompositeOperation = blendModes[i % blendModes.length]
+      ctx.globalCompositeOperation = blendModes[(i - 1) % (blendModes.length - 1) + 1]
     }
 
     // Draw the current video frame onto the canvas
@@ -164,23 +109,9 @@ function drawDebugText() {
   // Set font style and color
   ctx.font = "16px Arial"
   ctx.fillStyle = "white"
-  let padding = 20
-
-  // Calculate the position for the active preset text at the top center of the canvas
-  const presetText = `${parameterStore.selectedPreset}`;
-  const textWidth = ctx.measureText(presetText).width;
-  const centerX = canvas.width / 2;
-  const positionX = centerX - textWidth / 2;
-  const positionY = padding;
-
-  // Set text alignment to center horizontally
-  ctx.textAlign = "center";
-  ctx.textBaseline = "top";
-
-  // Draw the active preset text
-  ctx.fillText(presetText, positionX, positionY);
 
   let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, top-right, bottom-left
+  let padding = 20
 
   videos.forEach((video, i) => {
     // Get the corner coordinates for the current video