diff options
| -rw-r--r-- | image.html | 43 | ||||
| -rw-r--r-- | js/color_code.js | 96 |
2 files changed, 106 insertions, 33 deletions
@@ -1,5 +1,5 @@ <style> -label { min-width: 50px; display: inline-block; } +label { min-width: 70px; display: inline-block; } </style> <body> <div> @@ -8,8 +8,11 @@ label { min-width: 50px; display: inline-block; } <label for="width_el">width</label> <input type="range" min="1" max="120" value="40" id="width_el"> <span id="width_span"></span>x<span id="height_span"></span> <br> - <label for="ratio_el">ratio</label> <input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el"> - <br> + <label for="ratio_el">ratio</label> <input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el"><br> + <label for="hue_el">hue</label> <input type="range" min="-1" max="1" value="0" step="0.005" id="hue_el"><br> + <label for="sat_el">saturation</label> <input type="range" min="-1" max="1" value="0" step="0.005" id="sat_el"><br> + <label for="lum_el">luminance</label> <input type="range" min="-1" max="1" value="0" step="0.005" id="lum_el"><br> + <label></label> <input type="checkbox" id="invert_el"> <label for="invert_el" style="padding-top: 7px;">invert</label><br> <label for="palette_el" style="padding-top: 5px;">palette</label> <select id="palette_el"> <option default value="colors">all colors</label> @@ -30,6 +33,8 @@ label { min-width: 50px; display: inline-block; } <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/color_code.js"></script> +<script src="js/util.js"></script> +<script src="/dither/js/color.js"></script> <script> var basehref_partz = window.location.href.split("/") basehref_partz.pop() @@ -38,7 +43,29 @@ var url = 'img/rainwagon.gif' var width = parseInt( width_span.innerHTML = width_el.value ) var ratio = parseFloat( ratio_el.value ) var nn = $(nn_el).prop('checked') +var invert = $(invert_el).prop('checked') var width_timeout + +MircColor.set_recolor_fn(function(rgb){ + if (invert) { + rgb[0] = 255 - rgb[0] + rgb[1] = 255 - rgb[1] + rgb[2] = 255 - rgb[2] + } + var hsl = rgb2hsl(rgb) + hsl[0] = mod(hsl[0] + hue, 1.0) + hsl[1] = clamp(hsl[1] + sat, 0.0, 1.0) + hsl[2] = clamp(hsl[2] + lum, 0.0, 1.0) + return hsl2rgb.apply(this, hsl) +}) + +var hue = 0, sat = 0, lum = 0 +listen(hue_el, window, "hue") +listen(sat_el, window, "sat") +listen(lum_el, window, "lum") + + + MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) url_el.addEventListener('change', function(){ @@ -50,6 +77,10 @@ nn_el.addEventListener('change', function(){ nn = $(nn_el).prop('checked') MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) }) +invert_el.addEventListener('change', function(){ + invert = $(invert_el).prop('checked') + MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) +}) palette_el.addEventListener('change', function(){ var palette = $(palette_el).val() MircColor.set_colors( MircColor[palette] ) @@ -74,6 +105,12 @@ width_el.addEventListener("input", function(){ MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) }, 50) }) +function listen (el, obj, val) { + el.addEventListener("input", function(){ + obj[val] = parseFloat( el.value ) + MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn }) + }) +} function toCanvas(rows){ var wpx = 6, hpx = 12 var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d') diff --git a/js/color_code.js b/js/color_code.js index 7c5f236..c27f2bb 100644 --- a/js/color_code.js +++ b/js/color_code.js @@ -72,6 +72,24 @@ var MircColor = (function(){ null, null, ] + var YELLOWS = [ + [255,255,255], + [0,0,0], + null, + [0,147,0], + null, + null, + null, + [252,127,0], + [255,255,0], + [0,252,0], + null, + [0,255,255], + null, + null, + null, + null, + ] var BLUES = [ [255,255,255], [0,0,0], @@ -91,6 +109,8 @@ var MircColor = (function(){ null, ] var colors = COLORS, recolor_fn = null + var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels + function set_colors (a) { colors = a } @@ -99,7 +119,9 @@ var MircColor = (function(){ } function closest_to(pixel){ - recolor_fn && recolor_fn(pixel) + if (recolor_fn) { + pixel = recolor_fn(pixel) + } return colors.reduce(function(prev, curr, index) { var d = distance(pixel, curr) if (prev[0] > d) { @@ -139,12 +161,22 @@ var MircColor = (function(){ else cb (rows) } + function getNaturalDimensions (img) { + if (img.naturalWidth) { + return { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight } + } + if (img.videoWidth) { + return { naturalWidth: img.videoWidth, naturalHeight: img.videoHeight } + } + return { naturalWidth: img.width, naturalHeight: img.height } + } function neighbor (canvas, ctx, img) { + var dims = getNaturalDimensions(img) var scratch = document.createElement("canvas") var scratchCtx = scratch.getContext('2d') - scratch.width = img.naturalWidth - scratch.height = img.naturalHeight - scratchCtx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight) + scratch.width = dims.naturalWidth + scratch.height = dims.naturalHeight + scratchCtx.drawImage(img, 0, 0, dims.naturalWidth, dims.naturalHeight) var srcImageData = scratchCtx.getImageData(0,0,scratch.width,scratch.height) var destImageData = ctx.createImageData(canvas.width,canvas.height) var src = srcImageData.data, dest = destImageData.data @@ -162,43 +194,45 @@ var MircColor = (function(){ dest[dt+3] = src[st+3] } } - return destImageData } var img = new Image () function fromUrl (url, cb, opt) { img.onload = function(){ - var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels - if (opt.width) { - canvas.width = opt.width - if (opt.height) { - canvas.height = opt.height - } else if (opt.ratio) { - canvas.height = opt.width / opt.ratio - } else { - canvas.height = (img.naturalHeight * width / img.naturalWidth) / 2 - } - } - else { - canvas.width = img.naturalWidth * 2 - canvas.height = img.naturalHeight - } - if (opt.neighbor) { - pixels = neighbor(canvas, ctx, img) - } - else { - ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,canvas.width,canvas.height) - pixels = ctx.getImageData(0,0,canvas.width,canvas.height) - } - fromImageData(pixels, cb) + fromCanvas(img, cb, opt) } if (img.src == url) { return img.onload() } img.src = url if (img.complete) { return img.onload() } } + function fromCanvas (img, cb, opt) { + var dims = getNaturalDimensions(img) + if (opt.width) { + canvas.width = opt.width + if (opt.height) { + canvas.height = opt.height + } else if (opt.ratio) { + canvas.height = opt.width / opt.ratio + } else { + canvas.height = (dims.naturalHeight * width / dims.naturalWidth) / 2 + } + } + else { + canvas.width = dims.naturalWidth * 2 + canvas.height = dims.naturalHeight + } + if (opt.neighbor) { + pixels = neighbor(canvas, ctx, img) + } + else { + ctx.drawImage(img,0,0,dims.naturalWidth,dims.naturalHeight,0,0,canvas.width,canvas.height) + pixels = ctx.getImageData(0,0,canvas.width,canvas.height) + } + fromImageData(pixels, cb) + } function ascii (rows) { var lines = rows.map(function(str){ - return str.map(function(index){ return "\\x03," + index + " " }).join("") + return str.map(function(index){ return "\\x031," + index + " " }).join("") }).join("\\n") var txt = '/exec -out printf "' + lines + '"\n' return txt @@ -211,7 +245,7 @@ var MircColor = (function(){ function stringFromUrl (url, cb, opt) { fromUrl(url, function(rows){ cb(rows.map(function(str){ - return str.map(function(index){ return "\C-c," + index + " " }).join("") + return str.map(function(index){ return "\C-c1," + index + " " }).join("") }).join("\n")) }, width) } @@ -221,12 +255,14 @@ var MircColor = (function(){ hues: HUES, grays: GRAYS, reds: REDS, + yellows: YELLOWS, blues: BLUES, set_recolor_fn: set_recolor_fn, set_colors: set_colors, closest_to: closest_to, distance: distance, fromUrl: fromUrl, + fromCanvas: fromCanvas, fromImageData: fromImageData, stringFromUrl: stringFromUrl, asciiFromUrl: asciiFromUrl, |