get colorize effect to work right.

Author: jdstein1

19--Webcam_Fun/css/booth.css

@@ -7,6 +7,7 @@
   bottom:0;
   right:0;
   background:black url('../img/starrynight.jpg') center center no-repeat;
+  background:black url('../img/tvstatic-diagonal.gif') center center no-repeat;
   background-size:cover;
 }
 
@@ -38,7 +39,7 @@ canvas {
   z-index:3;
   background:white;
   box-shadow:0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.5);
-  padding:5px;
+  padding:0.125em;
   display:none;
   position:absolute;
   top:2rem;

19--Webcam_Fun/css/strip.css

@@ -4,8 +4,8 @@
   height:100%;
   margin:0;
   padding:1rem 10px;
-  /* background:transparent; */
   background-color:rgba(0, 0, 0, 0.5);
+  background-color:transparent;
   position:absolute;
   overflow:auto;
   overflow-x:hidden;
@@ -28,7 +28,7 @@
 .strip a img {
   width:100%;
   background:white;
-  padding:5px;
+  padding:0.125em;
   box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
 }
 

19--Webcam_Fun/index-jds.html

@@ -22,7 +22,7 @@ <h1>webcam fun</h1>
       <fieldset class="ctrl_camera">
         <legend>web cam</legend>
         <button class="btn_on status success" onClick="startStream()">On</button>
-        <button class="btn_off status error" onClick="stopStream()">Off</button>
+        <button class="btn_off status error disabled" onClick="stopStream()" disabled>Off</button>
         <button class="btn_clear disabled" onClick="clearCanvas()" disabled>Clear</button>
         <!-- <button class="status info" onClick="flipCamera()">Flip</button> -->
       </fieldset>
@@ -44,19 +44,19 @@ <h1>webcam fun</h1>
             <option>Choose effect...</option>
             <option value="chroma">Chroma Key</option>
             <option value="split">Channel Split</option>
-            <option value="rgb_channel">RGB Channel</option>
+            <option value="colorize">Colorize</option>
           </select>
         </legend>
         <div class="alert">
           <p class="msg msg_cam" id="">turn web cam "ON" to use video effects</p>
           <p class="msg msg_fx" id="">choose a video effect above</p>
         </div>
-        <table id="ctrl_fx--rgb">
+        <table id="ctrl_fx--colorize">
           <tr>
             <td>
               <label>
                 <span>rgb:</span>
-                <select class="status info" id="rgb">
+                <select class="status info" id="colorize">
                   <option>Choose color...</option>
                   <option value="random" selected>random</option>
                   <option value="red">red</option>
@@ -67,7 +67,7 @@ <h1>webcam fun</h1>
             </td>
           </tr>
           <tr>
-            <td><button class="btn_apply status success" onClick="startStream()">Apply</button></td>
+            <td><button class="btn_apply status success">Apply</button></td>
           </tr>
         </table>
         <table id="ctrl_fx--split">
@@ -85,7 +85,7 @@ <h1>webcam fun</h1>
             </td>
           </tr>
           <tr>
-            <td><button class="btn_apply status success" onClick="startStream()">Apply</button></td>
+            <td><button class="btn_apply status success">Apply</button></td>
           </tr>
         </table>
         <table id="ctrl_fx--chroma">

19--Webcam_Fun/js/fx.js

@@ -1,4 +1,5 @@
 /* fx.js */
+console.log('fx.js READY!');
 function fFxChromaKey(data) {
   // console.log('START fFxChromaKey');
   const levels = {};
@@ -38,27 +39,12 @@ function fFxSplit(data,nums) {
   return data;
 }
 
-function fFxRGB(data,color) {
-  // console.log('START fFxRGB',color);
-    if (typeof color === 'string') {
-      console.log('string!');
-      for (let i = 0; i < data.data.length; i+=4) {
-          data.data[i+0] += (color==='red') ? 150 : -50; // r
-          data.data[i+1] += (color==='green') ? 150 : -50; // g
-          data.data[i+2] += (color==='blue') ? 150 : -50; // b
-      }
-    } else {
-      console.error('not the right type!');
-    }
-  return data;
-}
-
-function fFxRGBRandom(data,nums) {
+function fFxColorize(data,nums) {
   // console.log('START fFxRGB',nums);
   for (let i = 0; i < data.data.length; i+=4) {
-      data.data[i+0] += nums[0]; // r
-      data.data[i+1] += nums[1]; // g
-      data.data[i+2] += nums[2]; // b
+    data.data[i+0] += nums[0]; // r
+    data.data[i+1] += nums[1]; // g
+    data.data[i+2] += nums[2]; // b
   }
   return data;
 }