From c341af2fd95cc96cbcfdaa3f83f719658ed9d1cd Mon Sep 17 00:00:00 2001 From: FORCHA Date: Fri, 22 Jul 2022 01:36:12 +0100 Subject: [PATCH 1/5] Update webgl.js --- src/processors/webgl.js | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/processors/webgl.js b/src/processors/webgl.js index 7e8ccde0..21b1fd64 100644 --- a/src/processors/webgl.js +++ b/src/processors/webgl.js @@ -111,8 +111,30 @@ console.log(options, 'webgl'); } }; + /*Start Zomming Logic*/ + var scale = 1; + var slider = document.getElementById("formControlRange"); + + slider.oninput = function() { + scale = this.value; + } + /*End Zomming Logic*/ + + /*Start Panning Logic*/ + var myMousex = 0; + var myMousey = 0; + + document.addEventListener("mousemove", () => { + let mousex = event.clientX; // Gets Mouse X + let mousey = event.clientY; // Gets Mouse Y + myMousex = mousex/5000; + myMousey = mousey/5000; + }); + /*End Panning Logic*/ + function drawScene(ctx, returnImage) { - var gl, pColormap, pHsvUniform, pColorizedUniform, pSampler, pSelColormapUniform, pSliderUniform, pVertexPosition; + + var gl, pColormap, pHsvUniform, pColorizedUniform, pSampler, pSelColormapUniform, pSliderUniform, pVertexPosition,pScale,pTranslation; if (!returnImage) { window.requestAnimationFrame(function() { return drawScene(ctx, false); @@ -133,6 +155,12 @@ console.log(options, 'webgl'); gl.uniform1i(pSampler, 0); pSliderUniform = gl.getUniformLocation(ctx.shaderProgram, "uSlider"); gl.uniform1f(pSliderUniform, ctx.slider); + pScale = gl.getUniformLocation(ctx.shaderProgram, "uScale"); + gl.uniform2fv(pScale, [scale,scale]); + pTranslation = gl.getUniformLocation(ctx.shaderProgram, "uTranslation"); + gl.uniform2fv(pTranslation, [myMousex,myMousey]); + + pColorizedUniform = gl.getUniformLocation(ctx.shaderProgram, "uColorized"); gl.uniform1i(pColorizedUniform, (colorized || ctx.colormap ? 1 : 0)); From e292f0b59ad97a8857c8929eabb37a9ca5f6d2c3 Mon Sep 17 00:00:00 2001 From: FORCHA Date: Fri, 22 Jul 2022 01:37:55 +0100 Subject: [PATCH 2/5] Update index2.html --- index2.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/index2.html b/index2.html index ad9bcdb2..2e197b7a 100644 --- a/index2.html +++ b/index2.html @@ -1,3 +1,4 @@ + @@ -22,7 +23,7 @@ - + @@ -461,7 +462,7 @@
BLUE filters
- +
@@ -513,7 +514,7 @@
BLUE filters Date: Fri, 22 Jul 2022 01:38:41 +0100 Subject: [PATCH 3/5] Update shader.vert --- dist/shader.vert | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/dist/shader.vert b/dist/shader.vert index 306c3e6b..9a4ef823 100644 --- a/dist/shader.vert +++ b/dist/shader.vert @@ -1,9 +1,12 @@ attribute vec2 aVertexPosition; varying vec2 vTextureCoord; +uniform vec2 uScale; +uniform vec2 uTranslation; void main(void) { - gl_Position = vec4(aVertexPosition, 0.0, 1.0); + + gl_Position = vec4((aVertexPosition * uScale) + uTranslation, 0.0, 1.0); vTextureCoord = (aVertexPosition + 1.0) / 2.0; } From 9d007d47d661ecabad43c091d9759852753270dd Mon Sep 17 00:00:00 2001 From: FORCHA Date: Fri, 22 Jul 2022 01:39:15 +0100 Subject: [PATCH 4/5] Update shader.frag --- dist/shader.frag | 2 ++ 1 file changed, 2 insertions(+) diff --git a/dist/shader.frag b/dist/shader.frag index 215bfeb9..8e5592e3 100644 --- a/dist/shader.frag +++ b/dist/shader.frag @@ -8,6 +8,8 @@ uniform int uColorized; uniform int uSelectColormap; uniform int uHsv; uniform int uColormap; +uniform vec2 uScale; + vec4 greyscale_colormap(float n) { vec2 x = vec2(0.0, 1.0); From a25cbf231ab4dc71655284d119553488f951ba92 Mon Sep 17 00:00:00 2001 From: FORCHA Date: Fri, 22 Jul 2022 01:40:00 +0100 Subject: [PATCH 5/5] Update infragram2.js --- dist/infragram2.js | 127 ++++++++++++++++++++++++++++----------------- 1 file changed, 80 insertions(+), 47 deletions(-) diff --git a/dist/infragram2.js b/dist/infragram2.js index 5519a959..979cb7a0 100644 --- a/dist/infragram2.js +++ b/dist/infragram2.js @@ -131,7 +131,17 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i if (image) options.run(options.mode); options.camera.getSnapshot(); //if (options.colorized) return options.colorize(); }, interval); - }; // TODO: this doesn't work; it just downloads the unmodified image. + }; + + options.processLocalVideo = function processLocalVideo() { + options.camera.unInitialize(); + var interval; + if (options.processor.type == "webgl") interval = 15;else interval = 150; + setInterval(function () { + if (image) options.run(options.mode); + options.camera.getSnapshot(); //if (options.colorized) return options.colorize(); + }, interval); + }; // TODO: this doesn't work; it just downloads the unmodified image. // probably a timing issue? @@ -412,6 +422,11 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i $("#snapshot").show(); $("#live-video").show(); $("#webcam").show(); + } + + function unInitialize() { + //Initialize Webrtc without webcam + getUserMedia(webRtcOptions, falseSuccess, deviceError); } // webRtcOptions contains the configuration information for the shim // it allows us to specify the width and height of the video // output we"re working with, the location of the fallback swf, @@ -422,7 +437,7 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i var webRtcOptions = options.webRtcOptions || { "audio": false, "video": true, - // the element (by id) you wish to use for + // the element (by id) you wish to use for // displaying the stream from a camera el: "webcam", extern: null, @@ -431,8 +446,8 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i // container width: 640, height: 480, - // the recommended mode to be used is - // "callback " where a callback is executed + // the recommended mode to be used is + // "callback " where a callback is executed // once data is available mode: "callback", // a debugger callback is available if needed @@ -481,6 +496,7 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i function success(stream) { var video; window.localStream = stream; + isOnCam = stream; isCamera = true; if (webRtcOptions.context === "webrtc") { @@ -502,13 +518,18 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i alert("No camera available."); console.log(error); return console.error("An error occurred: [CODE " + error.code + "]"); + } + + function falseSuccess(stream) { + //Prevent Webcam stream during video processing + stream.getVideoTracks()[0].stop(); } // not doing anything now... for copying to a 2nd canvas function getSnapshot() { var video; // If the current context is WebRTC/getUserMedia (something // passed back from the shim to avoid doing further feature - // detection), we handle getting video/images for our canvas + // detection), we handle getting video/images for our canvas // from our HTML5