mirror of
https://github.com/lalbornoz/roar.git
synced 2024-12-22 20:36:37 +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; }
|
||||
#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;}
|
||||
#shader_rapper { display: none; }
|
||||
#import_rapper { display: none; }
|
||||
#canvas_rapper {
|
||||
white-space: pre;
|
||||
@ -194,7 +193,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
|
||||
100% { color: hsl(360,100%,50%) }
|
||||
}
|
||||
|
||||
.panke #shader_el,
|
||||
.panke #load_el,
|
||||
.panke #import_textarea,
|
||||
.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="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>, 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()
|
||||
}
|
||||
function build () {
|
||||
shader.init()
|
||||
// shader.run(canvas)
|
||||
shader.animate()
|
||||
|
||||
canvas.append(canvas_rapper)
|
||||
brush.append(brush_rapper)
|
||||
palette.append(palette_rapper)
|
||||
@ -30,7 +26,6 @@ function build () {
|
||||
letters.repaint("Basic Latin")
|
||||
|
||||
controls.circle.focus()
|
||||
// controls.shader.focus()
|
||||
|
||||
brush.bg = colors.red
|
||||
brush.generate()
|
||||
@ -50,13 +45,10 @@ function bind () {
|
||||
|
||||
window.addEventListener('mouseup', function(e){
|
||||
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
|
||||
|
||||
if (ae !== shader_textarea && ae !== import_textarea) {
|
||||
if (ae !== import_textarea) {
|
||||
if (is_desktop) cursor_input.focus()
|
||||
}
|
||||
|
||||
@ -75,9 +67,9 @@ function bind () {
|
||||
})
|
||||
|
||||
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(){
|
||||
if (is_desktop) { cursor_input.focus() }
|
||||
document.body.classList.remove('loading')
|
||||
|
||||
@ -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]
|
||||
lex = canvas.aa[y][x]
|
||||
if (! dragging) return
|
||||
shader_el.innerHTML = point.join(",")
|
||||
if (drawing) {
|
||||
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.memorable = true
|
||||
controls.experimental_palette.use = function(state){
|
||||
|
||||
@ -98,10 +98,6 @@ var keys = (function(){
|
||||
e.preventDefault()
|
||||
}
|
||||
*/
|
||||
if (current_tool.name == "shader") {
|
||||
cursor_input.value = ""
|
||||
return
|
||||
}
|
||||
var char = cursor_input.value
|
||||
cursor_input.value = ""
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ var Tool = Model({
|
||||
current_tool = this
|
||||
this.el.classList.add('focused')
|
||||
this.use()
|
||||
if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
|
||||
if (is_desktop) { cursor_input.focus() }
|
||||
},
|
||||
blur: function(){
|
||||
current_tool = null
|
||||
@ -45,7 +45,7 @@ var FileTool = Tool.extend({
|
||||
current_filetool = this
|
||||
this.el.classList.add('focused')
|
||||
this.use()
|
||||
if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
|
||||
if (is_desktop) { cursor_input.focus() }
|
||||
},
|
||||
blur: function(){
|
||||
current_filetool = null
|
||||
|
||||
@ -6,5 +6,5 @@
|
||||
6) feature: {line,measuring} tool
|
||||
7) feature: status bar w/ position, etc.
|
||||
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}
|
||||
|
||||
15
index.html
15
index.html
@ -63,7 +63,6 @@
|
||||
<span id="save_el" class="tool">save</span>
|
||||
<span id="load_el" class="tool">load</span>
|
||||
<br>
|
||||
<span id="shader_el" class="tool">shader</span>
|
||||
<a id="doc_el" href="assets/doc/index.html" target="_blank">doc</a>
|
||||
<br>
|
||||
<span id="advanced_checkbox" class="tool">_ advanced</span>
|
||||
@ -82,26 +81,12 @@
|
||||
<div id="cutoff_warning_el">character limit of 425 exceeded</div>
|
||||
<textarea id="import_textarea"></textarea>
|
||||
</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>
|
||||
|
||||
<input type="text" id="cursor_input">
|
||||
|
||||
</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/util.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user