diff options
| author | Jules Laplace <jules@okfoc.us> | 2015-05-29 18:47:26 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2015-05-29 18:47:26 -0400 |
| commit | f27e8b751a98d7a803042b5538a13825748ed1e4 (patch) | |
| tree | 35121d7641666065d74372fd9016fe828a005db6 | |
| parent | 9359e0ec3c4126e117da12ded8083186b62badc4 (diff) | |
blend mode examples
| -rw-r--r-- | grid5.html | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/grid5.html b/grid5.html new file mode 100644 index 0000000..1e7d05f --- /dev/null +++ b/grid5.html @@ -0,0 +1,182 @@ +<link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" /> +<link rel="stylesheet" href="css/ak.css" type="text/css" charset="utf-8" /> +<style> +* { + font-smooth: never; + -webkit-font-smoothing: none; +} +</style> +<body class="loading"> +<center> + +<div id="canvas_rapper" style="margin: 0 auto;margin-top:7%;margin-bottom:7%"> +</div> + +</body> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="js/util.js"></script> +<script src="js/color_code.js"></script> +<script src="js/color.js"></script> +<script src="js/lex.js"></script> +<script src="js/matrix.js"></script> +<script> + +// 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 pixel = [0,0,0] + +// 50% opacity +// f(a,b) = a + b/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) + + 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 ) + 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>50% opacity<br><br>" +canvas_rapper.appendChild(label) +canvas.append(canvas_rapper) + + +// multiply +// f(a,b) = a * b +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) ] + pixel[0] = clamp( a[0]/255 * b[0]/255, 0, 1 ) * 255 + pixel[1] = clamp( a[1]/255 * b[1]/255, 0, 1 ) * 255 + pixel[2] = clamp( a[2]/255 * b[2]/255, 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>multiply<br><br>" +canvas_rapper.appendChild(label) +canvas.append(canvas_rapper) + +// screen +// f(a,b) = 1 - (1-a) * (1-b) +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) ] + pixel[0] = clamp( 1 - (1-a[0]/255) * (1-b[0]/255), 0, 1 ) * 255 + pixel[1] = clamp( 1 - (1-a[1]/255) * (1-b[1]/255), 0, 1 ) * 255 + pixel[2] = clamp( 1 - (1-a[2]/255) * (1-b[2]/255), 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>screen<br><br>" +canvas_rapper.appendChild(label) +canvas.append(canvas_rapper) + +// overlay +// +// 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 + + var lum = getLuminance(a0, a1, a2) + if (lum < 0.5) { + pixel[0] = clamp( 2 * a0 * b0, 0, 1 ) * 255 + pixel[1] = clamp( 2 * a1 * b1, 0, 1 ) * 255 + pixel[2] = clamp( 2 * a2 * b2, 0, 1 ) * 255 + } + else { + pixel[0] = clamp( 1 - 2 * (1-a0) * (1-b0), 0, 1 ) * 255 + pixel[1] = clamp( 1 - 2 * (1-a1) * (1-b1), 0, 1 ) * 255 + 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<br><br>" +canvas_rapper.appendChild(label) +canvas.append(canvas_rapper) + + +document.body.className = "" + +function getLuminance(var_R, var_G, var_B) { + var var_Min = Math.min( var_R, var_G, var_B ) //Min. value of RGB + var var_Max = Math.max( var_R, var_G, var_B ) //Max. value of RGB + return ( var_Max + var_Min ) / 2 +} +</script>
\ No newline at end of file |