split up sample canvas and brush shaders

4 files changed, 203 insertions, 149 deletions

diff --git a/doc/index.html b/doc/index.html
index 7fd6465..43d769e 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -21,10 +21,14 @@ These are some handy documents which address some of the more obscure features o
 the asdf.us color code tool:
 
 * <a href="tips.txt">tips.txt</a> - Tips on using the keyboard
-* <a href="shadetut.txt">shadetut.txt</a> - A brief tutorial on ASCII shaders.
-* <a href="shaderz.txt">shaderz.txt</a> - Some cool ASCII shaders for you to try.
 * <a href="irssi.txt">irssi.txt</a> - Instructions on using IRSSI to make color codes.
 
+Documents on Shaders
+* <a href="shadetut.txt">shadetut.txt</a> - A brief tutorial on ASCII shaders.
+* <a href="shaders/brush.txt">shaders/brush.txt</a> - Shaders designed to work on the brush
+* <a href="shaders/canvas.txt">shaders/canvas.txt</a> - Shaders designed to work on the canvas
+* <a href="shaders/util.txt">shaders/util.txt</a> - Miscellaneous utilities / snippets
+
 For more information on IRC, Color Codes, and much more, visit the <a href="http://jollo.org/LNT/doc/">documentation sitemap</a> for the <a href="http://jollo.org/">Jollo IRC Network</a>.
 
 <a href="/ascii/">asdf.us/ascii</a>
diff --git a/doc/shaders/brush.txt b/doc/shaders/brush.txt
new file mode 100644
index 0000000..8a5f672
--- /dev/null
+++ b/doc/shaders/brush.txt
@@ -0,0 +1,126 @@
+BRUSH SHADERS
+=============
+
+Unless noted, these shaders were written to work on the brush itself.
+Make sure "brush" is selected and "animate" is checked.
+
+
+>> distressed texture brush
+
+Sample use of the "choice" function to get a random color.
+
+var char = choice("      abcdef      ")
+lex.bg = +choice("0124")
+lex.fg = +choice("01234")
+lex.char = char
+lex.opacity = char == " " ? 0 : 1
+
+
+
+>> foggy terrain brush
+
+var char = choice("      abcdef      ")
+lex.bg = choice([14,15])
+lex.fg = choice("367")
+lex.char = char
+lex.opacity = char == " " ? 0 : 1
+
+
+
+>> mirror brush (left-right)
+
+NOTE: Animate this on the canvas, then draw:
+
+if (x > w/2) {
+  lex.assign( canvas.aa[y][w-x] )
+}
+
+
+
+>> mirror brush (up-down)
+
+NOTE: Animate this on the canvas, then draw:
+
+if (x > h/2) {
+  lex.assign( canvas.aa[h-y][x] )
+}
+
+
+
+>> rainbow stardust brush
+
+Uncheck BG and animate this to brush:
+
+lex.fg = hue(t)
+lex.char = choice("            ,'.,.','******    ")
+
+
+
+>> noise brushes, works on a black background:
+
+lex.bg = max(5, yellow(randint(t)))
+lex.opacity = lex.bg == colors.black ? 0 : 1
+
+
+
+>> simple rainbow:
+
+if (lex.bg != 1) lex.bg = randint(t)
+lex.opacity = lex.bg == colors.black ? 0 : 1
+
+
+
+>> self-erasing:
+
+if (lex.bg != 1) lex.bg = yellow(randint(t))
+lex.opacity = lex.bg == colors.black ? 0 : 1
+
+
+
+>> cycling rainbow brush
+
+if (lex.bg != 1) lex.bg = hue( all_color_hue_order.indexOf( color_names[ lex.bg ] ) + 1 )
+lex.opacity = lex.bg == colors.black ? 0 : 1
+
+
+
+>> "stars" brush.. set your brush to paint just the character "#"
+
+if (lex.char == "#") {
+  lex.fg = hue(randint(15))
+  lex.char = random() > 0.1 ? " " : "+@*.,\"+'*-"[randint(10)]
+}
+
+
+
+>> use fg char to mask mask what you're drawing on the bg
+
+if (lex.char != "/") { lex.bg = 1 }
+
+
+
+>> sharded glitch brush
+
+Example: http://asdf.us/z/kksnvs.png 
+
+Use on a brush:
+
+lex.bg = t/y/x
+lex.opacity = lex.bg % 1 ? 0 : 1
+
+
+
+>> incremental brush
+
+Set your brush to be the ^ character, square, about 10x10
+Draw "char" only
+Then animate this shader on the canvas:
+
+if (lex.char=="^") {
+  lex.bg += 1
+  lex.char = " "
+}
+lex.bg += 1
+
+
+
diff --git a/doc/shaderz.txt b/doc/shaders/canvas.txt
index 4c3217f..d33f93b 100644
--- a/doc/shaderz.txt
+++ b/doc/shaders/canvas.txt
@@ -1,3 +1,17 @@
+CANVAS SHADERS
+==============
+
+These shaders were written to work on areas of canvas.
+Make sure "canvas" is selected and "animate" is checked.
+
+
+>> original shader..
+
+lex.bg = hue((x+y*y+t/10)/20)
+lex.fg = (x+y)%16
+lex.char = (y%2) ? ":" : "%" 
+
+
 
 >> energy ball ascii shader
 
@@ -17,13 +31,6 @@ if (d > r) {
 }
 
 
->> original shader..
-
-lex.bg = hue((x+y*y+t/10)/20)
-lex.fg = (x+y)%16
-lex.char = (y%2) ? ":" : "%" 
-
-
 
 >> drifting fire
 
@@ -49,36 +56,6 @@ lex.char = chara(abcd, y/h*(5/3 + tan(x/100)+random()/1))
 
 
 
->> noise brushes, works on a black background:
-
-if (lex.bg != 1) lex.bg = max(5, yellow(randint(t)))
-
-
->> simple rainbow:
-
-if (lex.bg != 1) lex.bg = randint(t)
-
-
->> self-erasing:
-
-if (lex.bg != 1) lex.bg = yellow(randint(t))
-
-
->> cycling rainbow brush
-
-if (lex.bg != 1) lex.bg = hue( all_color_hue_order.indexOf( color_names[ lex.bg ] ) + 1 )
-
-
-
->> inelegant way to slow the frame rate of a shader.
-
-window.zz=window.zz||0
-if(!(x+y)) zz++
-if (lex.bg != 1 && !(zz % 4)) {
-  ...
-}
-
-
 >> frog shader v2
 
 t/=-100
@@ -89,6 +66,7 @@ lex.fg = [1,3,9][floor(d*3)%3]
 lex.bg=1
 
 
+
 >> frog shader v3
 
 // set period to like 0.2 for a normal circle
@@ -104,6 +82,9 @@ lex.fg = [3,9][floor(d3)]
 lex.bg=1
 
 
+
+>> spaceships
+
 many cool shaders are possible with this technique.. changing the char
 gradient (lex.char=...) etc. i love how the dots move on v4.
 
@@ -122,22 +103,9 @@ lex.fg = [3,9][floor(d3)]
 lex.bg=1
 
 
->> "stars" brush.. set your brush to paint just the character "#"
-
-if (lex.char == "#") {
-  lex.fg = hue(randint(15))
-  lex.char = random() > 0.1 ? " " : "+@*.,\"+'*-"[randint(10)]
-}
-
-
->> use fg char to mask mask what you're drawing on the bg
-
-if (lex.char != "/") { lex.bg = 1 }
-
 
 >> concentric circles with a wavy "sunburst" pattern going around them
 
-
 x -= w/2
 y -= h/2
 
@@ -161,6 +129,7 @@ else
   lex.bg = 8
 
 
+
 >> slash-based interference patterns
 
 if (x > h*2) x=h-x
@@ -179,6 +148,7 @@ else {
 }
 
 
+
 >> sparkling stars
 
 if (lex.char != " ") {
@@ -188,31 +158,6 @@ if (lex.char != " ") {
 }
 
 
->> clashing contrast text..
-
-First, make a canvas that's totally white.
-
-Run this shader:
-
-if (lex.bg == 0) {
-  lex.bg = ((x)%2) ? 15 : 14
-}
-
-Then set your brush to a white square.
-
-Run this shader w/ animate:
-
-if (lex.bg == 0) {
-  lex.bg = ((x)%2) ? 0 : 1
-}
-
-
->> glitch shader - produces odd combinations of fg/bg
-
-lex.char=String.fromCharCode(lex.char.charCodeAt(0)+1)
-lex.bg+=7
-lex.fg+=5
-
 
 >> coogi x/y doodle
 
@@ -225,17 +170,27 @@ x-=1
 x*=x-sin(y/t)
 y*=1
 
-  lex.bg = 1 // gray( sin(x/(y/3-1)+t) + sin(y/4+t) )
-  lex.fg = hue( sin((y/5)+t) - cos(x*t) *5 )
-  lex.char = " _.,:;\"~|  "[Math.round(xx*(y+1+(x+t/102)/4)*13)%13]
+lex.bg = 1 // gray( sin(x/(y/3-1)+t) + sin(y/4+t) )
+lex.fg = hue( sin((y/5)+t) - cos(x*t) *5 )
+lex.char = " _.,:;\"~|  "[Math.round(xx*(y+1+(x+t/102)/4)*13)%13]
+
+
+
+>> glitch shader - produces odd combinations of fg/bg
+
+lex.char=String.fromCharCode(lex.char.charCodeAt(0)+1)
+lex.bg+=7
+lex.fg+=5
+
 
 
 >> dots / lines shader
 
-  xx = ((t/10*x)*y/10)%8
-  lex.bg = colors.black
-  lex.fg = green(x*3+y*5)
-  lex.char = ((xx%1) !== 0) ? " " : " .,;=+!@"[xx]
+xx = ((t/10*x)*y/10)%8
+lex.bg = colors.black
+lex.fg = green(x*3+y*5)
+lex.char = ((xx%1) !== 0) ? " " : " .,;=+!@"[xx]
+
 
 
 >> munching squares horizon
@@ -247,81 +202,25 @@ x/=y/10
 lex.bg=hue((x^y)+t)
 
 
->> sharded glitch brush
-
-Example: http://asdf.us/z/kksnvs.png 
-
-Use on a brush:
-
-lex.bg = t/y/x
-lex.opacity = lex.bg % 1 ? 0 : 1
 
+>> grayscale vertical interlacing
 
->> incremental brush
-
-Set your brush to be the ^ character, square, about 10x10
-Draw "char" only
-Then animate this shader on the canvas:
-
-if (lex.char=="^") {
-  lex.bg += 1
-  lex.char = " "
-}
-lex.bg += 1
-
-
->> copy color brushes
-
-Set to "animate brush", then use option+shift (alt+shift?) to
-copy color from the canvas. Brush will have "shape" of 
-copied color only.. can be a cool effect when used with fg/bg only.
-
-lex.opacity = lex.bg == colors.black ? 0 : 1
-
-
->> distressed texture brush
-
-Sample use of the "choice" function to get a random color.
-
-var char = choice("      abcdef      ")
-lex.bg = +choice("0124")
-lex.fg = +choice("01234")
-lex.char = char
-lex.opacity = char == " " ? 0 : 1
-
-
->> foggy terrain brush
-
-var char = choice("      abcdef      ")
-lex.bg = choice([14,15])
-lex.fg = choice("367")
-lex.char = char
-lex.opacity = char == " " ? 0 : 1
-
-
->> mirror brush (left-right)
+First, make a canvas that's totally white.
 
-Animate this on the canvas, then draw:
+Run this shader:
 
-if (x > w/2) {
-  lex.assign( canvas.aa[y][w-x] )
+if (lex.bg == 0) {
+  lex.bg = ((x)%2) ? 15 : 14
 }
 
+Then set your brush to a white square.
 
->> mirror brush (up-down)
-
-Animate this on the canvas, then draw:
+Run this shader w/ animate:
 
-if (x > h/2) {
-  lex.assign( canvas.aa[h-y][x] )
+if (lex.bg == 0) {
+  lex.bg = ((x)%2) ? 0 : 1
 }
 
 
->> rainbow stardust brush
-
-Uncheck BG and animate this to brush:
-
-lex.fg = hue(t)
-lex.char = choice("            ,'.,.','******    ")
 
 
diff --git a/doc/shaders/util.txt b/doc/shaders/util.txt
new file mode 100644
index 0000000..d192652
--- /dev/null
+++ b/doc/shaders/util.txt
@@ -0,0 +1,25 @@
+SHADER UTILITIES
+================
+
+These are little snippets which may be useful in writing your own shaders.
+
+
+
+>> basic way to slow the frame rate of a shader.
+
+window.zz=window.zz||0
+if(!(x+y)) zz++
+if (lex.bg != 1 && !(zz % 4)) {
+  ...
+}
+
+
+>> handy for brushes - use color to mask brush shape
+
+lex.opacity = lex.bg == colors.black ? 0 : 1
+
+
+Tip: Set to "animate brush", then use option+shift (alt+shift) to
+copy color from the canvas. Brush will have the "shape" of the
+copied color only.  Can be a cool effect when used with fg/bg only.
+