diff options
| -rw-r--r-- | js/gallery.js | 25 | ||||
| -rw-r--r-- | shader-picker.html | 22 |
2 files changed, 33 insertions, 14 deletions
diff --git a/js/gallery.js b/js/gallery.js index 9b2372d..16ecdd8 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -10,7 +10,7 @@ gallery.init = function(){ gallery.bind = function(){ $("#gallery-random").click(asdf.random) $("#gallery-search").submit(dumpfm.search) - $(document).on("click", "#gallery-images img", gallery.choose) + $(document).on("click", "#gallery-images canvas", gallery.click) status("ready") } @@ -25,9 +25,30 @@ gallery.load = function(ims){ gallery.image = function(im){ var img = new Image (); img.onload = function(){ - $("#gallery-images").append(img); + var tall = 100 + var aspect = img.naturalHeight / img.naturalWidth + var side = ~~(tall/aspect) + var thumb = cq(side,tall) + thumb.drawImage(img,0,0,side,tall) + $(img).hide() + $("#gallery-images").append(thumb.canvas).append(img); + $(thumb.canvas).mouseover(function(){ + $(thumb.canvas).hide() + $(img).show() + }) + img.width = side + img.height = tall + $(img).mouseout(function(){ + $(img).hide() + $(thumb.canvas).show() + }) + $(img).click(gallery.choose); } try { img.src = im.url; } catch(e){ return; } if (img.complete) img.onload(); } + +gallery.click = function(){ + gallery.choose() +} diff --git a/shader-picker.html b/shader-picker.html index a6d1e12..db508aa 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -28,8 +28,9 @@ div { display: inline-block; padding: 10px;} .close,.remove { cursor: pointer; } #uploaded-url { display: none; width: 300px; } form { display: inline-block; } -#gallery-images img { max-width: 200px; height: 90px; margin: 5px; } #gallery { clear: right; width:100%;} +#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> @@ -40,7 +41,7 @@ form { display: inline-block; } <button id="gallery-search">DUMP SEARCH</button> </form> <button id="gallery-random">IM RANDOM</button> - <span id="status"></span> + <span class="status"></span> <div id="gallery-images"></div> </div> @@ -81,7 +82,7 @@ form { display: inline-block; } <button id="reset">reset</button> <button id="pause">pause</button> <button id="step-forward">>></button> - <span id="status"></span> + <span class="status"></span> <button id="save" disabled>save</button> <button id="upload" disabled>upload</button> <br> @@ -365,9 +366,7 @@ function render (){ $("#render").html("rendering") } -function status(s){ - $("#status").html(s) -} +function status(s){ $(".status").html(s) } var encoder = new GifEncoder() @@ -433,12 +432,11 @@ function upload(){ <span class="frame"></span> </script> <script type="text/javascript-shader" id="first"> -t /= 500 -if (a == 0) { r = g = b = x; t /= -3 } -r *= (Math.sin(t*x/y) + 1)/2 -g *= (Math.cos(t*y/x) + 0.4)/2 -b *= (Math.sin(t) + 1.5)/2 -a = y + +u = x + t/10 +v = y * sin(b/100) + +rgbpixel(d,u,v) </script> <script type="text/javascript-shader" id="second"> |