does it with color

hunks/adhoc/correlate.js

@@ -14,7 +14,7 @@ import {
 let computedResult = null
 let running = false
 
-let correlate = (a, b, x, y) => {
+let correlateGrayscale = (a, b, x, y) => {
   // score a against b, starting b from x, y
   // a, b are float64 arrays, pixel-wise
   let sumA = 0
@@ -32,6 +32,31 @@ let correlate = (a, b, x, y) => {
   return sumDot / Math.sqrt((sumB * sumB)*(sumA * sumA))
 }
 
+let correlateRBGA = (a, b, x, y) => {
+  let ai, bi
+  let sumA = 0
+  let sumB = 0
+  let sumDot = 0
+  for(let i = 0; i < a.length; i ++){
+    for(let j = 0; j < a[0].length; j ++){
+      ai = a[i][j]
+      bi = b[i + x][j + y]
+      // have two vals,
+      a[i][j] // has [0-3] rgba
+      b[i + x][j + y] // has [0-3] rgba
+      // so ? per pixel, this is like:
+      let pdb = ai[0] * bi[0] + ai[1] * bi[1] + ai[2] * bi[2]
+      let pas = ai[0] + ai[1] + ai[2]
+      let pbs = bi[0] + bi[1] + bi[2]
+      let pps = pdb / Math.sqrt(pas * pas * pbs * pbs) // per pixel score,
+      sumA += pas
+      sumB += pbs
+      sumDot += pdb
+    }
+  }
+  return sumDot / Math.sqrt(sumA * sumA * sumB * sumB)
+}
+
 let delay = (time) => {
   return new Promise(resolve =>{
     setTimeout(() => {
@@ -40,7 +65,7 @@ let delay = (time) => {
   })
 }
 
-let packAndGrayscaleImage = (imgD) => {
+let packGrayscale = (imgD) => {
   // make an md array shaped like[x][y]
   let arr = []
   for(let x = 0; x < imgD.width; x ++){
@@ -50,13 +75,33 @@ let packAndGrayscaleImage = (imgD) => {
   for(let y = 0; y < imgD.height; y ++){
     for(let x = 0; x < imgD.width; x ++){
       // grayscale all values as we load them up:
-      arr[x][y] = (imgD.data[p] + imgD.data[p + 1] + imgD.data[p + 2] + imgD.data[p + 3]) / 4;
+      arr[x][y] = (imgD.data[p] + imgD.data[p + 1] + imgD.data[p + 2]) / 3 // + imgD.data[p + 3]) / 4;
       p += 4;
     }
   }
   return arr
 }
 
+let packRBGA = (imgD) => {
+  let arr = []
+  for(let x = 0;  x< imgD.width; x ++){
+    arr.push([])
+    for(let y = 0; y < imgD.height; y ++){
+      arr[x][y] = new Float64Array(4)
+    }
+  }
+  let p = 0
+  for(let y = 0; y < imgD.height; y ++){
+    for(let x = 0; x < imgD.width; x ++){
+      arr[x][y][0] = imgD.data[p ++]
+      arr[x][y][1] = imgD.data[p ++]
+      arr[x][y][2] = imgD.data[p ++]
+      arr[x][y][3] = imgD.data[p ++]
+    }
+  }
+  return arr
+}
+
 async function run(a, b){
   running = true
   // a is img to search for, b is img to search within. both are ImageData types
@@ -65,8 +110,8 @@ async function run(a, b){
   let numruns = resX * resY
   console.log('numruns', numruns)
   // the move now is to make an md array of these values,
-  let bArr = packAndGrayscaleImage(b)
-  let aArr = packAndGrayscaleImage(a)
+  let bArr = packRBGA(b) //packGrayscale(b)
+  let aArr = packRBGA(a) //packGrayscale(a)
   // ok, results array like[x][y]
   let result = []
   for(let x = 0; x < resX; x ++){
@@ -75,7 +120,7 @@ async function run(a, b){
   // now fill,
   for(let x = 0; x < resX; x ++){
     for(let y = 0; y < resY; y ++){
-      result[x][y] = correlate(aArr, bArr, x, y)
+      result[x][y] = correlateRBGA(aArr, bArr, x, y)
     }
     await delay(0) // to avoid blocking,
   }