asciiblaster

- draw irc art in your web browser
git clone git://git.acid.vegas/asciiblaster.git
shadetut.txt (4637B)
      1 ASCII SHADER TUTORIAL
      2 =====================
      3 
      4 In the asdf.us/ascii shaders, you write a little math function that executes on every
      5 pixel on the selected area.  The shaders can affect either the brush, the selected region,
      6 or the whole canvas.
      7 
      8 Shaders can also be animated, so they update live.  With a shader applied to the brush,
      9 the brush changes continuously as you draw.
     10 
     11 
     12 THE LEX OBJECT
     13 ==============
     14 
     15 Essentially you are writing a Javascript function that modifies this "lex" object, which
     16 has four properties
     17 
     18 1) lex.bg = this is the background color
     19 2) lex.fg = this is the foreground color (text color)
     20 3) lex.char = this is the letter that you see in the space
     21 4) lex.opacity = this is whether the pixel actually draws or not
     22       - so like a circular brush is opacity 1 in the middle and opacity 0 on the corners
     23 
     24 
     25 THE COLOR CODE NUMBERS
     26 ======================
     27 
     28 With lex.bg and lex.fg, the goal is to have a number between 0 and 15, corresponding to
     29 the color code values from mIRC.
     30 
     31 If you shift-click on the color palette, you can cycle it around to the one which shows
     32 the actual order of the mIRC colors.
     33 
     34 The mIRC colors are the ones that go white, black, dark blue, green, red, dark red ...
     35 and these correspond to the numbers 0, 1, 2, 3, 4 ...
     36 
     37 
     38 COLOR CYCLING
     39 =============
     40 
     41 Additionally there are some color functions that might help -
     42 These functions make it easier to cycle through colors in a way that makes sense logically
     43 (since the mIRC colors are in a weird order)
     44 
     45 - hue(...) = this creates a cycle of colors in terms of their hue or color name,
     46              so you get a rainbow that goes from dark red through yellow, green, blue,
     47              purple, and back
     48 - gray(...) = cycles through grayscale
     49 - red(...) yellow(...) green(...) blue(...) purple(...) = use smaller palettes
     50 - inv_hue(...) fire(...) dark_gray(...) = these are oddities i made for fun
     51 
     52 
     53 VARIABLES
     54 =========
     55 
     56 Variables you have at your disposal are similar to the asdf.us/shader tool -
     57 
     58 - x, y = the coordinates of the pixel
     59 - mouse.x, mouse.y = the coordinate of the mouse as it hovers over the canvas
     60 - t = the current time, in milliseconds
     61 
     62 TIP: The time will increase very quickly - it's good to add t /= 1000 at the top of
     63 your shader so it goes slowly (and won't cause a seizure).
     64 
     65 
     66 FUNCTIONS
     67 =========
     68 
     69 Remember, this is Javascript.  You have the basic operators:
     70 
     71 + - / *
     72 
     73 And the bitwise operators:
     74 
     75 & | ^ ~
     76 
     77 You can do if statements with the standard comparison operators:
     78 
     79 < > == <= >=
     80 
     81 You also have access to all the functions on the Math object:
     82 
     83 floor, ceil, round
     84 abs, sign, mod(n,m), xor
     85 pow, exp, sqrt
     86 cos, sin, tan
     87 acos, asin, atan, atan2
     88 random() rand(n) randint(n) randrange(a,b)
     89 E, PI, PHI
     90 
     91 And some utility functions which might help:
     92 
     93 clamp(n,min,max)
     94 mix(n,a,b) (lerp)
     95 step(a,b)
     96 smoothstep(min,max,n)
     97 avg(m,n,a)
     98 cosp, sinp (mapped to [0,1])
     99 pixel(x,y) == 4*(y*w+h)
    100 dist(x,y,a,b)
    101 angle(x,y,a,b)
    102 choice(array)
    103 deg(radians), rad(degrees)
    104 
    105 
    106 BEYOND BASIC COLORS
    107 ===================
    108 
    109 Other weird effects are possible if you combine these color functions.
    110 
    111 For instance, if you do hue(x+y) you'll get a rainbow.  But remember, this is just
    112 outputting a number between 0 and 15.  So you can do hue(x+y) + 1 and get a different
    113 cycle which does not really have anything to do with the rainbow, but looks cool.
    114 
    115 
    116 HOW DRAWING WORKS IN THE ASCII TOOL
    117 ===================================
    118 
    119 When you click and drag to draw a line, your mouse produces a series of points which
    120 describe the line you tried to draw.  But these points do not necessarily make a
    121 continuous line - more like a series of dots, which it then draw lines between to make
    122 a "line" or "brush stroke".
    123 
    124 A line between two points is made by stamping the brush at regular intervals between the
    125 points which, with these brushes, ends up filling the space in between so it looks like
    126 you drew a continuous line.
    127 
    128 This is why when you draw a line with a big brush, it smears the outer edges.. The stamps
    129 happen right next to each other, so you wind up seeing mostly brush edges.
    130 
    131 You can visualize this effect with the following shader:
    132 
    133 lex.bg = mouse.x + mouse.y
    134 
    135 Drawing strokes quickly, or slowly.
    136 Make sure to make it animate to brush.
    137 Results could look like this:
    138 
    139 http://i.asdf.us/im/f9/1458658781640-ascii-bamboo.png
    140 
    141 
    142 SAMPLE SHADERS
    143 ==============
    144 
    145 You can see a list of example shaders here:
    146 
    147 http://asdf.us/ascii/doc/shaderz.txt
    148 
    149 If you make a cool shader and want to see it on the list, please get in touch!
    150 You can find me on irc.jollo.org:9999 (ssl) in #sally, making color codes with my friends.
    151 
    152 Thanks and have fun!
    153 
    154 ~ Bamboo, 22 Marzo 2016
    155 
    156