https://dreamfusionpaper.github.io/assets/js/video_comparison.js

1// From https://dorverbin.github.io/refnerf/.
2// This is based on: http://thenewcode.com/364/Interactive-Before-and-After-Video-Comparison-in-HTML5-Canvas
3// With additional modifications based on: https://jsfiddle.net/7sk5k4gp/13/
4
5function playVids(videoId) {
6    var videoMerge = document.getElementById(videoId + "Merge");
7    var vid = document.getElementById(videoId);
8
9    var position = 0.75;
10    var vidWidth = vid.videoWidth/2;
11    var vidHeight = vid.videoHeight;
12
13    var mergeContext = videoMerge.getContext("2d");
14
15    
16    if (vid.readyState > 3) {
17        vid.play();
18
19        function trackLocation(e) {
20            // Normalize to [0, 1]
21            bcr = videoMerge.getBoundingClientRect();
22            position = ((e.pageX - bcr.x) / bcr.width);
23            // videoMerge.setAttribute('data-position', position);
24        }
25        function trackLocationTouch(e) {
26            // Normalize to [0, 1]
27            bcr = videoMerge.getBoundingClientRect();
28            position = ((e.touches[0].pageX - bcr.x) / bcr.width);
29        }
30
31        videoMerge.addEventListener("mousemove",  trackLocation, false); 
32        videoMerge.addEventListener("touchstart", trackLocationTouch, false);
33        videoMerge.addEventListener("touchmove",  trackLocationTouch, false);
34
35
36        function drawLoop() {
37            mergeContext.drawImage(vid, 0, 0, vidWidth, vidHeight, 0, 0, vidWidth, vidHeight);
38            var colStart = (vidWidth * position).clamp(0.0, vidWidth);
39            var colWidth = (vidWidth - (vidWidth * position)).clamp(0.0, vidWidth);
40            mergeContext.drawImage(vid, colStart+vidWidth, 0, colWidth, vidHeight, colStart, 0, colWidth, vidHeight);
41            requestAnimationFrame(drawLoop);
42
43            
44            var arrowLength = 0.09 * vidHeight;
45            var arrowheadWidth = 0.025 * vidHeight;
46            var arrowheadLength = 0.04 * vidHeight;
47            var arrowPosY = vidHeight / 10;
48            var arrowWidth = 0.007 * vidHeight;
49            var currX = vidWidth * position;
50
51            // Draw circle
52            mergeContext.arc(currX, arrowPosY, arrowLength*0.7, 0, Math.PI * 2, false);
53            mergeContext.fillStyle = "#FFD79340";
54            mergeContext.fill()
55            //mergeContext.strokeStyle = "#444444";
56            //mergeContext.stroke()
57            
58            // Draw border
59            mergeContext.beginPath();
60            mergeContext.moveTo(vidWidth*position, 0);
61            mergeContext.lineTo(vidWidth*position, vidHeight);
62            mergeContext.closePath()
63            mergeContext.strokeStyle = "#444444";
64            mergeContext.lineWidth = 5;            
65            mergeContext.stroke();
66
67            // Draw arrow
68            mergeContext.beginPath();
69            mergeContext.moveTo(currX, arrowPosY - arrowWidth/2);
70            
71            // Move right until meeting arrow head
72            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowWidth/2);
73            
74            // Draw right arrow head
75            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowheadWidth/2);
76            mergeContext.lineTo(currX + arrowLength/2, arrowPosY);
77            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowheadWidth/2);
78            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowWidth/2);
79
80            // Go back to the left until meeting left arrow head
81            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowWidth/2);
82            
83            // Draw left arrow head
84            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowheadWidth/2);
85            mergeContext.lineTo(currX - arrowLength/2, arrowPosY);
86            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY  - arrowheadWidth/2);
87            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY);
88            
89            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY - arrowWidth/2);
90            mergeContext.lineTo(currX, arrowPosY - arrowWidth/2);
91
92            mergeContext.closePath();
93
94            mergeContext.fillStyle = "#444444";
95            mergeContext.fill();
96
97            
98            
99        }
100        requestAnimationFrame(drawLoop);
101    } 
102}
103
104Number.prototype.clamp = function(min, max) {
105  return Math.min(Math.max(this, min), max);
106};
107    
108    
109function resizeAndPlay(element)
110{

111  var cv = document.getElementById(element.id + "Merge");
112  cv.width = element.videoWidth/2;
113  cv.height = element.videoHeight;
114  element.play();
115  element.style.height = "0px";  // Hide video without stopping it
116    
117  playVids(element.id);
118}