summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJules <jules@asdf.us>2016-03-22 11:45:42 -0400
committerJules <jules@asdf.us>2016-03-22 11:45:42 -0400
commit89d32364d11f1be78dae9644c0d3176967a3c944 (patch)
treec4832bf60f41d031cacf0896e3fe3e06c87bf4e7
parent6a30feead73dbee2d664b0099efcdc5106096c55 (diff)
docs
-rw-r--r--doc/irssi.txt (renamed from irssi.txt)0
-rw-r--r--doc/shaderz.txt105
-rw-r--r--doc/shadetut.txt146
3 files changed, 251 insertions, 0 deletions
diff --git a/irssi.txt b/doc/irssi.txt
index 42ada16..42ada16 100644
--- a/irssi.txt
+++ b/doc/irssi.txt
diff --git a/doc/shaderz.txt b/doc/shaderz.txt
new file mode 100644
index 0000000..53a5f84
--- /dev/null
+++ b/doc/shaderz.txt
@@ -0,0 +1,105 @@
+
+>> 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
+
diff --git a/doc/shadetut.txt b/doc/shadetut.txt
new file mode 100644
index 0000000..e2940e8
--- /dev/null
+++ b/doc/shadetut.txt
@@ -0,0 +1,146 @@
+ASCII SHADER TUTORIAL
+=====================
+
+In the asdf.us/ascii shaders, you write a little math function that executes on every
+pixel on the selected area. The shaders can affect either the brush, the selected region,
+or the whole canvas.
+
+Shaders can also be animated, so they update live. With a shader applied to the brush,
+the brush changes continuously as you draw.
+
+
+THE LEX OBJECT
+==============
+
+Essentially you are writing a Javascript function that modifies this "lex" object, which
+has four properties
+
+1) lex.bg = this is the background color
+2) lex.fg = this is the foreground color (text color)
+3) lex.char = this is the letter that you see in the space
+4) lex.opacity = this is whether the pixel actually draws or not
+ - so like a circular brush is opacity 1 in the middle and opacity 0 on the corners
+
+
+THE COLOR CODE NUMBERS
+======================
+
+With lex.bg and lex.fg, the goal is to have a number between 0 and 15, corresponding to
+the color code values from mIRC.
+
+If you shift-click on the color palette, you can cycle it around to the one which shows
+the actual order of the mIRC colors.
+
+The mIRC colors are the ones that go white, black, dark blue, green, red, dark red ...
+and these correspond to the numbers 0, 1, 2, 3, 4 ...
+
+
+COLOR CYCLING
+=============
+
+Additionally there are some color functions that might help -
+These functions make it easier to cycle through colors in a way that makes sense logically
+(since the mIRC colors are in a weird order)
+
+- hue(...) = this creates a cycle of colors in terms of their hue or color name,
+ so you get a rainbow that goes from dark red through yellow, green, blue,
+ purple, and back
+- gray(...) = cycles through grayscale
+- red(...) yellow(...) green(...) blue(...) purple(...) = use smaller palettes
+- inv_hue(...) fire(...) dark_gray(...) = these are oddities i made for fun
+
+
+VARIABLES
+=========
+
+Variables you have at your disposal are similar to the asdf.us/shader tool -
+
+- x, y = the coordinates of the pixel
+- mouse.x, mouse.y = the coordinate of the mouse as it hovers over the canvas
+- t = the current time, in milliseconds
+
+TIP: The time will increase very quickly - it's good to add t /= 1000 at the top of
+your shader so it goes slowly (and won't cause a seizure).
+
+
+FUNCTIONS
+=========
+
+Remember, this is Javascript. You have the basic operators:
+
++ - / *
+
+And the bitwise operators:
+
+& | ^ ~
+
+You can do if statements with the standard comparison operators:
+
+< > == <= >=
+
+You also have access to all the functions on the Math object:
+
+floor, ceil, round
+abs, sign, mod(n,m), xor
+pow, exp, sqrt
+cos, sin, tan
+acos, asin, atan, atan2
+random() rand(n) randint(n) randrange(a,b)
+E, PI, PHI
+
+And some utility functions which might help:
+
+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)
+choice(array)
+deg(radians), rad(degrees)
+
+
+HOW DRAWING WORKS IN THE ASCII TOOL
+===================================
+
+When you click and drag to draw a line, your mouse produces a series of points which
+describe the line you tried to draw. But these points do not necessarily make a
+continuous line - more like a series of dots, which it then draw lines between to make
+a "line" or "brush stroke".
+
+A line between two points is made by stamping the brush at regular intervals between the
+points which, with these brushes, ends up filling the space in between so it looks like
+you drew a continuous line.
+
+This is why when you draw a line with a big brush, it smears the outer edges.. The stamps
+happen right next to each other, so you wind up seeing mostly brush edges.
+
+You can visualize this effect with the following shader:
+
+lex.bg = mouse.x + mouse.y
+
+Drawing strokes quickly, or slowly.
+Make sure to make it animate to brush.
+Results could look like this:
+
+http://i.asdf.us/im/f9/1458658781640-ascii-bamboo.png
+
+
+SAMPLE SHADERS
+==============
+
+You can see a list of example shaders here:
+
+http://asdf.us/ascii/doc/shaderz.txt
+
+If you make a cool shader and want to see it on the list, please get in touch!
+You can find me on irc.jollo.org:9999 (ssl) in #sally, making color codes with my friends.
+
+Thanks and have fun!
+
+~ Bamboo, 22 Marzo 2016
+
+