Cinemagraph overlay (#135)

* added uniform for showing overlays

* added redux

* added overlays

* added overlay and fixed cinemagraph draw lag

Author: Zachary Denham

renderer/components/cinemagraphToolBar.js

@@ -73,6 +73,14 @@ class NavBar extends React.Component {
                 onClick={this.toggleTool}
               />
             </div>
+            <div className="tool-button">
+              <IconButton
+                stroke={globalStyles.accent}
+                name={this.props.showOverlay ? 'x' : 'droplet'}
+                backgroundColor={globalStyles.secondary}
+                onClick={this.props.toggleCinemagraphOverlay}
+              />
+            </div>
             <div className="slider">
               <span className="slider-label">size</span>
 

renderer/components/icon.js

@@ -570,6 +570,22 @@ const Icon = props => {
           <line x1="8" y1="12" x2="16" y2="12" />
         </svg>
       );
+    case 'droplet':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={props.stroke}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+        </svg>
+      );
     default:
       return null;
   }

renderer/containers/cinemagraph/actions.js

@@ -13,6 +13,7 @@ export const actionTypes = {
   SELECT_CINEMAGRAPH_ERASE_TOOL: 'SELECT_CINEMAGRAPH_ERASE_TOOL',
   SELECT_CINEMAGRAPH_BRUSH_TOOL: 'SELECT_CINEMAGRAPH_BRUSH_TOOL',
   START_CINEMAGRAPH_PREVIEW: 'START_CINEMAGRAPH_PREVIEW',
+  TOGGLE_CINEMAGRAPH_OVERLAY: 'TOGGLE_CINEMAGRAPH_OVERLAY',
 };
 
 export const selectCinemagraphVideo = files => {
@@ -86,3 +87,7 @@ export const removeCinemagraphBrushStroke = (isUndo, isRedo, mask) => {
 export const startCinemagraphPreview = callback => {
   return { type: actionTypes.START_CINEMAGRAPH_PREVIEW, callback };
 };
+
+export const toggleCinemagraphOverlay = () => {
+  return { type: actionTypes.TOGGLE_CINEMAGRAPH_OVERLAY };
+};

renderer/containers/cinemagraph/cinemagraph.js

@@ -46,6 +46,8 @@ class Cinemagraph extends React.Component {
             exports={this.props.exports}
             brushSize={this.props.cinemagraph.brushSize}
             brushBlur={this.props.cinemagraph.brushBlur}
+            toggleCinemagraphOverlay={this.props.toggleCinemagraphOverlay}
+            showOverlay={this.props.cinemagraph.showOverlay}
             tool={this.props.cinemagraph.tool}
           />
           <CinemagraphCanvas
@@ -61,6 +63,7 @@ class Cinemagraph extends React.Component {
             addCinemagraphBrushStroke={this.props.addCinemagraphBrushStroke}
             startCinemagraphPreview={this.props.startCinemagraphPreview}
             preview={this.props.cinemagraph.preview}
+            showOverlay={this.props.cinemagraph.showOverlay}
             tool={this.props.cinemagraph.tool}
           />
           <Trimmer />
@@ -100,6 +103,8 @@ const mapDispatchToProps = dispatch => {
       dispatch(Actions.selectCinemagraphBrushTool()),
     selectCinemagraphEraseTool: () =>
       dispatch(Actions.selectCinemagraphEraseTool()),
+    toggleCinemagraphOverlay: () =>
+      dispatch(Actions.toggleCinemagraphOverlay()),
   };
 };
 

renderer/containers/cinemagraph/reducer.js

@@ -17,6 +17,7 @@ const initialState = {
     width: 0,
     height: 0,
   },
+  showOverlay: false,
   showExportModal: false,
   isRendering: false,
   tool: 'eraser',
@@ -129,6 +130,13 @@ export const cinemagraphReducer = (state = initialState, action) => {
         ...state,
         tool: 'eraser',
       };
+    case actionTypes.TOGGLE_CINEMAGRAPH_OVERLAY:
+      const showOverlay = !state.showOverlay;
+      state.preview.setShowOverlay(showOverlay);
+      return {
+        ...state,
+        showOverlay,
+      };
     default:
       return state;
   }

renderer/globalStyles.js

@@ -1,6 +1,7 @@
 export const primary = '#fff';
 export const secondary = '#6369D1';
 export const accent = '#fff';
+export const action = '#007FFF';
 export const background = '#333333';
 export const backgroundLight = '#444343';
 export const backgroundAccent = '#666666';

renderer/lib/hexToRGB.js

@@ -0,0 +1,16 @@
+export default hex => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+};

renderer/webgl/helpers/renderCinemagraph.js

@@ -5,11 +5,20 @@ import getShader from './getShader';
 import loadProgram from './loadProgram';
 import createImageGrid from './createImageGrid';
 import TarToMp4 from './tarToMp4';
+import * as globalStyles from '../../globalStyles';
+import hexToRGB from '../../lib/hexToRGB';
 
 class Preview {
   constructor(boundingRect, exportCallback) {
     this.boundingRect = boundingRect;
     this.exportCallback = exportCallback;
+    this.overlayColor = hexToRGB(globalStyles.action);
+
+    // normalize color
+    this.overlayColor.r = this.overlayColor.r / 255.0;
+    this.overlayColor.g = this.overlayColor.g / 255.0;
+    this.overlayColor.b = this.overlayColor.b / 255.0;
+    this.showOverlay = false;
 
     this.canvas = document.getElementById('cinemagraphcanvas');
     this.gl = this.canvas.getContext('webgl');
@@ -64,7 +73,15 @@ class Preview {
     let gl = this.gl;
     try {
       let vertexshader = getShader(gl, cinemagraphVertexShader, 'vertex');
-      let fragmentshader = getShader(gl, cinemagraphFragShader, 'frag');
+      let fragmentshader = getShader(
+        gl,
+        cinemagraphFragShader(
+          this.overlayColor.r.toFixed(5).toString(),
+          this.overlayColor.g.toFixed(5).toString(),
+          this.overlayColor.b.toFixed(5).toString(),
+        ),
+        'frag',
+      );
 
       this.pictureprogram = loadProgram(gl, vertexshader, fragmentshader);
       gl.useProgram(this.pictureprogram);
@@ -98,9 +115,15 @@ class Preview {
         'u_image1',
       );
 
+      this.pictureprogram.show_overlay = gl.getUniformLocation(
+        this.pictureprogram,
+        'show_overlay',
+      );
+
       // Set the texture to use.
       gl.uniform1i(this.pictureprogram.u_image0, 0);
       gl.uniform1i(this.pictureprogram.u_image1, 1);
+      gl.uniform1i(this.pictureprogram.show_overlay, 2);
     } catch (e) {
       console.log('ERROR MAKING SHADERS: ', e);
       return;
@@ -135,6 +158,10 @@ class Preview {
     this.start();
   };
 
+  setShowOverlay = newOverlay => {
+    this.showOverlay = newOverlay;
+  };
+
   update = (newPoint, brushSize, brushBlur, brushTool) => {
     const normalizedPoint = this.normalizedPoint(
       newPoint[0],
@@ -144,30 +171,50 @@ class Preview {
     );
 
     // normalize brush size based off of actual image width
-    let normalizedBrushSize =
-      brushSize * this.videoWidth / this.boundingRect.width;
+    let normalizedBrushSize = Math.ceil(
+      brushSize * this.videoWidth / this.boundingRect.width,
+    );
+
+    const minX = Math.floor(
+      Math.max(normalizedPoint.x - normalizedBrushSize, 0),
+    );
+    const maxX = Math.min(
+      normalizedPoint.x + normalizedBrushSize,
+      this.videoWidth,
+    );
+    const minY = Math.floor(
+      Math.max(normalizedPoint.y - normalizedBrushSize, 0),
+    );
+    const maxY = Math.min(
+      normalizedPoint.y + normalizedBrushSize,
+      this.videoHeight,
+    );
 
     let blur = 21 - 2 * brushBlur;
 
-    let l = this.brushedImage.data.length / 4;
-    for (let i = 0; i < l; i++) {
-      const x = i % this.videoWidth;
-      const y = Math.min(i / this.videoWidth);
-      let dist = Math.sqrt(
-        Math.pow(normalizedPoint.x - x, 2) + Math.pow(normalizedPoint.y - y, 2),
-      );
-      if (dist < normalizedBrushSize) {
-        const normalizedDistance =
-          Math.pow(dist / normalizedBrushSize, blur) * 255.0;
-
-        const opacity =
-          brushTool == 'eraser'
-            ? Math.min(this.brushedImage.data[i * 4 + 3], normalizedDistance)
-            : Math.max(
-                this.brushedImage.data[i * 4 + 3],
-                255.0 - normalizedDistance,
-              );
-        this.brushedImage.data[i * 4 + 3] = opacity;
+    // only iterate over the coordinates within
+    // the square of brush size
+    for (let y = 0; y < maxY; y++) {
+      for (let x = 0; x < maxX; x++) {
+        const i = this.videoWidth * y + x;
+        // console.log("I: ", i);
+        let dist = Math.sqrt(
+          Math.pow(normalizedPoint.x - x, 2) +
+            Math.pow(normalizedPoint.y - y, 2),
+        );
+        if (dist < normalizedBrushSize) {
+          const normalizedDistance =
+            Math.pow(dist / normalizedBrushSize, blur) * 255.0;
+
+          const opacity =
+            brushTool == 'eraser'
+              ? Math.min(this.brushedImage.data[i * 4 + 3], normalizedDistance)
+              : Math.max(
+                  this.brushedImage.data[i * 4 + 3],
+                  255.0 - normalizedDistance,
+                );
+          this.brushedImage.data[i * 4 + 3] = opacity;
+        }
       }
     }
   };
@@ -244,6 +291,11 @@ class Preview {
 
     gl.enableVertexAttribArray(this.texCoordLocation);
 
+    gl.uniform1i(
+      gl.getUniformLocation(this.pictureprogram, 'show_overlay'),
+      this.showOverlay,
+    );
+
     gl.drawArrays(gl.TRIANGLES, 0, resolution * resolution * 2 * 3);
   };
 

renderer/webgl/shaders/cinemagraphFragShader.js

@@ -1,18 +1,25 @@
-export default `
+export default (r, g, b) => {
+  return `
 precision mediump float;
 
 // uniform to use for texture 
 uniform sampler2D u_image0; // corresponds to the video
 uniform sampler2D u_image1; // corresponds to the still
+uniform bool show_overlay;
 varying vec2 v_texCoord;
 
 void main() {
   // gl_FragColor always specifies the color to make the current pixel 
   vec4 color0 = texture2D(u_image0, v_texCoord);
   vec4 color1 = texture2D(u_image1, v_texCoord);
+  vec4 colorOverlay = vec4(${r}, ${g}, ${b}, 1.0);
   float a = color1.a;
   color1.a = 1.0;
+  if(show_overlay) {
+  	color1 = 0.65 * a * color1 + 0.35 * a * colorOverlay;
+  }
   vec4 color = color1*a + (1.0 - a)*color0;
   gl_FragColor = color;
 }
 `;
+};