diff options
| -rw-r--r-- | instructions.html | 43 | ||||
| -rw-r--r-- | js/util.js | 1 | ||||
| -rw-r--r-- | shader-gif.html | 25 |
3 files changed, 65 insertions, 4 deletions
diff --git a/instructions.html b/instructions.html new file mode 100644 index 0000000..2903dc1 --- /dev/null +++ b/instructions.html @@ -0,0 +1,43 @@ +<!doctype html> +<html> +<head> +<title>instructions</title> +<style type="text/css"> +html,body{margin:0;padding:5px; } +pre { font-family: serif; font-size: 14px; margin:0;padding:0;} +u{ color: #866; } +i{ color: #666; } +</style> +</head> +<body> +<pre id="pre"><u>function parameters</u> +x, y = position of pixel +t = current time (ms) +d = imageData array +r, g, b, a = color values + +<u>Math aliases</u> +floor, ceil, round, abs, sign +pow, exp, sqrt +sin, cos, tan +asin, acos, atan, atan2 +random() +E, PI + +<u>convenience functions</u> +clamp(n,min,max) +lerp(n,a,b) +mix(n,a,b) +step(n,a,b) +smoothstep(n,a,b) +sinp, cosp (mapped to [0,1]) +pixel(x,y) == 4*(y*w+h) +rand(n), randint(n) +choice(array) +deg(radians), rad(degrees) +</pre> +</body> +<script> +pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)") +</script> +</html> @@ -36,6 +36,7 @@ function randint(n){ return rand(n)|0 } function choice(a){ return a[randint(a.length)] } function deg(n){ return n*180/PI } function rad(n){ return n*PI/180 } +function pixel(x,y){ return 4*(y*w+x) } function step (n,a,b) { return clamp((n - a) / (b - a), 0.0, 1.0); diff --git a/shader-gif.html b/shader-gif.html index 385f644..f990805 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -5,9 +5,11 @@ #url { width: 450px; } #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; } #shader { width: 100%; height: 247px; font-family: fixed; } -#frames { width: 435px; min-height: 100px; border: 1px solid #ddd; line-height: 0; } #controls { width: 450px; } -#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; } +#frames { width: 435px; min-height: 100px; border: 1px solid #ddd; line-height: 0; } +#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; } +.dragging { cursor: -webkit-grabbing !important; } +.ui-sortable-helper { cursor: -webkit-grabbing !important; } #frames canvas { display: block } #frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; } .paused { background: black; color: white; border-width: 1px; padding: 2px 7px; } @@ -17,6 +19,10 @@ div { display: inline-block; padding: 10px;} #rendered { display: none; } #render,#save { font-weight: bold; } #render { float: right; } +#instructions { position: absolute;top:20px;right:20px; width:180px;height:450px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; } +#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;pointer-events:none;} +#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; } +.close,.remove { cursor: pointer; } </style> </head> <body> @@ -47,6 +53,7 @@ div { display: inline-block; padding: 10px;} <br> <br> + <button id="help">help</button> <button id="demo">demo</button> <button id="dither-demo">dither</button> <br> @@ -60,6 +67,7 @@ div { display: inline-block; padding: 10px;} <br> </div> +<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">x</button></div> </body> <script type="text/javascript" src="js/vendor/gif-encode/util.js"></script> <script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script> @@ -93,8 +101,8 @@ function init(){ $("#demo").click(function(){ demo("#first") }) $("#dither-demo").click(function(){ demo("#second") }) $("#frames").sortable({ - start: function(){ dragging = true }, - stop: function(){ dragging = false } + start: drag_start, + stop: drag_stop }); $(document).on("mousemove", function(e) { mousex = event.pageX @@ -114,10 +122,19 @@ function init(){ $("#remove-all-frames").click(remove_all_frames) $("#render").click(render) $("#save").click(save) + $("#help,#instructions .close").click(function(){ $("#instructions").toggle() }) + $("#instructions").draggable({ + start: drag_start, + stop: drag_stop + }) + $("#instructions").disableSelection(); + demo('#first') load() draw() } +function drag_start(){ dragging = true; $(this).addClass("dragging") } +function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") } function demo(el){ $el = $(el) s = $el.html() |