From 43e35625cfd9f5ce6a04851d1bab275c31b11603 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 29 May 2015 19:05:57 -0400 Subject: opacity --- grid5.html | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) (limited to 'grid5.html') 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 = "
50% opacity

" +label.innerHTML = "
opacity (0, 25%, 50%, 75%, 100%)

" canvas_rapper.appendChild(label) canvas.append(canvas_rapper) +// +var grid_w = 3, grid_h = 2, gap = 1 // multiply // f(a,b) = a * b -- cgit v1.2.3-70-g09d2