Add "Hopper" and "Overheat' filters

MarkNovik · Apr 30, 2021 · 720a281 · 720a281
1 parent 86204c1
commit 720a281
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 3 deletions.
diff --git a/TODO.org b/TODO.org
@@ -1,7 +1,7 @@
 - [-] Alpha
   - [-] Presets
-    - [ ] ppHopper
-    - [ ] ppOverheat
+    - [X] ppHopper
+    - [X] ppOverheat
     - [ ] ppBounce
     - [ ] ppCircle
     - [ ] ppSlide

diff --git a/index.js b/index.js
@@ -94,6 +94,116 @@ void main() {
     gl_FragColor = texture2D(emote, vec2(uv.x, 1.0 - uv.y));
     gl_FragColor.w = floor(gl_FragColor.w + 0.5);
 }
+`
+    },
+    "Hopper": {
+        "duration": 0.85,
+        "vertex": `#version 100
+precision mediump float;
+
+attribute vec2 meshPosition;
+uniform float time;
+
+varying vec2 uv;
+
+float sliding_from_left_to_right(float time_interval) {
+    return (mod(time, time_interval) - time_interval * 0.5) / (time_interval * 0.5);
+}
+
+float flipping_directions(float time_interval) {
+    return 1.0 - 2.0 * mod(floor(time / time_interval), 2.0);
+}
+
+void main() {
+    float scale = 0.40;
+    float hops = 2.0;
+    float x_time_interval = 0.85 / 2.0;
+    float y_time_interval = x_time_interval / (2.0 * hops);
+    float height = 0.5;
+    vec2 offset = vec2(
+        sliding_from_left_to_right(x_time_interval) * flipping_directions(x_time_interval) * (1.0 - scale),
+        ((sliding_from_left_to_right(y_time_interval) * flipping_directions(y_time_interval) + 1.0) / 4.0) - height);
+
+    gl_Position = vec4(
+        meshPosition * scale + offset,
+        0.0,
+        1.0);
+
+    uv = (meshPosition + vec2(1.0, 1.0)) / 2.0;
+
+    uv.x = (flipping_directions(x_time_interval) + 1.0) / 2.0 - uv.x * flipping_directions(x_time_interval);
+}
+`,
+        "fragment": `#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+void main() {
+    gl_FragColor = texture2D(emote, vec2(uv.x, 1.0 - uv.y));
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}
+`
+    },
+    "Overheat": {
+        "duration": 0.85 / 8.0 * 2.0,
+        "vertex": `#version 100
+precision mediump float;
+
+attribute vec2 meshPosition;
+uniform float time;
+
+varying vec2 uv;
+
+float sliding_from_left_to_right(float time_interval) {
+    return (mod(time, time_interval) - time_interval * 0.5) / (time_interval * 0.5);
+}
+
+float flipping_directions(float time_interval) {
+    return 1.0 - 2.0 * mod(floor(time / time_interval), 2.0);
+}
+
+void main() {
+    float scale = 0.40;
+    float hops = 2.0;
+    float x_time_interval = 0.85 / 8.0;
+    float y_time_interval = x_time_interval / (2.0 * hops);
+    float height = 0.5;
+    vec2 offset = vec2(
+        sliding_from_left_to_right(x_time_interval) * flipping_directions(x_time_interval) * (1.0 - scale),
+        ((sliding_from_left_to_right(y_time_interval) * flipping_directions(y_time_interval) + 1.0) / 4.0) - height);
+
+    gl_Position = vec4(
+        meshPosition * scale + offset,
+        0.0,
+        1.0);
+
+    uv = (meshPosition + vec2(1.0, 1.0)) / 2.0;
+
+    uv.x = (flipping_directions(x_time_interval) + 1.0) / 2.0 - uv.x * flipping_directions(x_time_interval);
+}
+`,
+        "fragment": `#version 100
+
+precision mediump float;
+
+uniform vec2 resolution;
+uniform float time;
+
+uniform sampler2D emote;
+
+varying vec2 uv;
+
+void main() {
+    gl_FragColor = texture2D(emote, vec2(uv.x, 1.0 - uv.y)) * vec4(1.0, 0.0, 0.0, 1.0);
+    gl_FragColor.w = floor(gl_FragColor.w + 0.5);
+}
 `
     },
     "Laughing": {
@@ -414,7 +524,6 @@ window.onload = () => {
     for (let name in presets) {
         presetsSelect.add(new Option(name));
     }
-    presetsSelect.selectedIndex = 3;
 
     const vertexAttribs = {
         "meshPosition": 0