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 2018-11-23 20:37:06 +01:00
parent dc45d81361
commit e1d338d6c3
24 changed files with 328 additions and 1855 deletions

View File

@ -105,7 +105,6 @@ body.loading { opacity: 0; }
body { transition: 0.1s linear; } body { transition: 0.1s linear; }
#import_textarea { font-size: 9pt; } #import_textarea { font-size: 9pt; }
textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
#shader_rapper { display: none; }
#import_rapper { display: none; } #import_rapper { display: none; }
#canvas_rapper { #canvas_rapper {
white-space: pre; white-space: pre;
@ -132,11 +131,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
#secret_rapper span { float: left; } #secret_rapper span { float: left; }
.vertical #secret_rapper { margin-right: 10px; } .vertical #secret_rapper { margin-right: 10px; }
.vertical #secret_rapper span { float: left; clear: both; } .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 { .rotated #canvas_rapper {
transform: translateX(-50%) translateY(-50%) translateZ(0) rotate(-90deg); 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%) } 100% { color: hsl(360,100%,50%) }
} }
.panke #shader_el,
.panke #load_el, .panke #load_el,
.panke #import_textarea, .panke #import_textarea,
.panke #doc_el, .panke #doc_el,

View File

@ -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="tips.txt">tips.txt</a> - Tips on using the keyboard
* <a href="irssi.txt">irssi.txt</a> - Instructions on using IRSSI to make color codes. * <a href="irssi.txt">irssi.txt</a> - Instructions on using IRSSI to make color codes.
* <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 For more information on IRC, Color Codes, and much more, visit the
<a href="http://jollo.org/LNT/doc/">documentation sitemap</a>, part of the <a href="http://jollo.org/">Jollo IRC Network</a>. <a href="http://jollo.org/LNT/doc/">documentation sitemap</a>, part of the <a href="http://jollo.org/">Jollo IRC Network</a>.

View File

@ -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

View File

@ -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

View File

@ -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]
}

View File

@ -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) )

View File

@ -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

View File

@ -19,10 +19,6 @@ function init () {
bind() bind()
} }
function build () { function build () {
shader.init()
// shader.run(canvas)
shader.animate()
canvas.append(canvas_rapper) canvas.append(canvas_rapper)
brush.append(brush_rapper) brush.append(brush_rapper)
palette.append(palette_rapper) palette.append(palette_rapper)
@ -30,7 +26,6 @@ function build () {
letters.repaint("Basic Latin") letters.repaint("Basic Latin")
controls.circle.focus() controls.circle.focus()
// controls.shader.focus()
brush.bg = colors.red brush.bg = colors.red
brush.generate() brush.generate()
@ -50,13 +45,10 @@ function bind () {
window.addEventListener('mouseup', function(e){ window.addEventListener('mouseup', function(e){
dragging = erasing = false dragging = erasing = false
// if (current_filetool.name != 'shader' && current_filetool.name != 'load' && current_filetool.name != 'save' && is_desktop) {
// cursor_input.focus()
// }
var ae = document.activeElement var ae = document.activeElement
if (ae !== shader_textarea && ae !== import_textarea) { if (ae !== import_textarea) {
if (is_desktop) cursor_input.focus() if (is_desktop) cursor_input.focus()
} }
@ -75,9 +67,9 @@ function bind () {
}) })
window.addEventListener('mousedown', function(e){ window.addEventListener('mousedown', function(e){
// if (current_filetool.name != 'shader' && is_desktop) { cursor_input.focus() } // if (is_desktop) { cursor_input.focus() }
}) })
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
if (is_desktop) { cursor_input.focus() } if (is_desktop) { cursor_input.focus() }
document.body.classList.remove('loading') document.body.classList.remove('loading')

View File

@ -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
})()

View File

@ -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
})()

View File

@ -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
})()

View File

@ -104,7 +104,6 @@ var canvas = current_canvas = (function(){
point = [x,y] point = [x,y]
lex = canvas.aa[y][x] lex = canvas.aa[y][x]
if (! dragging) return if (! dragging) return
shader_el.innerHTML = point.join(",")
if (drawing) { if (drawing) {
draw.move(e, lex, point) draw.move(e, lex, point)
} }

View File

@ -155,41 +155,6 @@ var controls = (function(){
} }
// //
var ShaderTool = FileTool.extend({
active: false,
use: function(state){
this.active = typeof state == "boolean" ? state : ! this.active
if (this.active) {
shader_rapper.style.display = "block"
shader_textarea.focus()
} else {
shader_rapper.style.display = "none"
}
},
done: function(){
this.use(false)
}
})
controls.shader = new ShaderTool (shader_el)
shader_textarea.value = shader_textarea.value || demo_shader.innerHTML
shader_textarea.addEventListener("input", function(){
var fn = shader.build(shader_textarea.value)
fn && shader.run(canvas)
})
controls.animate = new BlurredCheckbox (animate_checkbox)
controls.animate.use = function(state){
var state = shader.toggle()
this.update(state)
// controls.shader.focus()
controls.shader.use(true)
}
controls.shader_target = new RadioGroup(shader_target_el)
var cs = controls.shader_target.controls
cs.canvas.use = function(){ shader.canvas = canvas }
cs.brush.use = function(){ shader.canvas = brush }
cs.selection.use = function(){ shader.canvas = selection.canvas }
controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle) controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
controls.experimental_palette.memorable = true controls.experimental_palette.memorable = true
controls.experimental_palette.use = function(state){ controls.experimental_palette.use = function(state){
@ -209,16 +174,6 @@ var controls = (function(){
this.update(state) 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) controls.fg = new BlurredCheckbox (fg_checkbox)

View File

@ -98,10 +98,6 @@ var keys = (function(){
e.preventDefault() e.preventDefault()
} }
*/ */
if (current_tool.name == "shader") {
cursor_input.value = ""
return
}
var char = cursor_input.value var char = cursor_input.value
cursor_input.value = "" cursor_input.value = ""

View File

@ -26,7 +26,7 @@ var Tool = Model({
current_tool = this current_tool = this
this.el.classList.add('focused') this.el.classList.add('focused')
this.use() this.use()
if (this.name != 'shader' && is_desktop) { cursor_input.focus() } if (is_desktop) { cursor_input.focus() }
}, },
blur: function(){ blur: function(){
current_tool = null current_tool = null
@ -45,7 +45,7 @@ var FileTool = Tool.extend({
current_filetool = this current_filetool = this
this.el.classList.add('focused') this.el.classList.add('focused')
this.use() this.use()
if (this.name != 'shader' && is_desktop) { cursor_input.focus() } if (is_desktop) { cursor_input.focus() }
}, },
blur: function(){ blur: function(){
current_filetool = null current_filetool = null

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -1,9 +1,10 @@
1) document: constraints for video reverse 1) document: constraints for video reverse
2) document: Shift + LMB to delete brush, Shift + LMB to switch character sets 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 3) feature: allow to adjust cutoff warning threshold, {dis,en}able cutoff & print line numbers affected
4) feature: {bold,italic,underline} attributes 4) feature: {bold,italic,underline} attributes
5) feature: keyboard instead of [LR]MB 5) feature: keyboard instead of [LR]MB
6) feature: {line,measuring} tool 6) feature: {line,measuring} tool
7) feature: status bar w/ position, etc. 7) feature: status bar w/ position, etc.
8) feature: zoom {in,out} 8) feature: zoom {in,out}
9) reimplement: {save,upload} as PNG & gallery 9) reimplement: {save,upload} as PNG & gallery, shaders (possibly)
10) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK, set is_{iphone,ipad,android,mobile,desktop}

View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <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" /> <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/sally.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="assets/css/ak.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="palette_rapper"></div>
<div id="secret_rapper"> <div id="secret_rapper">
<span id="experimental_palette_toggle">.</span> <span id="experimental_palette_toggle">.</span>
<!-- <span id="nopaint_toggle">N</span> -->
</div> </div>
<div id="letters_rapper"></div> <div id="letters_rapper"></div>
<div id="custom_rapper"></div> <div id="custom_rapper"></div>
@ -64,19 +63,11 @@
<span id="save_el" class="tool">save</span> <span id="save_el" class="tool">save</span>
<span id="load_el" class="tool">load</span> <span id="load_el" class="tool">load</span>
<br> <br>
<span id="shader_el" class="tool">shader</span>
<a id="doc_el" href="assets/doc/index.html" target="_blank">doc</a> <a id="doc_el" href="assets/doc/index.html" target="_blank">doc</a>
<br> <br>
<span id="advanced_checkbox" class="tool">_ advanced</span> <span id="advanced_checkbox" class="tool">_ advanced</span>
<br> <br>
<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> 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> canvas: <span id="canvas_w_el" class="ed">100</span> x <span id="canvas_h_el" class="ed">30</span><br>
</div> </div>
@ -90,33 +81,16 @@
<div id="cutoff_warning_el">character limit of 425 exceeded</div> <div id="cutoff_warning_el">character limit of 425 exceeded</div>
<textarea id="import_textarea"></textarea> <textarea id="import_textarea"></textarea>
</div> </div>
<div id="shader_rapper">
<span id="animate_checkbox" class="tool">_ animate</span>
to <span id="shader_target_el">*canvas brush selection</span>
<span id="shader_fps_el" class="hidden faded"></span><br>
<textarea id="shader_textarea"></textarea>
</div>
</div> </div>
</div> </div>
<input type="text" id="cursor_input"> <input type="text" id="cursor_input">
</body> </body>
<script type="text/javascript-shader" id="demo_shader"> <script src="assets/js/util.js"></script>
// lex.bg = hue((x+y*y+t/10)/20) <script src="assets/js/unicode.js"></script>
// lex.fg = colors.white <script src="assets/js/color.js"></script>
// 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/clipboard.js"></script> <script src="assets/js/clipboard.js"></script>
<script src="assets/js/lex.js"></script> <script src="assets/js/lex.js"></script>
<script src="assets/js/matrix.js"></script> <script src="assets/js/matrix.js"></script>
<script src="assets/js/gfx.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/letters.js"></script>
<script src="assets/js/ui/selection.js"></script> <script src="assets/js/ui/selection.js"></script>
<script src="assets/js/ui/transform.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> <script src="assets/js/app.js"></script>
</html> </html>