diff options
| -rw-r--r-- | image.html | 51 | ||||
| -rw-r--r-- | img/rainwagon.gif | bin | 0 -> 2938 bytes | |||
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | js/app.js | 12 | ||||
| -rw-r--r-- | js/color_code.js | 113 | ||||
| -rw-r--r-- | js/copy.js | 22 | ||||
| -rw-r--r-- | js/ui/controls.js | 2 |
7 files changed, 189 insertions, 12 deletions
diff --git a/image.html b/image.html new file mode 100644 index 0000000..5729d60 --- /dev/null +++ b/image.html @@ -0,0 +1,51 @@ +<body> +<div> +<input type="text" id="url_el" placeholder="enter a url"> +width <input type="range" min="1" max="120" value="40" id="width_el"> +<span id="width_span"></span>x<span id="height_span"></span> +</div> +<div id="image_style"></div> +<div id="text_style"></div> +</body> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="js/color_code.js"></script> +<script> +var url = 'img/rainwagon.gif' +var width = parseInt( width_span.innerHTML = width_el.value ) +var width_timeout +MircColor.fromUrl(url, toCanvas, width) + +url_el.addEventListener('change', function(){ + url = "/cgi-bin/proxy?" + url_el.value + MircColor.fromUrl("/cgi-bin/proxy?" + url, toCanvas, width) +}) +width_el.addEventListener("input", function(){ + width = parseInt( width_el.value ) + width_span.innerHTML = width + height_span.innerHTML = "..." + clearTimeout( width_timeout ) + width_timeout = setTimeout(function(){ + MircColor.fromUrl(url, toCanvas, width) + }, 300) +}) +function toCanvas(rows){ + var px = 8 + var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d') + var rgb_colors = MircColor.colors.map(function(c){ return "rgb(" + c + ")" }) + canvas.width = rows[0].length * px + canvas.height = rows.length * px + rows.forEach(function(row, j){ + row.forEach(function(lex, i){ + ctx.fillStyle = rgb_colors[lex] + ctx.fillRect(i*px,j*px,px,px) + }) + }) + height_span.innerHTML = rows.length + image_style.innerHTML = "" + image_style.appendChild(canvas) + var span = document.createElement('span') + text_style.innerHTML = MircColor.ascii(rows) +} + +</script> + diff --git a/img/rainwagon.gif b/img/rainwagon.gif Binary files differnew file mode 100644 index 0000000..ba14b14 --- /dev/null +++ b/img/rainwagon.gif @@ -48,6 +48,7 @@ body { transition: 0.1s linear; } </script> <script src="js/util.js"></script> <script src="js/color.js"></script> +<script src="js/copy.js"></script> <script src="js/lex.js"></script> <script src="js/matrix.js"></script> @@ -126,18 +126,6 @@ function bind () { } }) - var contentType = 'text/plain;charset=utf-8' - document.body.addEventListener('copy', function (e) { - if (e.clipboardData) { - e.preventDefault(); - e.clipboardData.setData(contentType, canvas.ascii()); - } - if (window.clipboardData) { - e.returnValue = false; - window.clipboardData.setData(contentType, canvas.ascii()); - } - }, false); - document.addEventListener('DOMContentLoaded', function(){ if (current_tool.name != 'shader') { cursor_input.focus() } document.body.classList.remove('loading') diff --git a/js/color_code.js b/js/color_code.js new file mode 100644 index 0000000..f16e91c --- /dev/null +++ b/js/color_code.js @@ -0,0 +1,113 @@ + +var MircColor = (function(){ + var COLORS = [ + [255,255,255], + [0,0,0], + [0,0,127], + [0,147,0], + [255,0,0], + [127,0,0], + [156,0,156], + [252,127,0], + [255,255,0], + [0,252,0], + [0,147,147], + [0,255,255], + [0,0,252], + [255,0,255], + [127,127,127], + [210,210,210] + ] + + function closest_to(pixel){ + return COLORS.reduce(function(prev, curr, index) { + var d = distance(pixel, curr) + if (prev[0] > d) { + prev[0] = d + prev[1] = index + } + return prev + }, [Infinity, -1])[1] + } + + function distance(u, v){ + var r = u[0] - v[0] + var g = u[1] - v[1] + var b = u[2] - v[2] + return Math.sqrt(r*r+g*g+b*b) + } + + function fromImageData (pixels, cb){ + var rows = [], + pixel = new Array (4), + data = pixels.data, + t + console.log(pixels) + for (var i = 0, h = pixels.height; i < h; i++) { + var row = [] + rows.push(row) + for (var j = 0, w = pixels.width; j < w; j++) { + t = (i*w+j)*4 + pixel[0] = data[t] + pixel[1] = data[t+1] + pixel[2] = data[t+2] + pixel[3] = data[t+3] + row[j] = closest_to(pixel) + } + } + console.log(rows) + if (! cb) return rows + else cb (rows) + } + function fromUrl (url, cb, width) { + var img = new Image () + img.onload = function(){ + var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d') + if (width) { + canvas.width = width + canvas.height = img.naturalHeight * width / img.naturalWidth / 2 + } + else { + canvas.width = img.naturalWidth * 2 + canvas.height = img.naturalHeight + } + ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,canvas.width,canvas.height) + var pixels = ctx.getImageData(0,0,canvas.width,canvas.height) + fromImageData(pixels, cb) + } + img.src = url + } + function ascii (rows) { + var lines = rows.map(function(str){ + return str.map(function(index){ return "\\x03" + index + "," + index + "x\\x03" }).join("") + }).join("\\n") + var txt = '/exec -out printf "' + lines + '"\n' + return txt + } + function asciiFromUrl (url, cb, width) { + fromUrl(url, function(rows){ + cb(ascii(rows), rows) + }, width) + } + function stringFromUrl (url, cb, width) { + fromUrl(url, function(rows){ + cb(rows.map(function(str){ + return str.map(function(index){ return "\C-c" + index + "," + index + "x\C-c" }).join("") + }).join("\n")) + }, width) + } + + return { + colors: COLORS, + closest_to: closest_to, + distance: distance, + fromUrl: fromUrl, + fromImageData: fromImageData, + stringFromUrl: stringFromUrl, + asciiFromUrl: asciiFromUrl, + ascii: ascii, + } + +})() + + diff --git a/js/copy.js b/js/copy.js new file mode 100644 index 0000000..d1ae716 --- /dev/null +++ b/js/copy.js @@ -0,0 +1,22 @@ +var clipboard = (function () { + + var disabled = false; + var contentType = 'text/plain;charset=utf-8' + document.body.addEventListener('copy', function (e) { + if (disabled) { return } + if (e.clipboardData) { + e.preventDefault(); + e.clipboardData.setData(contentType, canvas.ascii()); + } + if (window.clipboardData) { + e.returnValue = false; + window.clipboardData.setData(contentType, canvas.ascii()); + } + }, false); + + return { + enable: function(){ disabled = false } + disable: function(){ disabled = true } + } + +})()
\ No newline at end of file diff --git a/js/ui/controls.js b/js/ui/controls.js index dcd95b8..c780c50 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -64,10 +64,12 @@ var controls = (function(){ shader_textarea.style.display = "block" // setTimeout(function(){ shader_textarea.focus() }) shader_textarea.focus() + clipboard.disable() } controls.shader.blur = function(){ Tool.prototype.blur.call(this) shader_textarea.style.display = "none" + clipboard.enable() } shader_textarea.value = demo_shader.innerHTML shader_textarea.addEventListener("input", function(){ |
