opacity

1 files changed, 21 insertions, 7 deletions

diff --git a/grid5.html b/grid5.html
index 1e7d05f..fd9ef7d 100644
--- a/grid5.html
+++ b/grid5.html
@@ -24,23 +24,35 @@
 // var color_hue_order = ("black dark-blue purple dark-red red orange " +
 //                        "yellow lime green teal cyan blue magenta dark-gray light-gray white").split(" ");
 
-var grid_w = 3, grid_h = 2, gap = 1
+var grid_w = 6, grid_h = 3, gap = 1
 var pixel = [0,0,0]
 
-// 50% opacity
-// f(a,b) = a + b/2
+// 25% opacity
+// f(a,b) = a + (b - 1/2)
 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)
+  
+  var opacity = (x % grid_w) / (grid_w-2)
 
   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) ]
-    pixel[0] = clamp( a[0] + b[0]/2, 0, 255 )
-    pixel[1] = clamp( a[1] + b[1]/2, 0, 255 )
-    pixel[2] = clamp( a[2] + b[2]/2, 0, 255 )
+
+    var a0 = a[0]/255 * opacity
+    var a1 = a[1]/255 * opacity
+    var a2 = a[2]/255 * opacity
+
+    var b0 = b[0]/255 * (1 - opacity)
+    var b1 = b[1]/255 * (1 - opacity)
+    var b2 = b[2]/255 * (1 - opacity)
+    
+    pixel[0] = clamp( a0 + b0, 0, 1 ) * 255
+    pixel[1] = clamp( a1 + b1, 0, 1 ) * 255
+    pixel[2] = clamp( a2 + b2, 0, 1 ) * 255
+
     lex.fg = lex.bg = MircColor.closest_to(pixel)
     lex.char = " "
   }
@@ -54,10 +66,12 @@ var canvas = new Matrix ( grid_w * 16, grid_h * 16, function(x,y){
   return lex
 })
 var label = document.createElement("span")
-label.innerHTML = "<br>50% opacity<br><br>"
+label.innerHTML = "<br>opacity (0, 25%, 50%, 75%, 100%)<br><br>"
 canvas_rapper.appendChild(label)
 canvas.append(canvas_rapper)
 
+//
+var grid_w = 3, grid_h = 2, gap = 1
 
 // multiply
 // f(a,b) = a * b