From dd7d18e344da5aa5b326621857d17993d01d7151 Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 2 Feb 2014 01:08:41 -0500 Subject: toggle iframes, write short copy --- commands.html | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ instructions.html | 69 ------------------------------------------------------ js/help.js | 10 ++++---- shader-combo.html | 6 ++--- shader-picker.html | 12 +++++----- tutorial.html | 2 +- 6 files changed, 85 insertions(+), 83 deletions(-) create mode 100644 commands.html delete mode 100644 instructions.html diff --git a/commands.html b/commands.html new file mode 100644 index 0000000..df9b072 --- /dev/null +++ b/commands.html @@ -0,0 +1,69 @@ + + + +instructions + + + +

function parameters
+w, h, x, y
+t = current time (ms)
+d[] = imageData array
+r, g, b, a = color values
+mousex, mousey
+
+Math aliases
+floor, ceil, round
+abs, sign, mod(n,m)
+pow, exp, sqrt
+cos, sin, tan
+acos, asin, atan, atan2
+random()
+E, PI, PHI
+
+convenience functions
+clamp(n,min,max)
+mix(n,a,b) (lerp)
+step(a,b)
+smoothstep(min,max,n)
+avg(m,n,a)
+cosp, sinp (mapped to [0,1])
+pixel(x,y) == 4*(y*w+h)
+dist(x,y,a,b)
+angle(x,y,a,b)
+rand(n), randint(n)
+randrange(a,b)
+choice(array)
+deg(radians), rad(degrees)
+
+set pixel color
+rgb(r,g,b)
+rgbref([rgb])
+black() white() red()
+gray(n)
+
+color spaces
+rgb2xyz(rgb)
+xyz2rgb(xyz)
+xyz2hunterlab(xyz)
+hunterlab2xyz(Lab)
+xyz2cielab(xyz)
+cielab2xyz(Lab)
+rgb2hsl(rgb)
+hsl2rgb(hsl)
+rgb2cmy(r,g,b)
+cmy2rgb(cmy)
+cmy2cmyk(cmy)
+cmyk2cmy(cmyk)
+(not all have been tested)
+

+ + + diff --git a/instructions.html b/instructions.html deleted file mode 100644 index df9b072..0000000 --- a/instructions.html +++ /dev/null @@ -1,69 +0,0 @@ - - - -instructions - - - -

function parameters
-w, h, x, y
-t = current time (ms)
-d[] = imageData array
-r, g, b, a = color values
-mousex, mousey
-
-Math aliases
-floor, ceil, round
-abs, sign, mod(n,m)
-pow, exp, sqrt
-cos, sin, tan
-acos, asin, atan, atan2
-random()
-E, PI, PHI
-
-convenience functions
-clamp(n,min,max)
-mix(n,a,b) (lerp)
-step(a,b)
-smoothstep(min,max,n)
-avg(m,n,a)
-cosp, sinp (mapped to [0,1])
-pixel(x,y) == 4*(y*w+h)
-dist(x,y,a,b)
-angle(x,y,a,b)
-rand(n), randint(n)
-randrange(a,b)
-choice(array)
-deg(radians), rad(degrees)
-
-set pixel color
-rgb(r,g,b)
-rgbref([rgb])
-black() white() red()
-gray(n)
-
-color spaces
-rgb2xyz(rgb)
-xyz2rgb(xyz)
-xyz2hunterlab(xyz)
-hunterlab2xyz(Lab)
-xyz2cielab(xyz)
-cielab2xyz(Lab)
-rgb2hsl(rgb)
-hsl2rgb(hsl)
-rgb2cmy(r,g,b)
-cmy2rgb(cmy)
-cmy2cmyk(cmy)
-cmyk2cmy(cmyk)
-(not all have been tested)
-

- - - diff --git a/js/help.js b/js/help.js index 6f39aa7..7bc3a6b 100644 --- a/js/help.js +++ b/js/help.js @@ -7,13 +7,15 @@ help.init = function(){ help.bind = function(){ $(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true }) - $("#help").click(function(){ $("#instructions").toggle() ;console.log("zZ") }) - $("#instructions .close").click(function(){ $("#instructions").toggle() ;console.log("zZ") }) - $("#instructions").draggable({ + $("#show-commands").click(function(){ $("#tutorial").hide(); $("#commands").toggle() }) + $("#show-tutorial").click(function(){ $("#commands").hide(); $("#tutorial").toggle() }) + $("#commands .close").click(function(){ $("#commands").toggle() }) + $("#tutorial .close").click(function(){ $("#tutorial").toggle() }) + $("#commands,#tutorial").draggable({ start: drag_start, stop: drag_stop }) - $("#instructions").disableSelection(); + $("#commands,#tutorial").disableSelection(); } function drag_start(){ dragging = true; $(this).addClass("dragging") } diff --git a/shader-combo.html b/shader-combo.html index 99c5a6c..5d9c869 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -29,7 +29,7 @@ a { color: #00f; } .dragging { cursor: -webkit-grabbing !important; } .ui-sortable-helper { cursor: -webkit-grabbing !important; } -#instructions { top:20px;right:20px; width:190px;height:465px; } +#commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); } #tutorial { top:40px;right:30px; width:290px;height:325px; display: block;} .iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; } .iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;} @@ -64,7 +64,7 @@ a { color: #00f; }

shaderblaster

- +

- + @@ -103,7 +103,7 @@ a { color: #00f; }

diff --git a/tutorial.html b/tutorial.html index 84d4ca0..be42f74 100644 --- a/tutorial.html +++ b/tutorial.html @@ -18,7 +18,7 @@ Your basic variables are position (x, y), time (t), and color (r, g, b, a). Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. Click commands to see a complete list. -Use the bar below to search Dumpfm and Photoblaster for images. +Use the bar below to search Dumpfm and Photoblaster for images, or use your own. If you make a cool effect, you can render it out to a gif, or save the shader for others to use. -- cgit v1.2.3-70-g09d2