diff options
| author | jules <jules@okfoc.us> | 2014-01-21 01:18:36 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2014-01-21 01:18:36 -0500 |
| commit | ced1db8df6c73f7bd0a4debd3f20b5570b99e7b4 (patch) | |
| tree | ac3caa637cb7538cb8e1ee6316cc07a10b1d4dba | |
| parent | c55b90c1ed47028a5e6ce0aff2284fb7cb5ed554 (diff) | |
shader loader demo
| -rw-r--r-- | js/api/get.js | 6 | ||||
| -rw-r--r-- | js/render.js | 5 | ||||
| -rw-r--r-- | shader-api.html | 155 |
3 files changed, 164 insertions, 2 deletions
diff --git a/js/api/get.js b/js/api/get.js index ec269b0..ae06dbd 100644 --- a/js/api/get.js +++ b/js/api/get.js @@ -31,6 +31,10 @@ ShaderAPI.range = function(limit, offset, cb){ // latest - get the latest N shaders // limit: number of shaders to fetch ShaderAPI.latest = function(limit, cb){ + if (! cb) { + cb = limit + limit = ShaderAPI.limit + } ShaderAPI.fetch({ f: "range", limit: limit || ShaderAPI.limit @@ -66,7 +70,7 @@ ShaderAPI.username = function(username, cb){ } // list_users - list all users -ShaderAPI.list_users = function(list_users, cb){ +ShaderAPI.list_users = function(cb){ ShaderAPI.fetch({ f: "list_users" }, cb) diff --git a/js/render.js b/js/render.js index 9d3ab04..fdb0125 100644 --- a/js/render.js +++ b/js/render.js @@ -93,11 +93,14 @@ function animate(t){ draw(t) // timing = +(new Date()) - timing fps = avg(fps, 1000/step_t, 4) - status(~~(fps) + " fps") + // status(~~(fps) + " fps") } + function draw(t) { t -= start_t t -= pause_t frame = giveFrame(t) shade(frame, t) } + +function status(s){ $("#status").html(s); console.log(s) } diff --git a/shader-api.html b/shader-api.html new file mode 100644 index 0000000..284d1a4 --- /dev/null +++ b/shader-api.html @@ -0,0 +1,155 @@ +<!doctype html> +<html> +<head> +<style type="text/css"> +#url { width: 300px; } +#width,#height,#frames,#delay {width: 30px; } +#shader { width: 400px; height: 247px; font-family: fixed; } +div { float: left; padding: 10px;} +form { display: inline-block; } +#shader-api,#gallery { clear: right; width:100%; padding: 0; } +#shader-gallery,#gallery-images { display: block; max-height: 210px; overflow-y: auto; width: 100%; } +#shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; } +.shader { + width: 100px; +} +#username { width: 40px; } +a { color: #00f; } +#shader-id { width: 40px; } +</style> +</head> +<body> + +<!-- +<div id="gallery"> + <div id="gallery-form"> + <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 class="status"></span> + </div> + <div id="gallery-images"></div> +</div> +--> + +<div id="shader-api"> + <input type="text" id="shader-id"><button id="fetch-info">info</button> + <button id="fetch-all">all</button> + <button id="fetch-originals">originals</button> + <button id="fetch-latest">latest</button> + <button id="fetch-next-page">next page</button> + <button id="fetch-history">history</button> + <select id="pick-user"> + <option>fetching users..</option> + </select> + + <div id="shader-gallery"> + </div> +</div> + +<div id="controls"> + <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> + <br> + <br> + + <textarea id="shader"></textarea> + <br> + <br> + +</div> + +<div id="workspace"></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/util.js"></script> +<script type="text/javascript" src="js/color.js"></script> +<script type="text/javascript" src="js/image.js"></script> +<script type="text/javascript" src="js/gallery.js"></script> +<script type="text/javascript" src="js/render.js"></script> +<script type="text/javascript" src="js/shader.js"></script> +<script type="text/javascript" src="js/api/get.js"></script> +<script type="text/javascript" src="js/api/set.js"></script> +<script type="text/html" id="shader-gallery-template"> +<img src="{thumbnail_url}"> +{username} +</script> +<script type="text/javascript"> + +var cc = cq(0,0).appendTo("#workspace") +var w, h + +$(init) + +function init(){ + $("#url").change(load) +// run('#first') + +// $("#shader-id") +// $("#fetch-info") + $("#fetch-all").click(function(){ + ShaderAPI.all(load_shaders) + }) + $("#fetch-latest").click(function(){ + ShaderAPI.latest(load_shaders) + }).trigger("click") +// $("#fetch-next-page") +// $("#fetch-history") + + function load_shaders(err, shaders){ + var $el = $("#shader-gallery").empty() + var template = $("#shader-gallery-template").html() + + for (var i in shaders) { + var $shader = $("<div>").addClass("shader") + $shader.data("shader", shaders[i]) + var html = template + for (var field in shaders[i]) { + html = html.replace("{" + field + "}", shaders[i][field]) + } + $shader.html(html) + + $el.append( $shader ) + } + } + + ShaderAPI.list_users(function(err, users){ + var $el = $("#pick-user").empty() + for (var i in users) { + var $option = $("<option>") + var username = users[i].username + $option.val(username).html(username) + $el.append( $option ) + } + }) + + $(document).on("change", "#pick-user", function(){ + var name = $(this).val() + ShaderAPI.username(name, load_shaders) + }) + $(document).on("click", ".shader", function(){ + run( $(this).data("shader") ) + }) + + load() + + document.getElementById('shader').addEventListener('input', shader_build); + shader_build() + + requestAnimationFrame(animate) +} +function run(shader_object){ + console.log(shader_object) + $("#url").val( shader_object.image_url ) + $("#shader").html(shader_object.script) + + load() + shader_build() +} + +</script> +</html> |