mirror of
https://github.com/lalbornoz/roar.git
synced 2024-11-16 12:36:38 +00:00
assets/*, index.html: removes shader feature due to lack of interest on #MiRCart & maintenance cost.
This commit is contained in:
Lucio Andrés Illanes Albornoz
parent
8bb9982b3b
commit
9bacadcb70
@ -105,7 +105,6 @@ body.loading { opacity: 0; }
|
|||||||
body { transition: 0.1s linear; }
|
body { transition: 0.1s linear; }
|
||||||
#import_textarea { font-size: 9pt; }
|
#import_textarea { font-size: 9pt; }
|
||||||
textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
|
textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
|
||||||
#shader_rapper { display: none; }
|
|
||||||
#import_rapper { display: none; }
|
#import_rapper { display: none; }
|
||||||
#canvas_rapper {
|
#canvas_rapper {
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
@ -194,7 +193,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
|
|||||||
100% { color: hsl(360,100%,50%) }
|
100% { color: hsl(360,100%,50%) }
|
||||||
}
|
}
|
||||||
|
|
||||||
.panke #shader_el,
|
|
||||||
.panke #load_el,
|
.panke #load_el,
|
||||||
.panke #import_textarea,
|
.panke #import_textarea,
|
||||||
.panke #doc_el,
|
.panke #doc_el,
|
||||||
|
|||||||
@ -23,13 +23,6 @@ features of the asdf.us color code tool:
|
|||||||
* <a href="tips.txt">tips.txt</a> - Tips on using the keyboard
|
* <a href="tips.txt">tips.txt</a> - Tips on using the keyboard
|
||||||
* <a href="irssi.txt">irssi.txt</a> - Instructions on using IRSSI to make color codes.
|
* <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
|
For more information on IRC, Color Codes, and much more, visit the
|
||||||
<a href="http://jollo.org/LNT/doc/">documentation sitemap</a>, part of the <a href="http://jollo.org/">Jollo IRC Network</a>.
|
<a href="http://jollo.org/LNT/doc/">documentation sitemap</a>, part of the <a href="http://jollo.org/">Jollo IRC Network</a>.
|
||||||
|
|
||||||
|
|||||||
@ -1,126 +0,0 @@
|
|||||||
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
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,237 +0,0 @@
|
|||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
>> nice purple/orange texture
|
|
||||||
|
|
||||||
lex.bg=colors.purple
|
|
||||||
lex.fg=colors.orange
|
|
||||||
x/=3
|
|
||||||
x=floor(x+y/2.1) // <- this is cool number to change
|
|
||||||
if (x+10*sin(x)+10*cos(y/(t%100)) < y/3) {
|
|
||||||
lex.char="abcdefghijklmnopqrstuvwxyz"[x%26]
|
|
||||||
} else {
|
|
||||||
lex.char="abcdefghijklmnopqrstuvwxyz".toUpperCase()[x%26]
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
>> copy color from canvas at x/y
|
|
||||||
|
|
||||||
lex.assign( canvas.get(x,y) )
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
>> animate canvas up and to the left..
|
|
||||||
|
|
||||||
lex.assign( canvas.get(x+1,y+1) )
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,156 +0,0 @@
|
|||||||
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)
|
|
||||||
|
|
||||||
|
|
||||||
BEYOND BASIC COLORS
|
|
||||||
===================
|
|
||||||
|
|
||||||
Other weird effects are possible if you combine these color functions.
|
|
||||||
|
|
||||||
For instance, if you do hue(x+y) you'll get a rainbow. But remember, this is just
|
|
||||||
outputting a number between 0 and 15. So you can do hue(x+y) + 1 and get a different
|
|
||||||
cycle which does not really have anything to do with the rainbow, but looks cool.
|
|
||||||
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
|
|
||||||
@ -19,10 +19,6 @@ function init () {
|
|||||||
bind()
|
bind()
|
||||||
}
|
}
|
||||||
function build () {
|
function build () {
|
||||||
shader.init()
|
|
||||||
// shader.run(canvas)
|
|
||||||
shader.animate()
|
|
||||||
|
|
||||||
canvas.append(canvas_rapper)
|
canvas.append(canvas_rapper)
|
||||||
brush.append(brush_rapper)
|
brush.append(brush_rapper)
|
||||||
palette.append(palette_rapper)
|
palette.append(palette_rapper)
|
||||||
@ -30,7 +26,6 @@ function build () {
|
|||||||
letters.repaint("Basic Latin")
|
letters.repaint("Basic Latin")
|
||||||
|
|
||||||
controls.circle.focus()
|
controls.circle.focus()
|
||||||
// controls.shader.focus()
|
|
||||||
|
|
||||||
brush.bg = colors.red
|
brush.bg = colors.red
|
||||||
brush.generate()
|
brush.generate()
|
||||||
@ -50,13 +45,10 @@ function bind () {
|
|||||||
|
|
||||||
window.addEventListener('mouseup', function(e){
|
window.addEventListener('mouseup', function(e){
|
||||||
dragging = erasing = false
|
dragging = erasing = false
|
||||||
// if (current_filetool.name != 'shader' && current_filetool.name != 'load' && current_filetool.name != 'save' && is_desktop) {
|
|
||||||
// cursor_input.focus()
|
|
||||||
// }
|
|
||||||
|
|
||||||
var ae = document.activeElement
|
var ae = document.activeElement
|
||||||
|
|
||||||
if (ae !== shader_textarea && ae !== import_textarea) {
|
if (ae !== import_textarea) {
|
||||||
if (is_desktop) cursor_input.focus()
|
if (is_desktop) cursor_input.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -75,7 +67,7 @@ function bind () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
window.addEventListener('mousedown', function(e){
|
window.addEventListener('mousedown', function(e){
|
||||||
// if (current_filetool.name != 'shader' && is_desktop) { cursor_input.focus() }
|
// if (is_desktop) { cursor_input.focus() }
|
||||||
})
|
})
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function(){
|
document.addEventListener('DOMContentLoaded', function(){
|
||||||
|
|||||||
@ -326,62 +326,3 @@ var draw = (function(){
|
|||||||
|
|
||||||
})()
|
})()
|
||||||
|
|
||||||
var shader = (function(){
|
|
||||||
var fn_str, fn, lex
|
|
||||||
var exports = {}
|
|
||||||
var animating = false
|
|
||||||
|
|
||||||
exports.init = function(){
|
|
||||||
lex = new Lex (0, 0)
|
|
||||||
exports.build(demo_shader.innerHTML)
|
|
||||||
}
|
|
||||||
exports.build = function (fn_str){
|
|
||||||
try {
|
|
||||||
new_fn = new Function('lex', 'x', 'y', 'w', 'h', 't', fn_str)
|
|
||||||
new_fn(lex, 0, 0, 1, 1, 0)
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
throw 'Shader execution error'
|
|
||||||
}
|
|
||||||
exports.fn = fn = new_fn
|
|
||||||
return fn
|
|
||||||
}
|
|
||||||
exports.run = function(canvas){
|
|
||||||
var t = +new Date
|
|
||||||
shader.canvas = shader.canvas || canvas
|
|
||||||
var w = shader.canvas.w, h = shader.canvas.h
|
|
||||||
shader.canvas.forEach(function(lex, x, y){
|
|
||||||
fn(lex, x, y, w, h, t)
|
|
||||||
lex.build()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
exports.toggle = function(state){
|
|
||||||
animating = typeof state == "boolean" ? state : ! animating
|
|
||||||
shader_fps_el.classList.toggle('hidden')
|
|
||||||
return animating
|
|
||||||
}
|
|
||||||
exports.pause = function(){
|
|
||||||
animating = false
|
|
||||||
shader_fps_el.classList.add('hidden')
|
|
||||||
shader.fps_time = 0
|
|
||||||
}
|
|
||||||
exports.play = function(){
|
|
||||||
animating = true
|
|
||||||
shader_fps_el.classList.remove('hidden')
|
|
||||||
}
|
|
||||||
exports.animate = function (t){
|
|
||||||
requestAnimationFrame(exports.animate)
|
|
||||||
if (! animating) { return }
|
|
||||||
if (shader.fps_time){
|
|
||||||
var ms = Date.now() - shader.fps_time
|
|
||||||
fps = 1000 / ms
|
|
||||||
shader_fps_el.innerHTML = (fps | 0) + ' fps'
|
|
||||||
}
|
|
||||||
shader.fps_time = Date.now()
|
|
||||||
exports.run(canvas)
|
|
||||||
}
|
|
||||||
|
|
||||||
return exports
|
|
||||||
|
|
||||||
})()
|
|
||||||
|
|
||||||
|
|||||||
@ -104,7 +104,6 @@ var canvas = current_canvas = (function(){
|
|||||||
point = [x,y]
|
point = [x,y]
|
||||||
lex = canvas.aa[y][x]
|
lex = canvas.aa[y][x]
|
||||||
if (! dragging) return
|
if (! dragging) return
|
||||||
shader_el.innerHTML = point.join(",")
|
|
||||||
if (drawing) {
|
if (drawing) {
|
||||||
draw.move(e, lex, point)
|
draw.move(e, lex, point)
|
||||||
}
|
}
|
||||||
|
|||||||
35
assets/js/ui/controls.js
vendored
35
assets/js/ui/controls.js
vendored
@ -155,41 +155,6 @@ var controls = (function(){
|
|||||||
}
|
}
|
||||||
//
|
//
|
||||||
|
|
||||||
var ShaderTool = FileTool.extend({
|
|
||||||
active: false,
|
|
||||||
use: function(state){
|
|
||||||
this.active = typeof state == "boolean" ? state : ! this.active
|
|
||||||
if (this.active) {
|
|
||||||
shader_rapper.style.display = "block"
|
|
||||||
shader_textarea.focus()
|
|
||||||
} else {
|
|
||||||
shader_rapper.style.display = "none"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
done: function(){
|
|
||||||
this.use(false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
controls.shader = new ShaderTool (shader_el)
|
|
||||||
shader_textarea.value = shader_textarea.value || demo_shader.innerHTML
|
|
||||||
shader_textarea.addEventListener("input", function(){
|
|
||||||
var fn = shader.build(shader_textarea.value)
|
|
||||||
fn && shader.run(canvas)
|
|
||||||
})
|
|
||||||
controls.animate = new BlurredCheckbox (animate_checkbox)
|
|
||||||
controls.animate.use = function(state){
|
|
||||||
var state = shader.toggle()
|
|
||||||
this.update(state)
|
|
||||||
// controls.shader.focus()
|
|
||||||
controls.shader.use(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
controls.shader_target = new RadioGroup(shader_target_el)
|
|
||||||
var cs = controls.shader_target.controls
|
|
||||||
cs.canvas.use = function(){ shader.canvas = canvas }
|
|
||||||
cs.brush.use = function(){ shader.canvas = brush }
|
|
||||||
cs.selection.use = function(){ shader.canvas = selection.canvas }
|
|
||||||
|
|
||||||
controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
|
controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
|
||||||
controls.experimental_palette.memorable = true
|
controls.experimental_palette.memorable = true
|
||||||
controls.experimental_palette.use = function(state){
|
controls.experimental_palette.use = function(state){
|
||||||
|
|||||||
@ -98,10 +98,6 @@ var keys = (function(){
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
if (current_tool.name == "shader") {
|
|
||||||
cursor_input.value = ""
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var char = cursor_input.value
|
var char = cursor_input.value
|
||||||
cursor_input.value = ""
|
cursor_input.value = ""
|
||||||
|
|
||||||
|
|||||||
@ -26,7 +26,7 @@ var Tool = Model({
|
|||||||
current_tool = this
|
current_tool = this
|
||||||
this.el.classList.add('focused')
|
this.el.classList.add('focused')
|
||||||
this.use()
|
this.use()
|
||||||
if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
|
if (is_desktop) { cursor_input.focus() }
|
||||||
},
|
},
|
||||||
blur: function(){
|
blur: function(){
|
||||||
current_tool = null
|
current_tool = null
|
||||||
@ -45,7 +45,7 @@ var FileTool = Tool.extend({
|
|||||||
current_filetool = this
|
current_filetool = this
|
||||||
this.el.classList.add('focused')
|
this.el.classList.add('focused')
|
||||||
this.use()
|
this.use()
|
||||||
if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
|
if (is_desktop) { cursor_input.focus() }
|
||||||
},
|
},
|
||||||
blur: function(){
|
blur: function(){
|
||||||
current_filetool = null
|
current_filetool = null
|
||||||
|
|||||||
@ -6,5 +6,5 @@
|
|||||||
6) feature: {line,measuring} tool
|
6) feature: {line,measuring} tool
|
||||||
7) feature: status bar w/ position, etc.
|
7) feature: status bar w/ position, etc.
|
||||||
8) feature: zoom {in,out}
|
8) feature: zoom {in,out}
|
||||||
9) reimplement: {save,upload} as PNG & gallery
|
9) reimplement: {save,upload} as PNG & gallery, shaders (possibly)
|
||||||
10) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK, set is_{iphone,ipad,android,mobile,desktop}
|
10) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK, set is_{iphone,ipad,android,mobile,desktop}
|
||||||
|
|||||||
15
index.html
15
index.html
@ -63,7 +63,6 @@
|
|||||||
<span id="save_el" class="tool">save</span>
|
<span id="save_el" class="tool">save</span>
|
||||||
<span id="load_el" class="tool">load</span>
|
<span id="load_el" class="tool">load</span>
|
||||||
<br>
|
<br>
|
||||||
<span id="shader_el" class="tool">shader</span>
|
|
||||||
<a id="doc_el" href="assets/doc/index.html" target="_blank">doc</a>
|
<a id="doc_el" href="assets/doc/index.html" target="_blank">doc</a>
|
||||||
<br>
|
<br>
|
||||||
<span id="advanced_checkbox" class="tool">_ advanced</span>
|
<span id="advanced_checkbox" class="tool">_ advanced</span>
|
||||||
@ -82,26 +81,12 @@
|
|||||||
<div id="cutoff_warning_el">character limit of 425 exceeded</div>
|
<div id="cutoff_warning_el">character limit of 425 exceeded</div>
|
||||||
<textarea id="import_textarea"></textarea>
|
<textarea id="import_textarea"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="shader_rapper">
|
|
||||||
<span id="animate_checkbox" class="tool">_ animate</span>
|
|
||||||
to <span id="shader_target_el">*canvas brush selection</span>
|
|
||||||
<span id="shader_fps_el" class="hidden faded"></span><br>
|
|
||||||
<textarea id="shader_textarea"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="text" id="cursor_input">
|
<input type="text" id="cursor_input">
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
<script type="text/javascript-shader" id="demo_shader">
|
|
||||||
// lex.bg = hue((x+y*y+t/10)/20)
|
|
||||||
// lex.fg = colors.white
|
|
||||||
// lex.char = " "
|
|
||||||
// lex.opacity = 1
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<script src="assets/js/ext/oktween.js"></script>
|
<script src="assets/js/ext/oktween.js"></script>
|
||||||
|
|
||||||
<script src="assets/js/ext/util.js"></script>
|
<script src="assets/js/ext/util.js"></script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user