adds fps, quality, and dither options

SOBEX · Nov 8, 2024 · c89c3fe · c89c3fe
1 parent 57dd838
commit c89c3fe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -31,6 +31,28 @@ <h2>2. Select a Filter</h2>
     <h2>3. Render the GIF</h2>
     <p>Click "Render" and when the rendering process is done you can just Right Click the final image and Save it as a GIF that you can then upload to <a href="https://betterttv.com/">BTTV</a>.</p>
     <div class="widget">
+      <div class="widget-element">
+        <label for="fps">FPS:</label>
+        <input type="number" id="fps" min="1" step="1" value="30" />
+      </div>
+      <div class="widget-element">
+        <label for="quality">Quality:</label>
+        <input type="number" id="quality" min="1" step="1" value="10" />
+      </div>
+      <div class="widget-element">
+        <label for="dither">Dithering Algorithm:</label>
+          <select id="dither">
+            <option value="">None</option>
+            <option value="FloydSteinberg">FloydSteinberg</option>
+            <option value="FloydSteinberg-serpentine">FloydSteinberg-serpentine</option>
+            <option value="FalseFloydSteinberg">FalseFloydSteinberg</option>
+            <option value="FalseFloydSteinberg-serpentine">FalseFloydSteinberg-serpentine</option>
+            <option value="Stucki">Stucki</option>
+            <option value="Stucki-serpentine">Stucki-serpentine</option>
+            <option value="Atkinson">Atkinson</option>
+            <option value="Atkinson-serpentine">Atkinson-serpentine</option>
+          </select>
+        </div>
       <div class="widget-element progress-bar"><div class="progress" id="render-progress"></div></div>
       <div class="widget-element"><input id="render" type="submit" value="Render" /></div>
       <div class="widget-element">

diff --git a/js/index.js b/js/index.js
@@ -283,7 +283,8 @@ function FilterSelector() {
         }
         var gif = new GIF({
             workers: 5,
-            quality: 10,
+            quality: document.getElementById('quality')?.value || 10,
+            dither: document.getElementById('dither')?.value || false,
             width: CANVAS_WIDTH,
             height: CANVAS_HEIGHT,
             transparent: program.transparent
@@ -299,7 +300,7 @@ function FilterSelector() {
                 context.vars[paramName] = snapshot[paramName].value;
             }
         }
-        var fps = 30;
+        var fps = document.getElementById('fps')?.value || 30;
         var dt = 1.0 / fps;
         var duration = Math.min(run_expr(program.duration, context), 60);
         var renderProgress = document.getElementById("render-progress");

diff --git a/ts/index.ts b/ts/index.ts
@@ -1,4 +1,4 @@
-let feature_params = false; 
+let feature_params = false;
 
 interface VertexAttribs {
     [name: string]: number
@@ -124,7 +124,7 @@ function loadFilterProgram(gl: WebGLRenderingContext, filter: Filter, vertexAttr
         if (paramName in uniforms) {
             throw new Error(`Redefinition of existing uniform parameter ${paramName}`);
         }
-        
+
         switch (filter.params[paramName].type) {
         case "float": {
             const valuePreview = span(filter.params[paramName].init.toString());
@@ -388,7 +388,8 @@ function FilterSelector() {
         // TODO(#74): gif.js typing are absolutely broken
         const gif = new GIF({
             workers: 5,
-            quality: 10,
+            quality: document.getElementById('quality')?.value || 10,
+            dither: document.getElementById('dither')?.value || false,
             width: CANVAS_WIDTH,
             height: CANVAS_HEIGHT,
             transparent: program.transparent,
@@ -406,7 +407,7 @@ function FilterSelector() {
             }
         }
 
-        const fps = 30;
+        const fps = document.getElementById('fps')?.value || 30;
         const dt = 1.0 / fps;
         // TODO(#59): come up with a reasonable way to handle malicious durations
         const duration = Math.min(run_expr(program.duration, context), 60);