Updates

MaPS-GSD · Apr 2, 2024 · c4f05dd · c4f05dd
1 parent 70b9ae3
commit c4f05dd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/gaze-to-heatmap/js/sketch.js b/gaze-to-heatmap/js/sketch.js
@@ -5,15 +5,16 @@ const GAZE_X_COLNAME = "gaze x [px]";
 const GAZE_Y_COLNAME = "gaze y [px]";
 const GAZE_RADIUS = 100; // in pixels
 const GAZE_HUE_RANGE = [240, 0]; // in degrees
-const GAZE_HUE_ALPHA_RANGE = [0, 75]; // in [0, 100] range 
+const GAZE_HUE_ALPHA_RANGE = [0, 90]; // in [0, 100] range 
 
 
 // Process variables (do not modify)
 // const fitRatio = 0.80;
 let canvas;
 let csvFile;
+let bgImg;
 let gazeImgBW, gazeImgHue;
-let msg = `Drag and drop a valid gaze CSV file on this canvas.`;
+let msg = `Drag and drop a background image and/or a valid gaze CSV file on this canvas.`;
 let worker_gaze2field, worker_field2bw, worker_field2hue;
 
 function setup() {
@@ -33,17 +34,22 @@ function setup() {
 function draw() {
   background(0);
 
-  if (gazeImgBW) {
-    // const boxS = width > height ? fitRatio * height : fitRatio & width;
-    // const scaleRatio = gazeImg.width > gazeImg.height ? boxS / gazeImg.width : boxS / gazeImg.height;
-    // const imgW = scaleRatio * gazeImg.width;
-    // const imgH = scaleRatio * gazeImg.height;
-    // image(gazeImg, 0.5 * width, 0.5 * height, imgW, imgH);
-    image(gazeImgBW, 0.5 * width, 0.5 * height);
+  if (bgImg) {
+    image(bgImg, 0.5 * width, 0.5 * height);
+    fill(0);
   }
 
+  // if (gazeImgBW) {
+  //   // const boxS = width > height ? fitRatio * height : fitRatio & width;
+  //   // const scaleRatio = gazeImg.width > gazeImg.height ? boxS / gazeImg.width : boxS / gazeImg.height;
+  //   // const imgW = scaleRatio * gazeImg.width;
+  //   // const imgH = scaleRatio * gazeImg.height;
+  //   // image(gazeImg, 0.5 * width, 0.5 * height, imgW, imgH);
+  //   image(gazeImgBW, 0.5 * width, 0.5 * height);
+  // }
+
   if (gazeImgHue) {
-    background(255);
+    if (!bgImg) background(255);
     image(gazeImgHue, 0.5 * width, 0.5 * height);
     fill(0);
   }
@@ -59,6 +65,18 @@ function draw() {
 
 
 function gotFile(file) {
+
+  if (file.type === 'image') {
+    msg = 'Loading image...';
+
+    bgImg = createImg(file.data, 'background image', 'anonymous', function() {
+      bgImg.hide();
+      msg = `Loaded image with size ${bgImg.width} x ${bgImg.height}.`;
+    });
+
+    return;
+  }
+
   csvFile = file;
 
   msg = 'Parsing file...';

diff --git a/gaze-to-heatmap/js/utils.js b/gaze-to-heatmap/js/utils.js
@@ -16,6 +16,11 @@ function remap(value, oldMin, oldMax, newMin, newMax) {
   return (value - oldMin) * (newMax - newMin) / (oldMax - oldMin) + newMin;
 }
 
+function easeOutExpo(x) {
+  // https://graphtoy.com/?f1(x,t)=1%20-%20pow(2%20,%20-10%20*%20x)&v1=true&grid=1&coords=0.4643520777883696,0.5094777018983969,1.2183071759372475
+  return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+}
+
 
 function remapFloatArray(arr, oldMin, oldMax, newMin, newMax) {
   const oldRange = oldMax - oldMin;
@@ -72,5 +77,4 @@ function parseCSV(file) {
   // the above method will split those cells!
 
   return csv;
-}
-
+}
diff --git a/gaze-to-heatmap/js/worker-field-to-hue.js b/gaze-to-heatmap/js/worker-field-to-hue.js
@@ -20,7 +20,9 @@ onmessage = (event) => {
   let i4;
   for (let i = 0; i < field.length; i++) {
     const h = remap(field[i], 0, maxv, range[0], range[1]);
-    const a = remap(field[i], 0, maxv, alphas[0], alphas[1]);
+    let a = remap(field[i], 0, maxv, 0, 1);
+    a = easeOutExpo(a);
+    a = remap(a, 0, 1, alphas[0], alphas[1]);
     const hsva = [h, 100, 100, a];
     const rgba = HSBToRGB(hsva);