instructions

From 712f556fe51bff5aa16e9da3e1190d4ac43dc744 Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 16 Dec 2013 18:31:16 -0500 Subject: add help --- instructions.html | 43 +++++++++++++++++++++++++++++++++++++++++++ js/util.js | 1 + shader-gif.html | 25 +++++++++++++++++++++---- 3 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 instructions.html diff --git a/instructions.html b/instructions.html new file mode 100644 index 0000000..2903dc1 --- /dev/null +++ b/instructions.html @@ -0,0 +1,43 @@ + + + +instructions + + + +

function parameters
+x, y = position of pixel
+t = current time (ms)
+d = imageData array
+r, g, b, a = color values
+
+Math aliases
+floor, ceil, round, abs, sign
+pow, exp, sqrt
+sin, cos, tan
+asin, acos, atan, atan2
+random()
+E, PI
+
+convenience functions
+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)
+

+ + + diff --git a/js/util.js b/js/util.js index f071596..e4c50dc 100644 --- a/js/util.js +++ b/js/util.js @@ -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; } @@ -47,6 +53,7 @@ div { display: inline-block; padding: 10px;}

+
@@ -60,6 +67,7 @@ div { display: inline-block; padding: 10px;}
+

@@ -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() -- cgit v1.2.3-70-g09d2