From b1ce05901e15b7859f33b46c21e92755a622ea3d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 10 Apr 2016 11:16:29 -0400 Subject: split up sample canvas and brush shaders --- doc/index.html | 8 +- doc/shaders/brush.txt | 126 +++++++++++++++++++ doc/shaders/canvas.txt | 226 ++++++++++++++++++++++++++++++++++ doc/shaders/util.txt | 25 ++++ doc/shaderz.txt | 327 ------------------------------------------------- 5 files changed, 383 insertions(+), 329 deletions(-) create mode 100644 doc/shaders/brush.txt create mode 100644 doc/shaders/canvas.txt create mode 100644 doc/shaders/util.txt delete mode 100644 doc/shaderz.txt (limited to 'doc') 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: * tips.txt - Tips on using the keyboard -* shadetut.txt - A brief tutorial on ASCII shaders. -* shaderz.txt - Some cool ASCII shaders for you to try. * irssi.txt - Instructions on using IRSSI to make color codes. +Documents on Shaders +* shadetut.txt - A brief tutorial on ASCII shaders. +* shaders/brush.txt - Shaders designed to work on the brush +* shaders/canvas.txt - Shaders designed to work on the canvas +* shaders/util.txt - Miscellaneous utilities / snippets + For more information on IRC, Color Codes, and much more, visit the documentation sitemap for the Jollo IRC Network. asdf.us/ascii 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/shaders/canvas.txt b/doc/shaders/canvas.txt new file mode 100644 index 0000000..d33f93b --- /dev/null +++ b/doc/shaders/canvas.txt @@ -0,0 +1,226 @@ +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 + +d = dist(x/2+w/4, y, w/2, h/2) +an = angle(x/2+w/4, y, w/2,h/2)+t/4200 +r=10.2 + +if (d < r) lex.bg = randint(r) + +ll=abs(an|0)+"" +lex.char=ll[ll.length-1] + +if (d > r) { + lex.bg = randint(d) + lex.fg = randint(d) + lex.char = ll[ll.length-2] +} + + + +>> drifting fire + +t += sin(x/1000)*100000 +pos = y/h*6 + sin(x*3) - cos(y*t/10000-10) +pos = clamp(pos, 0, 6) +lex.bg = hue(pos) + + + +>> the "bJoel56" shader + +yy=y +x-=w/2 +y-=h/2 + +lex.bg = blue(yy/h+random()) +lex.fg = green(yy/h*4 + sin(x/100+random()/2)) // hue(t/1000)|0; + +var abcd=".'~:;!>+=icjtJYSGSXDQKHNWM"; +function chara (aa,n) { return aa[clamp(n*aa.length, 0, aa.length)|0] } +lex.char = chara(abcd, y/h*(5/3 + tan(x/100)+random()/1)) + + + +>> frog shader v2 + +t/=-100 +d = sinp( (dist(x/2+w/4, y, w/2, h/2) + t)/2 ) * 10 + +lex.char=',./>"ASE$#'[(floor(d))] +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 +period = y/10 + +t/=-100 +d = sinp( (dist(x/2+w/4, y, w/2, h/2) + t) * period ) +dd = d * 10.5 +d3 = dd < 8 ? 0 : 1 + +lex.char=' .,"+/>OXEN'[(floor(dd))] +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. + +this is a variation that looks like a bunch of ships flying across the screen. +has a really cool 3d look to it cuz the rows move at different speeds. + +period = sin(y) + +t/=-100 +d = sinp( (dist(x/2+w/4, y, w/2, h/2) + t) * period ) +dd = d * 10.5 +d3 = dd < 8 ? 0 : 1 + +lex.char=' .,"+/>\^+'[(floor(dd))] +lex.fg = [3,9][floor(d3)] +lex.bg=1 + + + +>> concentric circles with a wavy "sunburst" pattern going around them + +x -= w/2 +y -= h/2 + +x /= h +y /= h/2 + 2 + +r = dist(x,y,0,0) +ang = angle(x,y,0,0) + +if (r < 0.6) { + if (abs(mod(sin((r*t)/100000000000) + ang*18,TWO_PI)) < 2) + lex.bg = 12 + else + lex.bg = 5 +} +else if (r < 0.65) + lex.bg = 4 +else if (abs(mod(sin((r*t)/100000000000) + ang*18,TWO_PI)) < 2) + lex.bg = 7 +else + lex.bg = 8 + + + +>> slash-based interference patterns + +if (x > h*2) x=h-x +y-=h/2 +t/=2000 + +if (sin(x-y*t) > 0) { + lex.bg=1 + lex.fg=4 + lex.char= Math.floor(x-y*10001+t)%2 ? '\/' : '\\' +} +else { + lex.bg=1 + lex.fg=9 + lex.char= Math.floor(3*x+y+t)%2 ? '\\' : ' ' +} + + + +>> sparkling stars + +if (lex.char != " ") { + lex.fg =floor( Math.random()*10 ) + var az="Xx+*" + lex.char=az[floor(az.indexOf(lex.char)+ t/10000000 +Math.random())%az.length] +} + + + +>> coogi x/y doodle + +xx=x +t/=1000 +x/=w/2 +y/=h/2 +y-=1 +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] + + + +>> 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] + + + +>> munching squares horizon + +t/=100 +y+=10 +x-=w/2 +x/=y/10 +lex.bg=hue((x^y)+t) + + + +>> grayscale vertical interlacing + +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 +} + + + + 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. + diff --git a/doc/shaderz.txt b/doc/shaderz.txt deleted file mode 100644 index 4c3217f..0000000 --- a/doc/shaderz.txt +++ /dev/null @@ -1,327 +0,0 @@ - ->> energy ball ascii shader - -d = dist(x/2+w/4, y, w/2, h/2) -an = angle(x/2+w/4, y, w/2,h/2)+t/4200 -r=10.2 - -if (d < r) lex.bg = randint(r) - -ll=abs(an|0)+"" -lex.char=ll[ll.length-1] - -if (d > r) { - lex.bg = randint(d) - lex.fg = randint(d) - lex.char = ll[ll.length-2] -} - - ->> original shader.. - -lex.bg = hue((x+y*y+t/10)/20) -lex.fg = (x+y)%16 -lex.char = (y%2) ? ":" : "%" - - - ->> drifting fire - -t += sin(x/1000)*100000 -pos = y/h*6 + sin(x*3) - cos(y*t/10000-10) -pos = clamp(pos, 0, 6) -lex.bg = hue(pos) - - - ->> the "bJoel56" shader - -yy=y -x-=w/2 -y-=h/2 - -lex.bg = blue(yy/h+random()) -lex.fg = green(yy/h*4 + sin(x/100+random()/2)) // hue(t/1000)|0; - -var abcd=".'~:;!>+=icjtJYSGSXDQKHNWM"; -function chara (aa,n) { return aa[clamp(n*aa.length, 0, aa.length)|0] } -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 -d = sinp( (dist(x/2+w/4, y, w/2, h/2) + t)/2 ) * 10 - -lex.char=',./>"ASE$#'[(floor(d))] -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 -period = y/10 - -t/=-100 -d = sinp( (dist(x/2+w/4, y, w/2, h/2) + t) * period ) -dd = d * 10.5 -d3 = dd < 8 ? 0 : 1 - -lex.char=' .,"+/>OXEN'[(floor(dd))] -lex.fg = [3,9][floor(d3)] -lex.bg=1 - - -many cool shaders are possible with this technique.. changing the char -gradient (lex.char=...) etc. i love how the dots move on v4. - -this is a variation that looks like a bunch of ships flying across the screen. -has a really cool 3d look to it cuz the rows move at different speeds. - -period = sin(y) - -t/=-100 -d = sinp( (dist(x/2+w/4, y, w/2, h/2) + t) * period ) -dd = d * 10.5 -d3 = dd < 8 ? 0 : 1 - -lex.char=' .,"+/>\^+'[(floor(dd))] -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 - -x /= h -y /= h/2 + 2 - -r = dist(x,y,0,0) -ang = angle(x,y,0,0) - -if (r < 0.6) { - if (abs(mod(sin((r*t)/100000000000) + ang*18,TWO_PI)) < 2) - lex.bg = 12 - else - lex.bg = 5 -} -else if (r < 0.65) - lex.bg = 4 -else if (abs(mod(sin((r*t)/100000000000) + ang*18,TWO_PI)) < 2) - lex.bg = 7 -else - lex.bg = 8 - - ->> slash-based interference patterns - -if (x > h*2) x=h-x -y-=h/2 -t/=2000 - -if (sin(x-y*t) > 0) { - lex.bg=1 - lex.fg=4 - lex.char= Math.floor(x-y*10001+t)%2 ? '\/' : '\\' -} -else { - lex.bg=1 - lex.fg=9 - lex.char= Math.floor(3*x+y+t)%2 ? '\\' : ' ' -} - - ->> sparkling stars - -if (lex.char != " ") { - lex.fg =floor( Math.random()*10 ) - var az="Xx+*" - lex.char=az[floor(az.indexOf(lex.char)+ t/10000000 +Math.random())%az.length] -} - - ->> 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 - -xx=x -t/=1000 -x/=w/2 -y/=h/2 -y-=1 -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] - - ->> 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] - - ->> munching squares horizon - -t/=100 -y+=10 -x-=w/2 -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 - - ->> 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) - -Animate this on the canvas, then draw: - -if (x > w/2) { - lex.assign( canvas.aa[y][w-x] ) -} - - ->> mirror brush (up-down) - -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(" ,'.,.','****** ") - - -- cgit v1.2.3-70-g09d2