diff options
| author | jules <jules@okfoc.us> | 2014-02-02 18:58:46 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2014-02-02 18:58:46 -0500 |
| commit | b125e3106727e0acb627f17f4de0a1c3a1cf6f49 (patch) | |
| tree | 36a2be85ac7ee402cd78fe9d53e4dc7da8d9c023 /dither-localstorage.html | |
| parent | c1e6c0c182102e5d61a8ac26b403b42c5fd40591 (diff) | |
| parent | 2c0ddba2dab715a7c81a106edcfdd9f5be0592a2 (diff) | |
Merge branch 'master' into pepper
Diffstat (limited to 'dither-localstorage.html')
| -rw-r--r-- | dither-localstorage.html | 132 |
1 files changed, 0 insertions, 132 deletions
diff --git a/dither-localstorage.html b/dither-localstorage.html deleted file mode 100644 index 5e9bff9..0000000 --- a/dither-localstorage.html +++ /dev/null @@ -1,132 +0,0 @@ -<!doctype html> -<html> -<head> -<title>Dither</title> -<style> - form { display: inline-block; } - #gallery-images { display: block; max-height: 210px; overflow-y: auto; } - #gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; } -</style> -</head> -<body> - -<div id="gallery"> - <form id="gallery-search"> - <input type="text" id="dumpfm-search-query" value="duck bill"> - <button id="gallery-search">DUMP SEARCH</button> - </form> - <button id="gallery-random">IM RANDOM</button> - <span id="status"></span> - <div id="gallery-images"></div> -</div> - -<div id="dither"> -<button id="random">random</button> -<button id="pattern2">pattern2</button> -<button id="pattern3">pattern3</button> -<button id="pattern4">pattern4</button> -<button id="pattern2Lite">pattern2lite</button> -<button id="pattern3Lite">pattern3lite</button> -<button id="pattern4Lite">pattern4lite</button> -<button id="floydSteinberg">floyd-steinberg</button> -<button id="right">right</button> -</div> -<div id="images"></div> - - -</body> -<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script> -<script type="text/javascript" src="js/vendor/canvasquery.js"></script> -<script type="text/javascript" src="js/vendor/gif.js"></script> -<script type="text/javascript" src="js/canvasquery.dither.js"></script> -<script type="text/javascript" src="js/asdf.js"></script> -<script type="text/javascript" src="js/image.js"></script> -<script type="text/javascript" src="js/gallery.js"></script> -<script type="text/javascript"> - -var algo = 'random'; -var url = "img/abyss.png"; -var imgs = [] -var anim = [] -var complete = 0 -var viewport = cq(100, 100) -$("#images").append(viewport.canvas) - -var ui = function(){} - -ui.init = function(){ - gallery.choose = ui.choose - gallery.init() - ui.bind() - ui.animate() - asdf.random() -} - -ui.bind = function(){ - var buttons = $("#dither button") - for (var i = 0; i < buttons.length; i++) { - (function(n){ - buttons[n].onclick = function(){ - algo = buttons[n].id; - ui.build() - } - })(i) - } -} - -ui.choose = function(){ - status("loading image..") - loadImage( this.src, ui.ready ); -} - -ui.ready = function(){ - status("ready") - loading = false - if (window.gif) { - frames = gif.frames - } - else { - fc = cq(img.width, img.height) - fc.drawImage(img, 0, 0) - frames = [ { ctx: fc.context } ] - } - w = viewport.canvas.width = frames[0].ctx.canvas.width - h = viewport.canvas.height = frames[0].ctx.canvas.height - ui.build() -} - -ui.build = function (){ - anim = [] - for (var i in frames) { - anim.push( ui.dither(frames[i].ctx).context ) - } -} - -ui.animate = function(t){ - requestAnimationFrame(ui.animate) - if (! anim.length) return; - - if (window.gif && window.gif.currentFrame) { - var idx = gif.currentFrame(t) - var frame = anim[idx] - } - else { - var frame = anim[0] - } - viewport.clearRect(0,0,w,h).drawImage(frame.canvas, 0, 0, w, h); -} - -ui.dither = function (frame){ - var cc = cq(w, h) - cc.drawImage(frame.canvas, 0, 0, w, h); - cc[algo + "Dither"]( ) - return cc -} - -function status(s){ $("#status").html(s); console.log(s) } - -$(ui.init) - -</script> -</html> - |