diff options
| -rw-r--r-- | grid5.html | 28 |
1 files changed, 21 insertions, 7 deletions
@@ -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 |