mirror of https://github.com/lalbornoz/roar.git
asciiblaster-cordoba/platforms/android/app/src/main/assets/www/assets/: WHO HATES APACHE _CÓRDOBA_?!?!?!
asciiblaster-cordoba/platforms/android/app/src/main/assets/www/assets/: WE HATE APACHE _CÓRDOBA_!"!$"*$%"&(!£*
This commit is contained in:
Lucio Andrés Illanes Albornoz
parent
dc45d81361
commit
e1d338d6c3
|
|
@ -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;
|
||||
|
|
@ -132,11 +131,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
|
|||
#secret_rapper span { float: left; }
|
||||
.vertical #secret_rapper { margin-right: 10px; }
|
||||
.vertical #secret_rapper span { float: left; clear: both; }
|
||||
.nopaint #brush_rapper { min-height: 70px; min-width: 50px; }
|
||||
|
||||
#nopaint_rapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rotated #canvas_rapper {
|
||||
transform: translateX(-50%) translateY(-50%) translateZ(0) rotate(-90deg);
|
||||
|
|
@ -199,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,
|
||||
|
|
|
|||
|
|
@ -22,14 +22,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.
|
||||
* <a href="nopaint.txt">nopaint.txt</a> - A guide to "No Paint"
|
||||
|
||||
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,58 +0,0 @@
|
|||
|
||||
"" 88
|
||||
9,88m, ,8888, 9,88m, ,888, mm 9,88m, 8888
|
||||
88 88 86 98 88 88 ,mm88 88 88 88 88
|
||||
88 88 '8888' 88888' "nn89 88 88 88 "8m
|
||||
88 a brief tutorial :)
|
||||
|
||||
Last month or so I encountered Jeffrey Scudder's tool 'No Paint' -
|
||||
|
||||
https://www.nopaint.org/
|
||||
|
||||
- an automatic drawing tool with a minimal interface: you control it using
|
||||
just two buttons. The No Paint tool provided much entertainment on #sally,
|
||||
so during some downtime I added similar functionality to the asdf.us/ascii
|
||||
tool. Under the brush, you should see two buttons - to kick it off, click
|
||||
'paint' and it will begin drawing.
|
||||
|
||||
If you don't like what it's doing, click 'no' -
|
||||
- this will remove the current line and start drawing a new line.
|
||||
|
||||
If you like what it's doing, click 'paint' -
|
||||
- the line will be applied to the canvas, and it will start drawing anew.
|
||||
|
||||
While it's going, you can also click 'pause' and it will stop, so you can
|
||||
save it or draw on it yourself.
|
||||
|
||||
|
||||
Keyboard shortcuts -
|
||||
|
||||
left arrow - 'no'
|
||||
right arrow - 'paint'
|
||||
down arrow - 'pause'
|
||||
|
||||
|
||||
Right-click toggles -
|
||||
|
||||
If you RIGHT-CLICK on "Paint" it will switch tools automatically.
|
||||
|
||||
If you RIGHT-CLICK on "No" it will engage TURBO MODE.
|
||||
|
||||
|
||||
Some tools currently implemented -
|
||||
|
||||
- solid brush
|
||||
- erase brush
|
||||
- color-changing brush
|
||||
- hue brush
|
||||
- letter brush
|
||||
- clone tool
|
||||
- smear tool
|
||||
- fill tool
|
||||
- stars brush
|
||||
- canvas slide
|
||||
- canvas scale
|
||||
- canvas rotate
|
||||
- canvas colorcycle
|
||||
|
||||
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -1,896 +0,0 @@
|
|||
var nopaint = (function(){
|
||||
|
||||
controls.no = new Tool (nopaint_no_el)
|
||||
controls.no.use = function(state){
|
||||
undo.undo()
|
||||
controls.paint.focus()
|
||||
}
|
||||
controls.no.context = function(e){
|
||||
e.preventDefault()
|
||||
nopaint.turbo()
|
||||
}
|
||||
|
||||
controls.paint = new Tool (nopaint_paint_el)
|
||||
controls.paint.use = function(state){
|
||||
nopaint.paint()
|
||||
nopaint_pause_el.classList.toggle("hidden", false)
|
||||
focused = controls.paint.lex
|
||||
}
|
||||
controls.paint.context = function(e){
|
||||
e.preventDefault()
|
||||
nopaint.autoplay()
|
||||
}
|
||||
|
||||
controls.nopaint_pause = new Tool (nopaint_pause_el)
|
||||
controls.nopaint_pause.use = function(state){
|
||||
// nopaint.pause()
|
||||
nopaint.autoplay(false)
|
||||
nopaint_pause_el.classList.toggle("hidden", true)
|
||||
focused = canvas.aa[0][0]
|
||||
}
|
||||
|
||||
// use own stepwise clock to drive tweens
|
||||
oktween.raf = function(){}
|
||||
|
||||
var nopaint = {}
|
||||
nopaint.debug = true
|
||||
nopaint.delay = nopaint.normal_delay = 100
|
||||
nopaint.turbo_delay = 0
|
||||
nopaint.tool = null
|
||||
nopaint.tools = {}
|
||||
nopaint.keys = []
|
||||
nopaint.weights = []
|
||||
nopaint.step = 0
|
||||
nopaint.time = 0
|
||||
nopaint.timeout = false
|
||||
nopaint.toggle = function(state){
|
||||
var state = typeof state == "boolean" ? state : nopaint_rapper.classList.contains("hidden")
|
||||
nopaint_rapper.classList.toggle("hidden", ! state)
|
||||
nopaint_pause_el.classList.toggle("hidden", true)
|
||||
document.body.classList.toggle("nopaint", state)
|
||||
return state
|
||||
}
|
||||
nopaint.no = function(){
|
||||
undo.undo()
|
||||
nopaint.paint()
|
||||
}
|
||||
nopaint.raw_key = controls.paint.lex.raw_key = keys.left_right_key(function(n){
|
||||
if (! nopaint.timeout) return
|
||||
if (n < 0) nopaint.no()
|
||||
else if (n > 0) nopaint.paint()
|
||||
else nopaint.pause()
|
||||
})
|
||||
nopaint.pause = nopaint.blur = function(){
|
||||
clearTimeout(nopaint.timeout)
|
||||
nopaint.timeout = 0
|
||||
nopaint.step = 0
|
||||
}
|
||||
nopaint.paint = function(){
|
||||
var state = undo.new()
|
||||
delete state.focus
|
||||
nopaint.pause()
|
||||
nopaint.switch_tool()
|
||||
nopaint.go()
|
||||
}
|
||||
nopaint.go = function(){
|
||||
nopaint.timeout = setTimeout(nopaint.go, nopaint.delay)
|
||||
oktween.update(nopaint.time)
|
||||
nopaint.tool.paint( nopaint.step )
|
||||
nopaint.time += 1
|
||||
nopaint.step += 1
|
||||
}
|
||||
nopaint.switch_tool = function(){
|
||||
last_tool = nopaint.tool
|
||||
last_tool && last_tool.finish()
|
||||
nopaint.tool = nopaint.get_random_tool( last_tool )
|
||||
nopaint.tool.start( last_tool )
|
||||
nopaint.debug && console.log("> %s", nopaint.tool.type)
|
||||
}
|
||||
nopaint.add_tool = function(fn){
|
||||
nopaint.tools[fn.type] = fn
|
||||
}
|
||||
nopaint.disable_all_tools = function(){
|
||||
Object.keys(nopaint.tools).forEach(function(key){
|
||||
nopaint.tools[key].disabled = true
|
||||
})
|
||||
}
|
||||
nopaint.enable_tools = function(keys){
|
||||
keys.forEach(function(key){
|
||||
if (nopaint.tools[key]) nopaint.tools[key].disabled = false
|
||||
})
|
||||
}
|
||||
nopaint.get_random_tool = function( last_tool ){
|
||||
var n = rand( nopaint.sum )
|
||||
for (var i = 0, _len = nopaint.weights.length; i < _len; i++) {
|
||||
if (n < nopaint.weights[i] && (! last_tool || nopaint.keys[i] !== last_tool.key)) {
|
||||
return nopaint.tools[ nopaint.keys[i] ]
|
||||
}
|
||||
}
|
||||
return nopaint.tools[ choice(nopaint.keys) ]
|
||||
}
|
||||
nopaint.regenerate_weights = function(){
|
||||
nopaint.sum = 0
|
||||
nopaint.weights = []
|
||||
nopaint.keys = Object.keys( nopaint.tools ).sort(function(a,b){
|
||||
return nopaint.tools[b].opt.weight-nopaint.tools[a].opt.weight
|
||||
}).filter(function(key){
|
||||
return ! nopaint.tools[key].disabled
|
||||
})
|
||||
nopaint.keys.forEach(function(key){
|
||||
nopaint.sum += nopaint.tools[key].opt.weight
|
||||
nopaint.weights.push( nopaint.sum )
|
||||
})
|
||||
}
|
||||
|
||||
nopaint.is_turbo = false
|
||||
nopaint.turbo = function(state){
|
||||
nopaint.is_turbo = typeof state == "boolean" ? state : ! nopaint.is_turbo
|
||||
nopaint.delay = nopaint.is_turbo ? nopaint.turbo_delay : nopaint.normal_delay
|
||||
if (nopaint.is_turbo) {
|
||||
nopaint_no_el.classList.add("locked")
|
||||
}
|
||||
else {
|
||||
nopaint_no_el.classList.remove("locked")
|
||||
}
|
||||
}
|
||||
|
||||
nopaint.is_autoplay = false
|
||||
nopaint.autoplay = function(state){
|
||||
nopaint.is_autoplay = typeof state == "boolean" ? state : ! nopaint.is_autoplay
|
||||
if (nopaint.is_autoplay) {
|
||||
nopaint_paint_el.classList.add("locked")
|
||||
if (! nopaint.player) {
|
||||
nopaint.player = new RandomPlayer ()
|
||||
}
|
||||
if (! nopaint.timeout) nopaint.paint()
|
||||
nopaint.player.play()
|
||||
}
|
||||
else {
|
||||
nopaint_paint_el.classList.remove("locked")
|
||||
nopaint.pause()
|
||||
nopaint.player && nopaint.player.pause()
|
||||
}
|
||||
}
|
||||
|
||||
var NopaintPlayer = Model({
|
||||
type: "player",
|
||||
upload_png: false,
|
||||
upload_interval: 100,
|
||||
step: 0,
|
||||
timeout: null,
|
||||
delay: function(){
|
||||
return nopaint.is_turbo ? randrange(150, 300) : randrange(400, 800)
|
||||
},
|
||||
reset: function(){
|
||||
this.no_count = 0
|
||||
this.paint_count = 0
|
||||
},
|
||||
pause: function(){
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = 0
|
||||
},
|
||||
play: function(){
|
||||
clearTimeout(this.timeout)
|
||||
var delay = this.delay()
|
||||
this.timeout = setTimeout(this.play.bind(this), delay)
|
||||
this.check_fitness()
|
||||
this.step += 1
|
||||
},
|
||||
check_fitness: function(){
|
||||
switch (this.fitness()) {
|
||||
case "no":
|
||||
nopaint.no_count += 1
|
||||
nopaint.since_last_no = 0
|
||||
nopaint.since_last_paint += 1
|
||||
nopaint.no()
|
||||
break
|
||||
case "paint":
|
||||
nopaint.paint_count += 1
|
||||
nopaint.since_last_no += 1
|
||||
nopaint.since_last_paint = 0
|
||||
nopaint.paint()
|
||||
break
|
||||
case "screenshot":
|
||||
if (this.save_as_png) break
|
||||
console.log("uploading...")
|
||||
setTimeout(clipboard.upload_png, 0)
|
||||
// fall thru
|
||||
default:
|
||||
nopaint.since_last_no += 1
|
||||
nopaint.since_last_paint += 1
|
||||
break
|
||||
}
|
||||
},
|
||||
fitness: function(){},
|
||||
})
|
||||
|
||||
var RandomPlayer = NopaintPlayer.extend({
|
||||
type: "random_player",
|
||||
upload_png: false,
|
||||
fitness: function(){
|
||||
var no_prob = random()
|
||||
var paint_prob = 1 - no_prob
|
||||
if (paint_prob < 0.3) {
|
||||
return "paint"
|
||||
}
|
||||
else if (no_prob < 0.5) {
|
||||
return "no"
|
||||
}
|
||||
else if ( this.paint_count > 100 && (this.step % 100) == 99 ) {
|
||||
return "screenshot"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var StylePlayer = NopaintPlayer.extend({
|
||||
type: "style_player",
|
||||
upload_png: false,
|
||||
fitness: function(){
|
||||
var no_prob = random()
|
||||
var paint_prob = 1 - no_prob
|
||||
var np, pp
|
||||
var steps = this.since_last_paint
|
||||
|
||||
if (nopaint.tool.is_brush) {
|
||||
if (nopaint.tool.is_clone) {
|
||||
if (steps < randrange(3,8)) return
|
||||
np = 0.3
|
||||
pp = 0.4
|
||||
}
|
||||
else if (nopaint.tool.is_erase) {
|
||||
if (steps < randrange(2,6)) return
|
||||
np = 0.3
|
||||
pp = 0.4
|
||||
}
|
||||
else {
|
||||
if (steps < randrange(2,4)) return
|
||||
np = 0.1
|
||||
pp = 0.3
|
||||
}
|
||||
}
|
||||
if (nopaint.tool.is_shader) {
|
||||
switch (nopaint.tool.name) {
|
||||
case "rotate":
|
||||
case "scale":
|
||||
if (steps < randrange(2,4)) return
|
||||
np = 0.1
|
||||
pp = 0.2
|
||||
break
|
||||
default:
|
||||
np = 0.2
|
||||
pp = 0.2
|
||||
}
|
||||
}
|
||||
if (nopaint.tool.is_fill) {
|
||||
np = 0.4
|
||||
pp = 0.1
|
||||
}
|
||||
|
||||
if (steps > 10) {
|
||||
np *= 0.7
|
||||
pp *= 1.5
|
||||
|
||||
if (nopaint.is_turbo) {
|
||||
np *= 1.2
|
||||
pp *= 1.2
|
||||
}
|
||||
}
|
||||
|
||||
if (paint_prob < np) {
|
||||
return "paint"
|
||||
}
|
||||
else if (no_prob < np) {
|
||||
return "no"
|
||||
}
|
||||
else if ( this.paint_count > 100 && (this.step % 100) == 99 ) {
|
||||
return "screenshot"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/* Base models for brushes */
|
||||
|
||||
var NopaintTool = Model({
|
||||
type: "none",
|
||||
init: function(opt){
|
||||
this.opt = opt || {}
|
||||
},
|
||||
start: function(){},
|
||||
paint: function(t){},
|
||||
update: function(t){},
|
||||
finish: function(){},
|
||||
})
|
||||
|
||||
var NopaintBrush = NopaintTool.extend({
|
||||
type: "brush",
|
||||
is_brush: true,
|
||||
init: function(opt){
|
||||
this.opt = opt || {}
|
||||
this.opt.max_radius = this.opt.max_radius || 10
|
||||
this.p = {x: randint(canvas.w), y: randint(canvas.h)}
|
||||
this.fg = 0
|
||||
this.bg = 1
|
||||
this.char = " "
|
||||
this.tweens = []
|
||||
},
|
||||
|
||||
start: function(last_brush){
|
||||
this.set_brush_mask()
|
||||
this.toggle_channels()
|
||||
this.reset( last_brush )
|
||||
this.regenerate()
|
||||
draw.down({}, null, [this.p.x, this.p.y])
|
||||
},
|
||||
|
||||
paint: function(t){
|
||||
this.update(t)
|
||||
draw.move_toroidal({}, null, [this.p.x, this.p.y])
|
||||
},
|
||||
|
||||
finish: function(){
|
||||
this.tweens.forEach(function(t){ t.cancel() })
|
||||
this.tweens = []
|
||||
},
|
||||
|
||||
reorient: function(last_brush){
|
||||
var a = {}, b
|
||||
|
||||
if (last_brush) {
|
||||
this.p.x = a.x = randint(canvas.w)
|
||||
this.p.y = a.y = randint(canvas.h)
|
||||
}
|
||||
else {
|
||||
a.x = this.p.x
|
||||
a.y = this.p.y
|
||||
}
|
||||
|
||||
b = this.get_next_point()
|
||||
|
||||
var tween = oktween.add({
|
||||
obj: this.p,
|
||||
from: a,
|
||||
to: b,
|
||||
duration: b.duration,
|
||||
easing: b.easing,
|
||||
update: b.update,
|
||||
finished: function(){
|
||||
this.iterate()
|
||||
this.regenerate()
|
||||
}.bind(this)
|
||||
})
|
||||
this.tweens.push(tween)
|
||||
},
|
||||
|
||||
get_next_point: function(){
|
||||
var radius = randrange(2, this.opt.max_radius)
|
||||
var b = {}
|
||||
b.duration = randrange(1, 7)
|
||||
b.easing = choice(easings)
|
||||
b.x = this.p.x + randrange(-radius, radius)
|
||||
b.y = this.p.y + randrange(-radius, radius)
|
||||
return b
|
||||
},
|
||||
|
||||
set_brush_mask: function(){
|
||||
var r = Math.random()
|
||||
if (r < 0.2) {
|
||||
brush.mask = blit.square
|
||||
}
|
||||
else if (r < 0.6) {
|
||||
brush.mask = blit.circle
|
||||
}
|
||||
else if (r < 0.9) {
|
||||
brush.mask = blit.cross
|
||||
}
|
||||
else{
|
||||
brush.mask = blit.inverted_cross
|
||||
}
|
||||
},
|
||||
|
||||
toggle_channels: function(){
|
||||
if (Math.random() < 0.001) { controls.bg.use(false) }
|
||||
else if (! brush.draw_bg && Math.random() < 0.25) { controls.bg.use(true) }
|
||||
|
||||
if (Math.random() < 0.1) { controls.fg.use(false) }
|
||||
else if (! brush.draw_fg && Math.random() < 0.5) { controls.fg.use(true) }
|
||||
|
||||
if (Math.random() < 0.02) { controls.char.use(false) }
|
||||
else if (! brush.draw_char && Math.random() < 0.2) { controls.char.use(true) }
|
||||
},
|
||||
|
||||
iterate: function( last_brush ){
|
||||
this.reorient( last_brush )
|
||||
},
|
||||
|
||||
regenerate: function(){
|
||||
brush.load( this )
|
||||
brush.generate()
|
||||
}
|
||||
})
|
||||
|
||||
var easings = "linear circ_out circ_in circ_in_out quad_in quad_out quad_in_out".split(" ")
|
||||
|
||||
/* Standard brushes */
|
||||
|
||||
var SolidBrush = NopaintBrush.extend({
|
||||
type: "solid",
|
||||
|
||||
recolor: function(){
|
||||
this.fg = this.bg = randint(16)
|
||||
this.char = " "
|
||||
},
|
||||
|
||||
resize: function(m,n){
|
||||
m = m || 3
|
||||
n = n || 0
|
||||
var bw = xrandrange(5, 0, m) + n
|
||||
brush.resize( round(bw * randrange(0.9, 1.8)) || 1, round(bw) || 1 )
|
||||
},
|
||||
|
||||
reset: function( last_brush ){
|
||||
this.opt.max_radius = randrange(5,20)
|
||||
this.resize()
|
||||
this.reorient( last_brush )
|
||||
this.recolor( last_brush )
|
||||
this.regenerate()
|
||||
},
|
||||
|
||||
iterate: function( last_brush ){
|
||||
this.resize()
|
||||
this.reorient( last_brush )
|
||||
},
|
||||
})
|
||||
|
||||
var EraseBrush = SolidBrush.extend({
|
||||
type: "erase",
|
||||
reset: function( last_brush ){
|
||||
this.opt.max_radius = randrange(8, 20)
|
||||
this.reorient( last_brush )
|
||||
this.bg = random() < 0.2 ? colors.white : colors.black
|
||||
this.char = " "
|
||||
brush.load( this )
|
||||
this.resize(3,2)
|
||||
},
|
||||
})
|
||||
|
||||
var ShadowBrush = NopaintBrush.extend({
|
||||
type: "shadow",
|
||||
pairs: [
|
||||
[ colors.yellow, colors.orange ],
|
||||
[ colors.orange, colors.darkred ],
|
||||
[ colors.red, colors.darkred ],
|
||||
[ colors.lime, colors.green ],
|
||||
[ colors.cyan, colors.teal ],
|
||||
[ colors.cyan, colors.blue ],
|
||||
[ colors.blue, colors.darkblue ],
|
||||
[ colors.magenta, colors.purple ],
|
||||
[ colors.lightgray, colors.darkgray ],
|
||||
[ colors.darkgray, colors.black ],
|
||||
[ colors.white, colors.lightgray ],
|
||||
[ colors.white, colors.black ],
|
||||
],
|
||||
shapes: [
|
||||
[[0],[1]],
|
||||
[[0,0],[1,1]],
|
||||
[[1,0,0],[1,1,1]],
|
||||
[[0,0,1],[1,1,1]],
|
||||
[[0,0,0],[1,1,1]],
|
||||
[[0,0,0,0],[1,1,1,1]],
|
||||
[[1,0,0,0],[null,1,1,1]],
|
||||
[[0,0,0,1],[1,1,1,null]],
|
||||
[[0,0],[1,0],[1,1]],
|
||||
[[0,0],[0,1],[1,1]],
|
||||
],
|
||||
reset: function( last_brush ){
|
||||
var pair = choice(this.pairs)
|
||||
var shape = choice(this.shapes)
|
||||
this.reorient( last_brush )
|
||||
brush.char = " "
|
||||
brush.resize(shape[0].length, shape.length)
|
||||
brush.generate()
|
||||
brush.rebuild()
|
||||
brush.forEach(function(lex,x,y){
|
||||
if (shape[y][x] == null) {
|
||||
lex.opacity = 0
|
||||
}
|
||||
else {
|
||||
lex.fg = lex.bg = pair[ shape[y][x] ]
|
||||
lex.opacity = 1
|
||||
}
|
||||
lex.build()
|
||||
})
|
||||
},
|
||||
regenerate: function(){},
|
||||
})
|
||||
|
||||
var RandomBrush = SolidBrush.extend({
|
||||
type: "random",
|
||||
iterate: function( last_brush ){
|
||||
this.reorient( last_brush )
|
||||
this.recolor( last_brush )
|
||||
},
|
||||
})
|
||||
|
||||
var HueBrush = SolidBrush.extend({
|
||||
type: "hue",
|
||||
recolor: function(){
|
||||
this.fg = this.bg = rand_hue()
|
||||
this.char = " "
|
||||
},
|
||||
})
|
||||
|
||||
var GrayBrush = SolidBrush.extend({
|
||||
type: "gray",
|
||||
recolor: function(){
|
||||
this.fg = this.bg = rand_gray()
|
||||
this.char = " "
|
||||
},
|
||||
})
|
||||
|
||||
var LetterBrush = SolidBrush.extend({
|
||||
type: "letter",
|
||||
recolor: function(){
|
||||
this.fg = rand_hue()
|
||||
this.bg = rand_hue()
|
||||
this.char = choice( unicode.block(letters.charset, 32) )
|
||||
},
|
||||
})
|
||||
|
||||
var RandomLetterBrush = LetterBrush.extend({
|
||||
type: "random-letter",
|
||||
iterate: function(){
|
||||
if (Math.random() < 0.01) {
|
||||
this.fg += 1
|
||||
}
|
||||
if (Math.random() < 0.05) {
|
||||
var n = this.fg
|
||||
this.fg = this.bg
|
||||
this.bg = n
|
||||
}
|
||||
if (Math.random() < 0.7) {
|
||||
this.char = choice( unicode.block(letters.charset, 32) )
|
||||
}
|
||||
this.regenerate()
|
||||
this.__iterate()
|
||||
},
|
||||
update: function(){
|
||||
if (Math.random() < 0.3) {
|
||||
this.char = choice( unicode.block(letters.charset, 32) )
|
||||
}
|
||||
this.regenerate()
|
||||
},
|
||||
})
|
||||
|
||||
var CloneBrush = SolidBrush.extend({
|
||||
type: "clone",
|
||||
|
||||
is_clone: true,
|
||||
|
||||
reset: function( last_brush ){
|
||||
this.opt.max_radius = randrange(5, 20)
|
||||
this.reorient( last_brush )
|
||||
this.resize(4,2)
|
||||
this.clone_random_region()
|
||||
},
|
||||
|
||||
clone_random_region: function(x, y){
|
||||
var x = randrange(0, canvas.w - brush.w)
|
||||
var y = randrange(0, canvas.h - brush.h)
|
||||
this.clone_region(x, y)
|
||||
},
|
||||
|
||||
clone_region: function(x, y){
|
||||
blit.copy_toroidal_from(canvas, brush, round(x-brush.w/2), round(y-brush.h/2))
|
||||
brush.mask(brush)
|
||||
},
|
||||
|
||||
iterate: function( last_brush ){
|
||||
this.reorient( last_brush )
|
||||
},
|
||||
|
||||
regenerate: function(){},
|
||||
})
|
||||
|
||||
var SmearBrush = CloneBrush.extend({
|
||||
type: "smear",
|
||||
|
||||
update: function(){
|
||||
var r = random()
|
||||
var jitter_x = randnullsign() * xrand(2, 2)
|
||||
var jitter_y = randnullsign() * xrand(2, 2)
|
||||
this.clone_region( this.p.x + jitter_x, this.p.y + jitter_y )
|
||||
},
|
||||
|
||||
iterate: function( last_brush ){
|
||||
this.resize(4, 2)
|
||||
this.update()
|
||||
this.reorient( last_brush )
|
||||
}
|
||||
})
|
||||
|
||||
var StarsTool = NopaintBrush.extend({
|
||||
type: "stars",
|
||||
chars: "....,,'''*",
|
||||
|
||||
start: function(last_brush){
|
||||
this.reorient( last_brush )
|
||||
},
|
||||
|
||||
paint: function(t){
|
||||
if (Math.random() < 0.5) {
|
||||
var lex = canvas.get(this.p.x, this.p.y)
|
||||
undo.save_lex(lex.x, lex.y, lex)
|
||||
lex.fg = rand_hue()
|
||||
// lex.bg = colors.black
|
||||
lex.char = choice(this.chars)
|
||||
lex.build()
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
/* Fill tool */
|
||||
|
||||
var FillTool = NopaintTool.extend({
|
||||
type: "fill",
|
||||
rate: 25,
|
||||
is_fill: true,
|
||||
start: function(){
|
||||
this.fill()
|
||||
},
|
||||
paint: function(t){
|
||||
if ((t % this.rate) == this.rate-1) {
|
||||
this.fill()
|
||||
}
|
||||
},
|
||||
recolor: function(){
|
||||
this.fg = this.bg = randint(16)
|
||||
this.char = " "
|
||||
this.opacity = 1
|
||||
},
|
||||
fill: function(){
|
||||
var x = randint(canvas.w)
|
||||
var y = randint(canvas.h)
|
||||
this.recolor()
|
||||
draw.fill(this, x, y)
|
||||
}
|
||||
})
|
||||
|
||||
var FillLetterTool = FillTool.extend({
|
||||
type: "fill-letter",
|
||||
rate: 25,
|
||||
recolor: function(){
|
||||
this.fg = randint(16)
|
||||
this.bg = randint(16)
|
||||
this.char = choice( unicode.block(letters.charset, 32) )
|
||||
this.opacity = 1
|
||||
},
|
||||
})
|
||||
|
||||
/* Shader Tools */
|
||||
|
||||
var ShaderTool = NopaintTool.extend({
|
||||
type: "shader",
|
||||
speed: 3,
|
||||
is_shader: true,
|
||||
is_recursive: false,
|
||||
start: function(){
|
||||
undo.save_rect(0, 0, canvas.w, canvas.h)
|
||||
this.canvas = canvas.clone()
|
||||
},
|
||||
paint: function(t){
|
||||
if ((t % this.speed) == 0) {
|
||||
var w = canvas.w
|
||||
var h = canvas.h
|
||||
var lex
|
||||
if (this.is_recursive) {
|
||||
this.canvas.assign(canvas)
|
||||
}
|
||||
this.before_shade()
|
||||
for (var x = 0; x < w; x++) {
|
||||
for (var y = 0; y < h; y++) {
|
||||
lex = canvas.get(x, y)
|
||||
if (! this.shade( this.canvas, canvas, lex, x, y, w, h )) {
|
||||
lex.build()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
before_shade: function(){},
|
||||
shade: function(src, dest, lex, x, y, w, h){},
|
||||
finish: function(){
|
||||
this.canvas.demolish()
|
||||
}
|
||||
})
|
||||
|
||||
var ColorizeTool = ShaderTool.extend({
|
||||
type: "colorize",
|
||||
fns: [mirc_color_reverse,hue,inv_hue,gray,fire,red,yellow,green,blue,purple,dark_gray],
|
||||
speed: 5,
|
||||
start: function(){
|
||||
this.__start()
|
||||
this.i = randint(this.fns.length)
|
||||
},
|
||||
before_shade: function(){
|
||||
this.i = (this.i + 1) % this.fns.length
|
||||
this.fn = this.fns[this.i]
|
||||
},
|
||||
shade: function(src, dest, lex, x, y, w, h){
|
||||
lex.bg = this.fn( lex.bg )
|
||||
return false
|
||||
},
|
||||
})
|
||||
|
||||
var TranslateTool = ShaderTool.extend({
|
||||
type: "translate",
|
||||
dx: 0,
|
||||
dy: 0,
|
||||
speed: 3,
|
||||
start: function(){
|
||||
this.__start()
|
||||
this.dx = randint(3)-1
|
||||
this.dy = randint(3)-1
|
||||
this.x = this.y = 0
|
||||
if (! this.dx && ! this.dy) {
|
||||
this.dx = 1
|
||||
this.dy = 0
|
||||
}
|
||||
},
|
||||
before_shade: function(){
|
||||
this.x += this.dx
|
||||
this.y += this.dy
|
||||
},
|
||||
shade: function(src, dest, lex, x, y, w, h){
|
||||
var copy = src.get(x+this.x, y+this.y)
|
||||
lex.assign(copy)
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
var SliceTool = ShaderTool.extend({
|
||||
type: "slice",
|
||||
dx: 0,
|
||||
dy: 0,
|
||||
speed: 1,
|
||||
is_recursive: true,
|
||||
start: function(){
|
||||
this.__start()
|
||||
this.is_y = Math.random() > 0.3
|
||||
this.limit = this.is_y ? canvas.h : canvas.w
|
||||
this.position = randint(this.limit)
|
||||
this.direction = 1
|
||||
},
|
||||
before_shade: function(){
|
||||
if (Math.random() < 0.6) {
|
||||
this.position = mod(this.position + 1, this.limit)
|
||||
}
|
||||
if (Math.random() > 0.8) {
|
||||
this.direction = randsign()
|
||||
}
|
||||
},
|
||||
shade: function(src, dest, lex, x, y, w, h){
|
||||
if (this.is_y) {
|
||||
if (y >= this.position) {
|
||||
var copy = src.get(x + this.direction, y)
|
||||
lex.assign(copy)
|
||||
}
|
||||
}
|
||||
else if (x >= this.position) {
|
||||
var copy = src.get(x, y + this.direction)
|
||||
lex.assign(copy)
|
||||
}
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
var ScaleTool = ShaderTool.extend({
|
||||
type: "scale",
|
||||
scale: 1,
|
||||
dscale: 0,
|
||||
speed: 3,
|
||||
start: function(){
|
||||
this.__start()
|
||||
var sign = randsign()
|
||||
this.x_scale = 1
|
||||
this.y_scale = 1
|
||||
this.dx_scale = randsign() * randrange(0.0005, 0.01)
|
||||
var r = Math.random()
|
||||
if (r < 0.333) {
|
||||
this.dy_scale = this.dx_scale * randrange(0.85, 1.25)
|
||||
}
|
||||
else if (r < 0.666) {
|
||||
this.dy_scale = this.dx_scale
|
||||
}
|
||||
else {
|
||||
this.dy_scale = randsign() * randrange(0.0005, 0.01)
|
||||
}
|
||||
},
|
||||
before_shade: function(){
|
||||
this.x_scale += this.dx_scale
|
||||
this.y_scale += this.dy_scale
|
||||
},
|
||||
shade: function(src, dest, lex, x, y, w, h){
|
||||
x = (x/w) * 2 - 1
|
||||
y = (y/h) * 2 - 1
|
||||
x *= this.x_scale
|
||||
y *= this.y_scale
|
||||
x = (x + 1) / 2 * w
|
||||
y = (y + 1) / 2 * h
|
||||
var copy = src.get(x, y)
|
||||
lex.assign(copy)
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
var RotateTool = ShaderTool.extend({
|
||||
type: "rotate",
|
||||
theta: 0,
|
||||
d_theta: 0,
|
||||
|
||||
start: function(){
|
||||
this.__start()
|
||||
var sign = randsign()
|
||||
this.theta = 0
|
||||
this.d_theta = randsign() * randrange(0.001, 0.05)
|
||||
},
|
||||
before_shade: function(){
|
||||
this.theta += this.d_theta
|
||||
},
|
||||
shade: function(src, dest, lex, x, y, w, h){
|
||||
x = (x/w) * 2 - 1
|
||||
y = (y/h) * 2 - 1
|
||||
var ca = cos(this.theta)
|
||||
var sa = sin(this.theta)
|
||||
var a = x * ca - y * sa
|
||||
var b = x * sa + y * ca
|
||||
x = (a + 1) / 2 * w
|
||||
y = (b + 1) / 2 * h
|
||||
var copy = src.get(x, y)
|
||||
lex.assign(copy)
|
||||
return true
|
||||
},
|
||||
})
|
||||
|
||||
var CycleTool = ShaderTool.extend({
|
||||
type: "cycle",
|
||||
n: 0,
|
||||
speed: 5,
|
||||
is_recursive: true,
|
||||
start: function(){
|
||||
this.__start()
|
||||
this.n = randsign()
|
||||
if (random() < 0.2) this.n *= randint(15)
|
||||
},
|
||||
shade: function(src, dest, lex, x, y){
|
||||
lex.bg += this.n
|
||||
return false
|
||||
},
|
||||
})
|
||||
|
||||
nopaint.add_tool( new SolidBrush({ weight: 5 }) )
|
||||
nopaint.add_tool( new ShadowBrush({ weight: 10 }) )
|
||||
nopaint.add_tool( new EraseBrush({ weight: 5 }) )
|
||||
nopaint.add_tool( new RandomBrush({ weight: 4 }) )
|
||||
nopaint.add_tool( new HueBrush({ weight: 5 }) )
|
||||
nopaint.add_tool( new GrayBrush({ weight: 5 }) )
|
||||
nopaint.add_tool( new LetterBrush({ weight: 2 }) )
|
||||
nopaint.add_tool( new RandomLetterBrush({ weight: 12 }) )
|
||||
nopaint.add_tool( new CloneBrush({ weight: 8 }) )
|
||||
nopaint.add_tool( new SmearBrush({ weight: 10 }) )
|
||||
nopaint.add_tool( new FillTool({ weight: 3 }) )
|
||||
nopaint.add_tool( new FillLetterTool({ weight: 6 }) )
|
||||
nopaint.add_tool( new StarsTool({ weight: 2 }) )
|
||||
nopaint.add_tool( new TranslateTool({ weight: 4 }) )
|
||||
nopaint.add_tool( new CycleTool({ weight: 1 }) )
|
||||
nopaint.add_tool( new ScaleTool({ weight: 3 }) )
|
||||
nopaint.add_tool( new RotateTool({ weight: 3 }) )
|
||||
nopaint.add_tool( new SliceTool({ weight: 4 }) )
|
||||
nopaint.add_tool( new ColorizeTool({ weight: 1 }) )
|
||||
nopaint.regenerate_weights()
|
||||
|
||||
nopaint.toggle(true)
|
||||
|
||||
nopaint.player = new StylePlayer ()
|
||||
|
||||
return nopaint
|
||||
})()
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
/*
|
||||
oktween.add({
|
||||
obj: el.style,
|
||||
units: "px",
|
||||
from: { left: 0 },
|
||||
to: { left: 100 },
|
||||
duration: 1000,
|
||||
easing: oktween.easing.circ_out,
|
||||
update: function(obj){
|
||||
console.log(obj.left)
|
||||
}
|
||||
finished: function(){
|
||||
console.log("done")
|
||||
}
|
||||
})
|
||||
*/
|
||||
|
||||
var oktween = (function(){
|
||||
var oktween = {}
|
||||
var tweens = oktween.tweens = []
|
||||
var last_t = 0
|
||||
var id = 0
|
||||
oktween.speed = 1
|
||||
oktween.raf = requestAnimationFrame
|
||||
oktween.add = function(tween){
|
||||
tween.id = id++
|
||||
tween.obj = tween.obj || {}
|
||||
if (tween.easing) {
|
||||
if (typeof tween.easing == "string") {
|
||||
tween.easing = oktween.easing[tween.easing]
|
||||
}
|
||||
}
|
||||
else {
|
||||
tween.easing = oktween.easing.linear
|
||||
}
|
||||
if (! ('from' in tween) && ! ('to' in tween)) {
|
||||
tween.keys = []
|
||||
}
|
||||
else if (! ('from' in tween) ) {
|
||||
tween.from = {}
|
||||
tween.keys = Object.keys(tween.to)
|
||||
tween.keys.forEach(function(prop){
|
||||
tween.from[prop] = parseFloat(tween.obj[prop])
|
||||
})
|
||||
}
|
||||
else {
|
||||
tween.keys = Object.keys(tween.from)
|
||||
}
|
||||
tween.delay = tween.delay || 0
|
||||
tween.start = last_t + tween.delay
|
||||
tween.done = false
|
||||
tween.after = tween.after || []
|
||||
tween.then = function(fn){ tween.after.push(fn); return tween }
|
||||
tween.cancel = function(){
|
||||
var index = tweens.indexOf(tween)
|
||||
if (index != -1) tweens.splice(index, 1)
|
||||
tween.obj = null
|
||||
tween.after = null
|
||||
tween.done = null
|
||||
}
|
||||
tween.tick = 0
|
||||
tween.skip = tween.skip || 1
|
||||
tween.dt = 0
|
||||
tweens.push(tween)
|
||||
return tween
|
||||
}
|
||||
oktween.update = function(t) {
|
||||
oktween.raf(oktween.update)
|
||||
last_t = t * oktween.speed
|
||||
if (tweens.length == 0) return
|
||||
var done = false
|
||||
tweens.forEach(function(tween, i){
|
||||
var dt = Math.min(1.0, (t - tween.start) / tween.duration)
|
||||
tween.tick++
|
||||
if (dt < 0 || (dt < 1 && (tween.tick % tween.skip != 0))) return
|
||||
var ddt = tween.dt = tween.easing(dt)
|
||||
tween.keys.forEach(function(prop){
|
||||
val = lerp( ddt, tween.from[prop], tween.to[prop] )
|
||||
if (tween.round) val = Math.round(val)
|
||||
if (tween.units) val = (Math.round(val)) + tween.units
|
||||
tween.obj[prop] = val
|
||||
})
|
||||
tween.update && tween.update(tween.obj, dt)
|
||||
if (dt == 1) {
|
||||
tween.finished && tween.finished(tween)
|
||||
if (tween.after.length) {
|
||||
var twn = tween.after.shift()
|
||||
twn.obj = twn.obj || tween.obj
|
||||
twn.after = tween.after
|
||||
oktween.add(twn)
|
||||
}
|
||||
if (tween.loop) {
|
||||
tween.start = t + tween.delay
|
||||
}
|
||||
else {
|
||||
done = tween.done = true
|
||||
}
|
||||
}
|
||||
})
|
||||
if (done) {
|
||||
tweens = tweens.filter(function(tween){ return ! tween.done })
|
||||
}
|
||||
}
|
||||
function lerp(n,a,b){ return (b-a)*n+a }
|
||||
|
||||
// requestAnimationFrame(oktween.update)
|
||||
|
||||
oktween.easing = {
|
||||
linear: function(t){
|
||||
return t
|
||||
},
|
||||
circ_out: function(t) {
|
||||
return Math.sqrt(1 - (t = t - 1) * t)
|
||||
},
|
||||
circ_in: function(t){
|
||||
return -(Math.sqrt(1 - (t * t)) - 1)
|
||||
},
|
||||
circ_in_out: function(t) {
|
||||
return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1)
|
||||
},
|
||||
quad_in: function(n){
|
||||
return Math.pow(n, 2)
|
||||
},
|
||||
quad_out: function(n){
|
||||
return n * (n - 2) * -1
|
||||
},
|
||||
quad_in_out: function(n){
|
||||
n = n * 2
|
||||
if(n < 1){ return Math.pow(n, 2) / 2 }
|
||||
return -1 * ((--n) * (n - 2) - 1) / 2
|
||||
},
|
||||
cubic_bezier: function (mX1, mY1, mX2, mY2) {
|
||||
function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
|
||||
function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
|
||||
function C(aA1) { return 3.0 * aA1; }
|
||||
|
||||
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
|
||||
function CalcBezier(aT, aA1, aA2) {
|
||||
return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
|
||||
}
|
||||
|
||||
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
|
||||
function GetSlope(aT, aA1, aA2) {
|
||||
return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
|
||||
}
|
||||
|
||||
function GetTForX(aX) {
|
||||
// Newton raphson iteration
|
||||
var aGuessT = aX;
|
||||
for (var i = 0; i < 10; ++i) {
|
||||
var currentSlope = GetSlope(aGuessT, mX1, mX2);
|
||||
if (currentSlope == 0.0) return aGuessT;
|
||||
var currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
|
||||
aGuessT -= currentX / currentSlope;
|
||||
}
|
||||
return aGuessT;
|
||||
}
|
||||
|
||||
return function(aX) {
|
||||
if (mX1 == mY1 && mX2 == mY2) return aX; // linear
|
||||
return CalcBezier(aX, mY1, mY2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return oktween
|
||||
})()
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
@ -209,16 +174,6 @@ var controls = (function(){
|
|||
this.update(state)
|
||||
}
|
||||
|
||||
/*
|
||||
controls.nopaint = new HiddenCheckbox (nopaint_toggle)
|
||||
controls.nopaint.memorable = true
|
||||
controls.nopaint.on = "N"
|
||||
controls.nopaint.use = function(state){
|
||||
var state = nopaint.toggle(state)
|
||||
this.update(state)
|
||||
}
|
||||
*/
|
||||
|
||||
//
|
||||
|
||||
controls.fg = new BlurredCheckbox (fg_checkbox)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
#!/bin/sh
|
||||
#
|
||||
|
||||
msgf() {
|
||||
local _fmt="${1}"; shift;
|
||||
printf "%s >>> ${_fmt}\n" "$(date +"%d-%^b-%Y %H:%M:%S")" "${@}";
|
||||
};
|
||||
|
||||
usage() {
|
||||
echo "usage: ${0} [-h] [-v]" >&2;
|
||||
echo " -h.........: show this screen" >&2;
|
||||
echo " -v.........: be verbose" >&2;
|
||||
};
|
||||
|
||||
main() {
|
||||
local _cmd="" _build="" _opt="" _vflag=0;
|
||||
while getopts hv _opt; do
|
||||
case "${_opt}" in
|
||||
h) usage; exit 0; ;;
|
||||
v) _vflag=1; ;;
|
||||
*) usage; exit 1; ;;
|
||||
esac; done;
|
||||
shift $((${OPTIND}-1));
|
||||
for _build in cordoba nw www; do
|
||||
msgf "Deploying ${_build}...";
|
||||
cd "asciiblaster-${_build}";
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
./deploy.sh "${@}";
|
||||
else
|
||||
./deploy.sh -v "${@}";
|
||||
fi;
|
||||
cd "${OLDPWD}";
|
||||
msgf "Deployed ${_build}.";
|
||||
done;
|
||||
};
|
||||
|
||||
set -o errexit -o noglob;
|
||||
main "${@}";
|
||||
|
||||
# vim:foldmethod=marker sw=8 ts=8 tw=120
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
#!/bin/sh
|
||||
#
|
||||
|
||||
CORDOBA_PLATFORMS="android";
|
||||
PACKAGE_NAME="asciiblaster-cordoba";
|
||||
RELEASE_DEPS_CMD="cordova cp";
|
||||
RELEASE_DEPS_ENV="ANDROID_HOME JAVA_HOME";
|
||||
RELEASES_DNAME_DEST="releases";
|
||||
RELEASES_DNAME_SRC="platforms/%CORDOBA_PLATFORM%/app/build/outputs/apk";
|
||||
|
||||
msgf() {
|
||||
local _fmt="${1}"; shift;
|
||||
printf "%s >>> ${_fmt}\n" "$(date +"%d-%^b-%Y %H:%M:%S")" "${@}";
|
||||
};
|
||||
|
||||
subst() {
|
||||
local _string="${1}" _search="${2}" _replace="${3}" _string_="";
|
||||
_string_="${_string%${_search}*}";
|
||||
_string_="${_string_}${_replace}"
|
||||
_string_="${_string_}${_string#*${_search}}";
|
||||
echo "${_string_}";
|
||||
};
|
||||
|
||||
deploy() {
|
||||
local _platform="${1}" _vflag="${2}" _release_dname_src="" _release_type="" _release_version="";
|
||||
|
||||
_release_dname_src="$(subst "${RELEASES_DNAME_SRC}" "%CORDOBA_PLATFORM%" "${_platform}")";
|
||||
_release_version="$(sed -n '/^\s*"version":/s/^.*:\s*"\([0-9.]\+\)",\?\s*$/\1/p' package.json)";
|
||||
for _release_type in debug release; do
|
||||
cordova build "--${_release_type}" --device "${_platform}";
|
||||
cp -a "$(find "${_release_dname_src}/${_release_type}" -name \*.apk)" \
|
||||
"${RELEASES_DNAME_DEST}/${PACKAGE_NAME}-${_release_type}-${_release_version}.apk";
|
||||
done;
|
||||
};
|
||||
|
||||
usage() {
|
||||
echo "usage: ${0} [-h] [-v] [platform...]" >&2;
|
||||
echo " -h.........: show this screen" >&2;
|
||||
echo " -v.........: be verbose" >&2;
|
||||
echo " platform...: one of: \`${CORDOBA_PLATFORMS}'" >&2;
|
||||
};
|
||||
|
||||
main() {
|
||||
local _cmd="" _opt="" _platform="" _platforms="" _vflag=0 _vname="";
|
||||
while getopts hv _opt; do
|
||||
case "${_opt}" in
|
||||
h) usage; exit 0; ;;
|
||||
v) _vflag=1; ;;
|
||||
*) usage; exit 1; ;;
|
||||
esac; done;
|
||||
shift $((${OPTIND}-1));
|
||||
for _cmd in ${RELEASE_DEPS_CMD}; do
|
||||
if ! which "${_cmd}" >/dev/null; then
|
||||
echo "error: missing prerequisite command \`${_cmd}'";
|
||||
exit 1;
|
||||
fi;
|
||||
done;
|
||||
for _vname in ${RELEASE_DEPS_ENV}; do
|
||||
if [ -z "$(eval echo \"\${_vname}\")" ]; then
|
||||
echo "error: missing prerequisite environment variable \`${_vname}'";
|
||||
exit 1;
|
||||
fi;
|
||||
done;
|
||||
_platforms="${@}"; mkdir -p "${RELEASES_DNAME_DEST}";
|
||||
for _platform in ${_platforms:-${CORDOBA_PLATFORMS}}; do
|
||||
msgf "Building ${_platform} release...";
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
deploy "${_platform}" "${_vflag}" >/dev/null;
|
||||
else
|
||||
deploy "${_platform}" "${_vflag}";
|
||||
fi;
|
||||
msgf "Built ${_platform} release.";
|
||||
done;
|
||||
};
|
||||
|
||||
set -o errexit -o noglob;
|
||||
main "${@}";
|
||||
|
||||
# vim:foldmethod=marker sw=8 ts=8 tw=120
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
#!/bin/sh
|
||||
#
|
||||
|
||||
PACKAGE_NAME="asciiblaster-nw";
|
||||
RELEASE_DEPS="cpio find gunzip rm sed tar unzip wget zip";
|
||||
NWJS_MANIFEST_FNAME="nwjs.manifest";
|
||||
NWJS_PLATFORMS="linux-ia32 linux-x64 win-ia32 win-x64";
|
||||
NWJS_VERSION="0.34.5";
|
||||
NWJS_SUBDIR="nwjs-v${NWJS_VERSION}-%NWJS_PLATFORM%";
|
||||
NWJS_URL_linux="https://dl.nwjs.io/v${NWJS_VERSION}/nwjs-v${NWJS_VERSION}-%NWJS_PLATFORM%.tar.gz";
|
||||
NWJS_URL_win="https://dl.nwjs.io/v${NWJS_VERSION}/nwjs-v${NWJS_VERSION}-%NWJS_PLATFORM%.zip";
|
||||
RELEASES_DNAME="releases";
|
||||
|
||||
extract() {
|
||||
local _fname="${1}" _dest_dname="${2}";
|
||||
if [ -n "${_fname}" -a -z "${_fname##*.tar.gz}" ]; then
|
||||
tar -C "${_dest_dname}" -xpf "${_fname}";
|
||||
elif [ -n "${_fname}" -a -z "${_fname##*.zip}" ]; then
|
||||
unzip -d "${_dest_dname}" "${_fname}";
|
||||
else
|
||||
echo "error: file \`${_fname}' is of unknown archive type" >&2; exit 1;
|
||||
fi;
|
||||
};
|
||||
|
||||
msgf() {
|
||||
local _fmt="${1}"; shift;
|
||||
printf "%s >>> ${_fmt}\n" "$(date +"%d-%^b-%Y %H:%M:%S")" "${@}";
|
||||
};
|
||||
|
||||
subst() {
|
||||
local _string="${1}" _search="${2}" _replace="${3}" _string_="";
|
||||
_string_="${_string%${_search}*}";
|
||||
_string_="${_string_}${_replace}"
|
||||
_string_="${_string_}${_string#*${_search}}";
|
||||
echo "${_string_}";
|
||||
};
|
||||
|
||||
deploy() {
|
||||
local _platform="${1}" _vflag="${2}" _nwjs_fname="" _nwjs_subdir="" _nwjs_url="" \
|
||||
_release_fname="" _release_dname="" _release_version="";
|
||||
|
||||
_nwjs_subdir="$(subst "${NWJS_SUBDIR}" "%NWJS_PLATFORM%" "${_platform}")";
|
||||
_nwjs_url="$(subst "$(eval echo \"\${NWJS_URL_${_platform%%-*}}\")" "%NWJS_PLATFORM%" "${_platform}")";
|
||||
_nwjs_fname="${RELEASES_DNAME}/${_nwjs_url##*/}";
|
||||
_release_version="$(sed -n '/^\s*"version":/s/^.*:\s*"\([0-9.]\+\)",\?\s*$/\1/p' package.json)";
|
||||
_release_dname="${RELEASES_DNAME}/${PACKAGE_NAME}-${_release_version}-release-${_platform}";
|
||||
_release_fname="${_release_dname}.zip";
|
||||
|
||||
trap "rm -fr ${_release_dname}" EXIT HUP INT QUIT PIPE TERM USR1 USR2;
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
wget -cqO "${_nwjs_fname}" "${_nwjs_url}";
|
||||
else
|
||||
wget -cO "${_nwjs_fname}" "${_nwjs_url}";
|
||||
fi;
|
||||
if ! sha256sum --ignore-missing -c --status "${NWJS_MANIFEST_FNAME}"; then
|
||||
echo "error: SHA256 sum mismatch for \`${_nwjs_fname}'" >&2; return 1;
|
||||
fi;
|
||||
rm -rf "${_release_dname}"; mkdir -p "${_release_dname}"; extract "${_nwjs_fname}" "${_release_dname}";
|
||||
|
||||
cd "${_release_dname}/${_nwjs_subdir}";
|
||||
find . \
|
||||
-mindepth 1 |\
|
||||
cpio --quiet -dmp ..;
|
||||
cd "${OLDPWD}";
|
||||
rm -fr "${_release_dname}/${_nwjs_subdir}";
|
||||
find -L . \
|
||||
-mindepth 1 \
|
||||
-not -path "./${RELEASES_DNAME}/*" \
|
||||
-not -path "./${RELEASES_DNAME}" \
|
||||
-not -name '*.sw*' \
|
||||
-not -name "${0##*/}" \
|
||||
-not -name "${NWJS_MANIFEST_FNAME}" |\
|
||||
cpio --quiet -dLmp "${_release_dname}";
|
||||
cd "${RELEASES_DNAME}";
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
zip -9 -r "${_release_fname##${RELEASES_DNAME}/}" "${_release_dname##${RELEASES_DNAME}/}" >/dev/null;
|
||||
else
|
||||
zip -9 -r "${_release_fname##${RELEASES_DNAME}/}" "${_release_dname##${RELEASES_DNAME}/}";
|
||||
fi;
|
||||
cd "${OLDPWD}"; rm -fr "${_release_dname}";
|
||||
trap - EXIT HUP INT QUIT PIPE TERM USR1 USR2;
|
||||
};
|
||||
|
||||
usage() {
|
||||
echo "usage: ${0} [-h] [-v] [platform...]" >&2;
|
||||
echo " -h.........: show this screen" >&2;
|
||||
echo " -v.........: be verbose" >&2;
|
||||
echo " platform...: one of: \`${NWJS_PLATFORMS}'" >&2;
|
||||
};
|
||||
|
||||
main() {
|
||||
local _cmd="" _opt="" _platform="" _platforms="" _vflag=0;
|
||||
while getopts hv _opt; do
|
||||
case "${_opt}" in
|
||||
h) usage; exit 0; ;;
|
||||
v) _vflag=1; ;;
|
||||
*) usage; exit 1; ;;
|
||||
esac; done;
|
||||
shift $((${OPTIND}-1));
|
||||
for _cmd in ${RELEASE_DEPS}; do
|
||||
if ! which "${_cmd}" >/dev/null; then
|
||||
echo "error: missing prerequisite command \`${_cmd}'";
|
||||
exit 1;
|
||||
fi;
|
||||
done;
|
||||
_platforms="${@}"; mkdir -p "${RELEASES_DNAME}";
|
||||
for _platform in ${_platforms:-${NWJS_PLATFORMS}}; do
|
||||
msgf "Building ${_platform} release...";
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
deploy "${_platform}" "${_vflag}" >/dev/null;
|
||||
else
|
||||
deploy "${_platform}" "${_vflag}";
|
||||
fi;
|
||||
msgf "Built ${_platform} release.";
|
||||
done;
|
||||
};
|
||||
|
||||
set -o errexit -o noglob;
|
||||
main "${@}";
|
||||
|
||||
# vim:foldmethod=marker sw=8 ts=8 tw=120
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
#!/bin/sh
|
||||
#
|
||||
|
||||
PACKAGE_NAME="asciiblaster-www";
|
||||
RELEASE_DEPS="cpio find rm sed zip";
|
||||
RELEASES_DNAME="releases";
|
||||
|
||||
msgf() {
|
||||
local _fmt="${1}"; shift;
|
||||
printf "%s >>> ${_fmt}\n" "$(date +"%d-%^b-%Y %H:%M:%S")" "${@}";
|
||||
};
|
||||
|
||||
deploy() {
|
||||
local _vflag="${1}" _release_fname="" _release_dname="" _release_version="";
|
||||
|
||||
_release_version="$(sed -n '/^\s*<title>/s/^\s*<title>asciiblaster v\([0-9.]\+\)<\/title>\s*$/\1/p' index.html)";
|
||||
_release_dname="${RELEASES_DNAME}/${PACKAGE_NAME}-${_release_version}";
|
||||
_release_fname="${_release_dname}.zip";
|
||||
|
||||
find -L . \
|
||||
-mindepth 1 \
|
||||
-not -path "./${RELEASES_DNAME}/*" \
|
||||
-not -path "./${RELEASES_DNAME}" \
|
||||
-not -name '*.sw*' \
|
||||
-not -name "${0##*/}" |\
|
||||
cpio --quiet -dLmp "${_release_dname}";
|
||||
cd "${RELEASES_DNAME}";
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
zip -9 -r "${_release_fname##${RELEASES_DNAME}/}" "${_release_dname##${RELEASES_DNAME}/}" >/dev/null;
|
||||
else
|
||||
zip -9 -r "${_release_fname##${RELEASES_DNAME}/}" "${_release_dname##${RELEASES_DNAME}/}";
|
||||
fi;
|
||||
cd "${OLDPWD}"; rm -fr "${_release_dname}";
|
||||
};
|
||||
|
||||
usage() {
|
||||
echo "usage: ${0} [-h] [-v]" >&2;
|
||||
echo " -h.........: show this screen" >&2;
|
||||
echo " -v.........: be verbose" >&2;
|
||||
};
|
||||
|
||||
main() {
|
||||
local _cmd="" _opt="" _vflag=0;
|
||||
while getopts hv _opt; do
|
||||
case "${_opt}" in
|
||||
h) usage; exit 0; ;;
|
||||
v) _vflag=1; ;;
|
||||
*) usage; exit 1; ;;
|
||||
esac; done;
|
||||
shift $((${OPTIND}-1));
|
||||
for _cmd in ${RELEASE_DEPS}; do
|
||||
if ! which "${_cmd}" >/dev/null; then
|
||||
echo "error: missing prerequisite command \`${_cmd}'";
|
||||
exit 1;
|
||||
fi;
|
||||
done;
|
||||
msgf "Building release...";
|
||||
if [ "${_vflag:-0}" -eq 0 ]; then
|
||||
deploy "${_vflag}" >/dev/null;
|
||||
else
|
||||
deploy "${_vflag}";
|
||||
fi;
|
||||
msgf "Built release.";
|
||||
};
|
||||
|
||||
set -o errexit -o noglob;
|
||||
main "${@}";
|
||||
|
||||
# vim:foldmethod=marker sw=8 ts=8 tw=120
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
1) document: constraints for video reverse
|
||||
2) document: Shift + LMB to delete brush, Shift + LMB to switch character sets
|
||||
3) feature: allow to adjust cutoff warning threshold, {dis,en}able cutoff & print line numbers affected
|
||||
4) feature: {bold,italic,underline} attributes
|
||||
5) feature: keyboard instead of [LR]MB
|
||||
6) feature: {line,measuring} tool
|
||||
7) feature: status bar w/ position, etc.
|
||||
8) feature: zoom {in,out}
|
||||
9) reimplement: {save,upload} as PNG & gallery
|
||||
1) document: constraints for video reverse
|
||||
2) document: Shift + LMB to delete brush, Shift + LMB to switch character sets
|
||||
3) feature: allow to adjust cutoff warning threshold, {dis,en}able cutoff & print line numbers affected
|
||||
4) feature: {bold,italic,underline} attributes
|
||||
5) feature: keyboard instead of [LR]MB
|
||||
6) feature: {line,measuring} tool
|
||||
7) feature: status bar w/ position, etc.
|
||||
8) feature: zoom {in,out}
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>asciiblaster</title>
|
||||
<title>asciiblaster v1.0.4</title>
|
||||
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes" />
|
||||
<link rel="stylesheet" href="assets/css/sally.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="assets/css/ak.css" type="text/css" charset="utf-8" />
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
<div id="palette_rapper"></div>
|
||||
<div id="secret_rapper">
|
||||
<span id="experimental_palette_toggle">.</span>
|
||||
<!-- <span id="nopaint_toggle">N</span> -->
|
||||
</div>
|
||||
<div id="letters_rapper"></div>
|
||||
<div id="custom_rapper"></div>
|
||||
|
|
@ -64,19 +63,11 @@
|
|||
<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>
|
||||
<br>
|
||||
<br>
|
||||
<div id="nopaint_rapper">
|
||||
<br>
|
||||
<span id="nopaint_no_el" class="tool">no</span><br>
|
||||
<span id="nopaint_paint_el" class="tool">paint</span><br>
|
||||
<span id="nopaint_pause_el" class="tool hidden">pause</span><br>
|
||||
</div>
|
||||
<br>
|
||||
brush: <span id="brush_w_el" class="ed">5</span> x <span id="brush_h_el" class="ed">5</span><br>
|
||||
canvas: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br>
|
||||
</div>
|
||||
|
|
@ -90,33 +81,16 @@
|
|||
<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>
|
||||
<script src="assets/js/ext/unicode.js"></script>
|
||||
<script src="assets/js/ext/color.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/unicode.js"></script>
|
||||
<script src="assets/js/color.js"></script>
|
||||
<script src="assets/js/clipboard.js"></script>
|
||||
|
||||
<script src="assets/js/lex.js"></script>
|
||||
<script src="assets/js/matrix.js"></script>
|
||||
<script src="assets/js/gfx.js"></script>
|
||||
|
|
@ -132,7 +106,6 @@
|
|||
<script src="assets/js/ui/letters.js"></script>
|
||||
<script src="assets/js/ui/selection.js"></script>
|
||||
<script src="assets/js/ui/transform.js"></script>
|
||||
<script src="assets/js/ext/nopaint.js"></script>
|
||||
|
||||
<script src="assets/js/app.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue