From 32bf77118160b302d23f79e9364ff0dd62db4bcd Mon Sep 17 00:00:00 2001
From: Eyal Gruss <eyalgruss@gmail.com>
Date: Wed, 25 Sep 2024 19:36:24 +0300
Subject: [PATCH] make the loop mode more partyfull

---
 index.html             |  4 ++--
 models/dotcamera.js    |  8 +++++---
 models/ruttetraizer.js | 29 +++++++++++++++++++++++++++--
 script.js              | 25 ++++++++++++++++---------
 utils/videoloader.js   |  1 -
 5 files changed, 50 insertions(+), 17 deletions(-)
diff --git a/index.html b/index.html
index fe6e8ee..2b0d4a2 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" type="text/css" href="style.css">
     <script src="script.js" type="module"></script>
 </head>
-<body onload="video_url.value = location.hash.slice(1); video_url.select(); video_url.dispatchEvent(new Event('change'))">  <!-- Chromium allows requesting screen capture without user gesture (against the spec). See: https://issues.chromium.org/issues/40177563 -->
+<body onload="video_url.value = location.hash.slice(1); const loop_mode = location.search.slice(1); if (['loop', 'random'].includes(loop_mode)) {effect.value = loop_mode; effect.dispatchEvent(new Event('change'))}; video_url.select(); video_url.dispatchEvent(new Event('change'))">  <!-- Chromium allows requesting screen capture without user gesture (against the spec). See: https://issues.chromium.org/issues/40177563 -->
     <div id="inputs">
         <input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="40" placeholder="Enter YouTube / Vimeo ID + params or any URL">
         <select id="effect" title="Browse with Alt+↑ / Alt+↓" aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown">
@@ -26,7 +26,7 @@
             </optgroup>
             <hr>
             <optgroup label="WebGL">
-                <option value="dot_camera_swissgl">Dot "camera" (SwissGL)</option>
+                <option value="dotcamera_swissgl">Dot "camera" (SwissGL)</option>
                 <option value="ruttetraizer_threejs">Rutt-Etra-Izer with mouse (Three.js)</option>
             </optgroup>
             <hr>
diff --git a/models/dotcamera.js b/models/dotcamera.js
index bb2ccb9..0bcc358 100644
--- a/models/dotcamera.js
+++ b/models/dotcamera.js
@@ -12,10 +12,12 @@ export default class DotCamera {
         this.rgbMode = rgbMode;
     }
 
-    frame(video, {canvasSize, DPR}) {
+    frame(video, {canvasSize, DPR=devicePixelRatio, loop_start=0}) {
+        const dayMode = loop_start ? loop_start % 2 : this.dayMode;
+        const rgbMode = !!(loop_start ? (loop_start/2|0) % 2 : this.rgbMode);
         const tex = this.glsl({}, {data:video, tag:'video'});
-        const blendParams = this.dayMode ? {Clear:1, Blend:'d-s'} : {Clear:0, Blend:'d+s'};
-        const rgbMode = this.rgbMode;
+        canvasSize = canvasSize ?? tex.size;
+        const blendParams = dayMode ? {Clear:1, Blend:'d-s'} : {Clear:0, Blend:'d+s'};
         const lum = this.glsl({tex:tex.edge.linear, ...blendParams, rgbMode,
             VP:`vec2 r = vec2(ViewSize)/vec2(tex_size()); r /= max(r.x, r.y); VPos.xy = XY/r;`, FP:`
             FOut = tex(UV);
diff --git a/models/ruttetraizer.js b/models/ruttetraizer.js
index fa6284d..ed84872 100644
--- a/models/ruttetraizer.js
+++ b/models/ruttetraizer.js
@@ -2,9 +2,18 @@
 // Original RuttEtraIzer by Felix Turner www.airtight.cc
 
 const scale_rate = .01
+const min_scale = 1
+const max_scale = 10
+const rot_rate_x = .0003
+const rot_rate_y = .0002
+const min_rot = .33
+const max_rot = .66
+
 let scale = 2
 let pointer_x = .5
 let pointer_y = .5
+let rot_dir_x = 1
+let rot_dir_y = 1
 let down_x
 let down_y
 
@@ -36,10 +45,10 @@ export default class RuttEtraIzer {
 		    }
         })
 
-        canvas.addEventListener('wheel', e => scale = Math.max(1, Math.min(scale + e.deltaY*scale_rate, 10)), {passive: true})
+        canvas.addEventListener('wheel', e => scale = Math.max(min_scale, Math.min(scale + e.deltaY*scale_rate, max_scale)), {passive: true})
     }
 
-    frame(W, H, rgbx, {scanStep=7, depth=100}={}) {
+    frame(W, H, rgbx, {scanStep=7, depth=100, loop_start=0}={}) {
         const THREE = this.THREE
 
         if (this.lineGroup) {
@@ -63,6 +72,22 @@ export default class RuttEtraIzer {
             geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3))
             this.lineGroup.add(new THREE.Line(geometry, this.material))
         }
+        if (loop_start) {
+            const rand = Math.random()
+            if (rand > .5) {
+                pointer_x += rot_dir_x * rot_rate_x
+                if (pointer_x < min_rot || pointer_x > max_rot) {
+                    pointer_x = Math.max(min_rot, Math.min(pointer_x, max_rot))
+                    rot_dir_x *= -1
+                }
+            } else {
+                pointer_y += rot_dir_y * rot_rate_y
+                if (pointer_y < min_rot || pointer_y > max_rot) {
+                    pointer_y = Math.max(min_rot, Math.min(pointer_y, max_rot))
+                    rot_dir_y *= -1
+                }
+            }
+        }
         this.lineGroup.scale.setScalar(scale)
 	    this.lineGroup.rotation.x = (pointer_y*2-1)*Math.PI
 	    this.lineGroup.rotation.y = (pointer_x*2-1)*Math.PI
diff --git a/script.js b/script.js
index 93ab0a0..69ebfc2 100644
--- a/script.js
+++ b/script.js
@@ -14,8 +14,8 @@ import {
 } from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.15/vision_bundle.mjs'
 const mediapipe_wasm_url = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.15/wasm'
 
-import {AutoModel, AutoProcessor, RawImage} from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/transformers.min.js'
-// import {AutoModel, AutoProcessor, RawImage} from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0-alpha.16/dist/transformers.min.js'
+import {AutoModel, AutoProcessor, RawImage, env as transformersEnv} from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/transformers.min.js'
+// import {AutoModel, AutoProcessor, RawImage, env as transformersEnv} from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0-alpha.16/dist/transformers.min.js'
 // Note modnet on transformers v3 is 10x faster on chromium 128 but crashed on 129+. See: https://github.com/xenova/transformers.js/issues/943
 
 import 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.21.0/dist/tf.min.js'
@@ -45,10 +45,10 @@ if (!('CropTarget' in window &&
     'MediaStreamTrackProcessor' in window &&
     'MediaStreamTrackGenerator' in window &&
     'VideoFrame' in window)) {
-    fix_size_clear(canvasCtx, 1280, 720)
     canvasCtx.font = '60px sans-serif'
     canvasCtx.fillStyle = 'white'
     canvasCtx.textAlign = 'center'
+    fix_size_clear(canvasCtx, 1280, 720)
     canvasCtx.fillText('Not supported by your browser :(', canvas.width / 2, canvas.height/2 - 100)
     canvasCtx.fillText('Try in Chromium desktop!', canvas.width / 2, canvas.height/2 + 100)
     canvas.textContent = 'Not supported by your browser. Try in Chromium desktop!'
@@ -66,18 +66,25 @@ video_url.addEventListener('change', e => {
         get_video(e.currentTarget)
     skip_changed = false
 })
+video_url.addEventListener('click', e => {
+    skip_changed = false
+    if (e.currentTarget.value)
+        capture()
+})
 video_url.addEventListener('focus', e => {
     skip_changed = false
     e.currentTarget.select()  // Broken in Chrome. See: https://issues.chromium.org/issues/40345011#comment45
 })
 
-let loop_mode
+let loop_mode, loop_start
 effect.addEventListener('change', e => {
     if (e.currentTarget.value)
         capture()
     loop_mode = null
+    loop_start = 0
     if (e.currentTarget.value == 'loop' || e.currentTarget.value == 'random') {
         loop_mode = e.currentTarget.value
+        loop_start = performance.now()
         loop_effects()
     }
 })
@@ -93,8 +100,8 @@ document.addEventListener('keydown', e => {
 function loop_effects() {
     if (!loop_mode || !capture_started)
         return
-    const effects = [...effect.querySelectorAll('option:not([disabled]):not([label="meta" i] > *)')].map(e => e.value)
-    effect.value = effects[(effects.indexOf(effect.value)+(loop_mode == 'random' ? Math.random()*(effects.length-1) + 1 | 0: 1)) % effects.length]
+    const effects = [...effect.querySelectorAll('option:not([disabled]):not([label="meta" i] > *)')].filter(e => !transformersEnv.version.startsWith('2.') || !e.value.includes('transformers')).map(e => e.value)
+    effect.value = effects[(effects.indexOf(effect.value)+(loop_mode == 'random' ? Math.random()*(effects.length-1) + 1 | 0 : 1)) % effects.length]
     setTimeout(loop_effects, loop_secs * 1000)
 }
 
@@ -280,7 +287,7 @@ const effect_funcs = {
             bgrx[i * 4] = bgrx[i*4 + 1] = bgrx[i*4 + 2] = data[i]
     },
 
-    dot_camera_swissgl: (W, H, rgbx, models, videoFrame, canvasCtx, gl_engines) => {
+    dotcamera_swissgl: (W, H, rgbx, models, videoFrame, canvasCtx, gl_engines) => {
         const canvas = canvasCtx.canvas
         const glsl = gl_engines.swissgl
         const gl_canvas = glsl.gl.canvas
@@ -288,7 +295,7 @@ const effect_funcs = {
             canvas.width = gl_canvas.width = W
             canvas.height = gl_canvas.height = H
         }
-        models.dotcamera.frame(videoFrame, {canvasSize: [W, H], DPR: 1.5})
+        models.dotcamera.frame(videoFrame, {canvasSize: [W, H], DPR: 1.5, loop_start: loop_start})
         canvasCtx.drawImage(gl_canvas, 0, 0)
     },
 
@@ -301,7 +308,7 @@ const effect_funcs = {
             canvas.height = gl_canvas.height = H
             renderer.setViewport(0, 0, W, H)
         }
-        models.ruttetra.frame(W, H, rgbx, {scanStep: 7, depth: 100})
+        models.ruttetra.frame(W, H, rgbx, {scanStep: 7, depth: 100, loop_start: loop_start})
         canvasCtx.drawImage(gl_canvas, 0, 0)
     },
 
diff --git a/utils/videoloader.js b/utils/videoloader.js
index 9b09922..065028e 100644
--- a/utils/videoloader.js
+++ b/utils/videoloader.js
@@ -47,7 +47,6 @@ export default function load_video(input, video_elem) {
         hash += hash_params
         params += hash_params
         url = `https://player.vimeo.com/video/${vid_id}?autoplay=1&byline=0&dnt=1&loop=1&&muted=1&portrait=0&quality=1080p&title=0${params}`
-
     }
     else if (host && !host.includes('youtu')) {  // Any non YouTube / Vimeo URL
         url = input
