Zyh

README.md

@@ -1,16 +1,16 @@
 # Nerfies
 
-This is the repository that contains source code for the [Nerfies website](https://nerfies.github.io).
+This is the repository that contains source code for the [Anymate](https://anymate3d.github.io).
 
-If you find Nerfies useful for your work please cite:
+<!-- If you find Anymate useful for your work please cite:
 ```
 @article{park2021nerfies
-  author    = {Park, Keunhong and Sinha, Utkarsh and Barron, Jonathan T. and Bouaziz, Sofien and Goldman, Dan B and Seitz, Steven M. and Martin-Brualla, Ricardo},
-  title     = {Nerfies: Deformable Neural Radiance Fields},
-  journal   = {ICCV},
-  year      = {2021},
+  author    = {},
+  title     = {},
+  journal   = {},
+  year      = {},
 }
-```
+``` -->
 
 # Website License
 <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.

static/css/index.css

@@ -155,3 +155,30 @@ body {
 #interpolation-image-wrapper img {
   border-radius: 5px;
 }
+
+.video-compare-container {
+  width: 63%;
+  margin: 0 auto;
+  position: relative;
+  display: block;
+  line-height: 0;
+}
+
+.video {
+  width: 100%;
+  height: auto;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.videoMerge {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+  background-size: cover;
+}

static/js/video_comparison.js

@@ -0,0 +1,116 @@
+// This is based on: http://thenewcode.com/364/Interactive-Before-and-After-Video-Comparison-in-HTML5-Canvas
+// With additional modifications based on: https://jsfiddle.net/7sk5k4gp/13/
+
+function playVids(videoId) {
+    var videoMerge = document.getElementById(videoId + "Merge");
+    var vid = document.getElementById(videoId);
+
+    var position = 0.5;
+    var vidWidth = vid.videoWidth/2;
+    var vidHeight = vid.videoHeight;
+
+    var mergeContext = videoMerge.getContext("2d");
+
+
+    if (vid.readyState > 3) {
+        vid.play();
+
+        function trackLocation(e) {
+            // Normalize to [0, 1]
+            bcr = videoMerge.getBoundingClientRect();
+            position = ((e.pageX - bcr.x) / bcr.width);
+        }
+        function trackLocationTouch(e) {
+            // Normalize to [0, 1]
+            bcr = videoMerge.getBoundingClientRect();
+            position = ((e.touches[0].pageX - bcr.x) / bcr.width);
+        }
+
+        videoMerge.addEventListener("mousemove",  trackLocation, false); 
+        videoMerge.addEventListener("touchstart", trackLocationTouch, false);
+        videoMerge.addEventListener("touchmove",  trackLocationTouch, false);
+
+
+        function drawLoop() {
+            mergeContext.drawImage(vid, 0, 0, vidWidth, vidHeight, 0, 0, vidWidth, vidHeight);
+            var colStart = (vidWidth * position).clamp(0.0, vidWidth);
+            var colWidth = (vidWidth - (vidWidth * position)).clamp(0.0, vidWidth);
+            mergeContext.drawImage(vid, colStart+vidWidth, 0, colWidth, vidHeight, colStart, 0, colWidth, vidHeight);
+            requestAnimationFrame(drawLoop);
+
+
+            var arrowLength = 0.07 * vidHeight;
+            var arrowheadWidth = 0.020 * vidHeight;
+            var arrowheadLength = 0.04 * vidHeight;
+            var arrowPosY = vidHeight / 10;
+            var arrowWidth = 0.007 * vidHeight;
+            var currX = vidWidth * position;
+
+            // Draw circle
+            mergeContext.arc(currX, arrowPosY, arrowLength*0.7, 0, Math.PI * 2, false);
+            mergeContext.fillStyle = "#FFD79340";
+            mergeContext.fill()
+            //mergeContext.strokeStyle = "#444444";
+            //mergeContext.stroke()
+
+            // Draw border
+            mergeContext.beginPath();
+            mergeContext.moveTo(vidWidth*position, 0);
+            mergeContext.lineTo(vidWidth*position, vidHeight);
+            mergeContext.closePath()
+            mergeContext.strokeStyle = "#444444";
+            mergeContext.lineWidth = 3;            
+            mergeContext.stroke();
+
+            // Draw arrow
+            mergeContext.beginPath();
+            mergeContext.moveTo(currX, arrowPosY - arrowWidth/2);
+
+            // Move right until meeting arrow head
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowWidth/2);
+
+            // Draw right arrow head
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowheadWidth/2);
+            mergeContext.lineTo(currX + arrowLength/2, arrowPosY);
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowheadWidth/2);
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowWidth/2);
+
+            // Go back to the left until meeting left arrow head
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowWidth/2);
+
+            // Draw left arrow head
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowheadWidth/2);
+            mergeContext.lineTo(currX - arrowLength/2, arrowPosY);
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY  - arrowheadWidth/2);
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY);
+
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY - arrowWidth/2);
+            mergeContext.lineTo(currX, arrowPosY - arrowWidth/2);
+
+            mergeContext.closePath();
+
+            mergeContext.fillStyle = "#444444";
+            mergeContext.fill();
+
+
+
+        }
+        requestAnimationFrame(drawLoop);
+    } 
+}
+
+Number.prototype.clamp = function(min, max) {
+  return Math.min(Math.max(this, min), max);
+};
+
+
+function resizeAndPlay(element)
+{
+  var cv = document.getElementById(element.id + "Merge");
+  cv.width = element.videoWidth/2;
+  cv.height = element.videoHeight;
+  element.play();
+  element.style.height = "0px";  // Hide video without stopping it
+
+  playVids(element.id);
+}