another overlay

1 files changed, 64 insertions, 2 deletions

diff --git a/grid5.html b/grid5.html
index fd9ef7d..ae0929f 100644
--- a/grid5.html
+++ b/grid5.html
@@ -137,7 +137,7 @@ canvas.append(canvas_rapper)
 
 // overlay
 //
-// f(a,b) = | 2 * a * b               if a < 0.5
+// f(a,b) = | 2 * a * b               if lum(a) < 0.5
 //          | 1 - 2 *(1-a) * (1-b)    otherwise
 var canvas = new Matrix ( grid_w * 16, grid_h * 16, function(x,y){
   var lex = new Lex (x,y)
@@ -181,11 +181,73 @@ var canvas = new Matrix ( grid_w * 16, grid_h * 16, function(x,y){
   return lex
 })
 var label = document.createElement("span")
-label.innerHTML = "<br>overlay<br><br>"
+label.innerHTML = "<br>overlay (luminance)<br><br>"
+canvas_rapper.appendChild(label)
+canvas.append(canvas_rapper)
+
+
+// overlay #2 is the same but compares RGB components individually
+//
+// f(a,b) = | 2 * a * b               if a < 0.5
+//          | 1 - 2 *(1-a) * (1-b)    otherwise
+var canvas = new Matrix ( grid_w * 16, grid_h * 16, function(x,y){
+  var lex = new Lex (x,y)
+  
+  var i = floor(x / grid_w)
+  var j = floor(y / grid_h)
+
+  if ( (x % grid_w) != grid_w-gap && (y % grid_h) != grid_h-gap) {
+    var a = MircColor.colors[ all_hue(i) ]
+    var b = MircColor.colors[ all_hue(j) ]
+
+    var a0 = a[0]/255
+    var a1 = a[1]/255
+    var a2 = a[2]/255
+
+    var b0 = b[0]/255
+    var b1 = b[1]/255
+    var b2 = b[2]/255
+
+    if (a0 < 0.5) {
+      pixel[0] = clamp( 2 * a0 * b0, 0, 1 ) * 255
+    }
+    else {
+      pixel[0] = clamp( 1 - 2 * (1-a0) * (1-b0), 0, 1 ) * 255
+    }
+
+    if (a1 < 0.5) {
+      pixel[1] = clamp( 2 * a1 * b1, 0, 1 ) * 255
+    }
+    else {
+      pixel[1] = clamp( 1 - 2 * (1-a1) * (1-b1), 0, 1 ) * 255
+    }
+
+    if (a2 < 0.5) {
+      pixel[2] = clamp( 2 * a2 * b2, 0, 1 ) * 255
+    }
+    else {
+      pixel[2] = clamp( 1 - 2 * (1-a2) * (1-b2), 0, 1 ) * 255
+    }
+
+    lex.fg = lex.bg = MircColor.closest_to(pixel)
+    lex.char = " "
+  }
+  else if ((y % grid_h) == grid_h-gap) {
+    lex.span.style.lineHeight = "4px"
+    lex.span.style.fontSize = "4px"
+  }
+
+  lex.opacity = 1
+  lex.build()
+  return lex
+})
+var label = document.createElement("span")
+label.innerHTML = "<br>overlay (componentwise)<br><br>"
 canvas_rapper.appendChild(label)
 canvas.append(canvas_rapper)
 
 
+
 document.body.className = ""
 
 function getLuminance(var_R, var_G, var_B) {