velvia

jwagner · Jan 20, 2016 · 9918862 · 9918862
1 parent 26400a0
commit 9918862
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -7,7 +7,8 @@
         "beforeEach",
         "afterEach",
         "before",
-        "after"
+        "after",
+        "self"
     ],
     "esnext": true,
     "globalstrict": true,

diff --git a/src/controls.js b/src/controls.js
@@ -10,23 +10,22 @@ import {isSmall} from './responsive-helpers';
 class Controls {
     constructor(el) {
         this.el = el;
-        this.basicControls = ['clut', 'brightness', 'contrast', 'vibrance', 'grain', 'vignette', 'lightLeak'];
+        this.basicControls = ['clut', 'brightness', 'contrast', 'temperature', 'vibrance', 'grain', 'vignette', 'lightLeak'];
         this.inputs = [
             new ClutControl('clut', 'Film'),
-            new RangeControl('brightness', 'Brightness', 0, 2, 1),
-            new RangeControl('blacks', 'Blacks', -0.5, 0.5, 0),
-            new RangeControl('contrast', 'Contrast', -1, 1, 0),
-            new RangeControl('temperature', 'Temperature', 3000, 25000, 6500, 1),
-            new RangeControl('vibrance', 'Vibrance', -1, 1, 0),
-            new RangeControl('saturation', 'Saturation', -1, 1, 0),
             new RangeControl('grain', 'Grain', 0, 0.5, 0),
             new RangeControl('grainScale', 'Grain Scale', 0.01, 2, 1),
             new RangeControl('vignette', 'Vignette', 0, 10, 0),
             new RangeControl('vignetteRadius', 'Vignette Radius', 0.01, 2, 1),
             new RangeControl('lightLeak', 'Light Leak', 0, 2, 0),
             new RangeControl('lightLeakIntensity', 'Light Leak Intensity', 0, 2, 1),
             new RangeControl('lightLeakScale', 'Light Leak Scale', 0.25, 1, 4),
-
+            new RangeControl('brightness', 'Brightness', 0, 2, 1),
+            new RangeControl('blacks', 'Blacks', -0.5, 0.5, 0),
+            new RangeControl('contrast', 'Contrast', -1, 1, 0),
+            new RangeControl('temperature', 'Temperature', 3000, 25000, 6500, 1),
+            new RangeControl('vibrance', 'Vibrance', -1, 1, 0),
+            new RangeControl('saturation', 'Saturation', -1, 1, 0),
         ];
         this.inputsByName = _.indexBy(this.inputs, 'name');
 

diff --git a/src/image-processing.js b/src/image-processing.js
@@ -176,17 +176,27 @@ export function adjust(out, image, brightness, contrast, saturation, vibrance, b
         b = Math.max(0, b-blacks);
 
         // vibrance
-        // red is overweighted to protect red tones (like skin) a bit more
-        let s = Math.max(Math.abs(r-l)*2, Math.abs(g-l), Math.abs(b-l)),
-            v = Math.max(0.5-s, 0)*vibrance*2;
-        r += (r-l)*v;
-        g += (g-l)*v;
-        b += (b-l)*v;
+        // based on darktables velvia iop
+        let pmax = Math.max(r, g, b);
+        let pmin = Math.min(r, g, b);
+        let plum = (pmax + pmin) / 2;
+        let psat = plum < 0.5 ? (pmax - pmin) / (1e-5 + pmax + pmin)
+                              : (pmax - pmin) / (1e-5 + Math.max(0, 2 - pmax - pmin));
+        let vbias = 0.8;
+        let pweight = clamp(((1 - (1.5 * psat)) + ((1 + (Math.abs(plum - 0.5) * 2)) * (1 - vbias))) / (1 + (1 - vbias)), 0, 1);
+        let saturationVibrance = saturation + vibrance*pweight*2;
+
+
+        //let s = Math.max(Math.abs(r-l)*2, Math.abs(g-l), Math.abs(b-l)),
+            //v = Math.max(0.5-s, 0)*vibrance*2;
+        //r += (r-l)*v;
+        //g += (g-l)*v;
+        //b += (b-l)*v;
 
         // saturation
-        r += (r-l)*saturation;
-        g += (g-l)*saturation;
-        b += (b-l)*saturation;
+        r += (r-l)*saturationVibrance;
+        g += (g-l)*saturationVibrance;
+        b += (b-l)*saturationVibrance;
 
         // contrast
         r += (r-0.5)*contrast;

diff --git a/templates/index.jade b/templates/index.jade
@@ -21,8 +21,8 @@ html(lang="en")
         meta(name="description" content=description)
         meta(property="og:title" content="Free Online Analog Film Emulator")
         meta(property="og:url" content="http://29a.ch/film-emulator/")
-        meta(property="og:image" content="http://29a.ch/film-emulator/image.jpg")
-        link(rel='canonical', href='http://29a.ch/film-emulator/')
+        meta(property="og:image" content="https://29a.ch/film-emulator/image.jpg")
+        link(rel='canonical', href='https://29a.ch/film-emulator/')
         link(rel='prefetch' src='worker.js')
     body
         .app
@@ -95,7 +95,7 @@ html(lang="en")
                         label JPEG Export Quality
                             input(name='jpegQuality' type='number' value=90 min=50 max=100 step=1)
                     p
-                        label High Quality Preview (very slow)
+                        label High Quality Preview (slow)
                             input(name='highQualityPreview' type='checkbox' value='true')
                     p
                         label Show advanced controls
@@ -124,6 +124,9 @@ html(lang="en")
                         | by 
                         | <a href="http://blog.patdavid.net/2013/09/film-emulation-presets-in-gmic-gimp.html">Patrick David</a>.
 
+                    p
+                        | The vibrance slider is based on the velvia operation in <a href="https://www.darktable.org/">darktable</a>.
+
                     h3 FAQ
 
                     p.faq-question