diff options
| -rw-r--r-- | css/sally.css | 10 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | js/app.js | 28 | ||||
| -rw-r--r-- | js/lex.js | 28 | ||||
| -rw-r--r-- | js/matrix.js | 4 | ||||
| -rw-r--r-- | js/shader.js | 20 | ||||
| -rw-r--r-- | js/tool.js | 1 |
7 files changed, 69 insertions, 26 deletions
diff --git a/css/sally.css b/css/sally.css index e5b5ed7..238fdab 100644 --- a/css/sally.css +++ b/css/sally.css @@ -1,6 +1,5 @@ -body { +textarea,input[type=text],body { margin:0; - background-color: #000000 !important; font-family: 'FixedsysExcelsior301Regular'; font-size: 12pt; font-weight: 100; @@ -8,7 +7,9 @@ body { color:#6d6b6d; -webkit-font-smoothing: antialiased !important; } - +body { + background-color: #000000 !important; +} @font-face { font-family: 'FixedsysExcelsior301Regular'; src: url('../fonts/fsex300-webfont.eot'); @@ -31,6 +32,9 @@ a:link, a:visited {text-decoration: none; color: #3b3740} width:auto; padding:4px; background-color: #000000; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } .rapper { white-space:pre-wrap; @@ -11,7 +11,8 @@ body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; } body.loading { opacity: 0; } body { transition: 0.1s linear; } body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset 0 0 2px white; } -#shader_textarea { display: none; width: 400px; height: 400px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; } +#shader_textarea { display: none; float: right; font-size:12pt; width: 45%; height: 400px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} +#cursor_input { position: absolute; top: 0; right: 0; width:30px; } </style> <body class="grid loading"> @@ -35,6 +36,7 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset </div> <textarea id="shader_textarea"></textarea> </div> +<input type="text" id="cursor_input"> </body> <script type="text/javascript-shader" id="demo_shader"> lex.bg = colors[color_hue_order[Math.floor((x+y*y)/20)%16]] @@ -29,6 +29,7 @@ function build () { }) shader.init() shader.run(canvas) + shader.animate() brush = new Matrix (5, 5, function(x,y){ var lex = new Lex (x,y) @@ -39,6 +40,7 @@ function build () { var lex = new Lex (x,y) lex.bg = colors[color_hue_order[y>>1]] lex.build() + console.log(lex.bg, lex.css()) return lex }) canvas.append(canvas_rapper) @@ -98,7 +100,8 @@ function build () { controls.shader = new Tool (shader_el) controls.shader.use = function(){ shader_textarea.style.display = "block" - setTimeout(function(){ shader_textarea.focus() }) + // setTimeout(function(){ shader_textarea.focus() }) + shader_textarea.focus() } controls.shader.blur = function(){ Tool.prototype.blur.call(this) @@ -116,6 +119,7 @@ function build () { controls.canvas_height = new Lex (canvas_height_el) controls.circle.focus() +// controls.shader.focus() brush.bg = colors.red brush.generate() @@ -162,6 +166,7 @@ function bind () { }) window.addEventListener('mouseup', function(){ dragging = erasing = false + if (current_tool.name != 'shader') { cursor_input.focus() } }); [controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){ @@ -214,15 +219,26 @@ function bind () { canvas.build() }) - window.addEventListener('keydown', function(e){ + window.addEventListener('mousedown', function(e){ + if (current_tool.name == "shader") { return } + cursor_input.focus() + }) + cursor_input.addEventListener('keydown', function(e){ + if (focused) { focused.key(undefined, e.keyCode) } + }) + cursor_input.addEventListener('input', function(e){ if (current_tool.name == "shader") { + cursor_input.value = "" return } if (! e.metaKey && ! e.ctrlKey && ! e.altKey) { e.preventDefault() } + var char = cursor_input.value + cursor_input.value = "" - // console.log(e.keyCode) + // var charFromKeyCode = String.fromCharCode(e.keyCode) + switch (e.keyCode) { case 27: // esc if (focused) focused.blur() @@ -238,12 +254,14 @@ function bind () { break } default: - if (focused) focused.key(String.fromCharCode(e.keyCode), e.keyCode) + if (focused) focused.key(char, e.keyCode) break } }) - + + document.addEventListener('DOMContentLoaded', function(){ + if (current_tool.name != 'shader') { cursor_input.focus() } document.body.classList.remove('loading') }) } @@ -1,3 +1,5 @@ +direction = [1,0] + function Lex (x,y) { if (typeof x == "number") { this.x = x @@ -16,7 +18,7 @@ Lex.prototype.build = function(){ this.span.innerHTML = this.html() } Lex.prototype.css = function(){ - return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,15)] + return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] } Lex.prototype.html = function(){ return this.char == " " ? " " : this.char || " " @@ -78,7 +80,6 @@ Lex.prototype.demolish = function(){ this.span.parentNode.removeChild(this.span) this.span = null } - Lex.prototype.key = function(char, keyCode) { console.log(keyCode, this.y, this.x) switch (keyCode) { @@ -89,29 +90,30 @@ Lex.prototype.key = function(char, keyCode) { return case 13: // return canvas.focusLex(0, this.x+1) - break + return case 38: // up - canvas.focusLex(this.y, this.x-1) + direction[0] = 0 + direction[1] = -1 break case 40: // down - canvas.focusLex(this.y, this.x+1) + direction[0] = 0 + direction[1] = 1 break case 37: // left - canvas.focusLex(this.y-1, this.x) + direction[0] = -1 + direction[1] = 0 break case 39: // right - canvas.focusLex(this.y+1, this.x) + direction[0] = 1 + direction[1] = 0 break default: + if (! char) { return } this.char = char this.fg = brush.bg this.build() this.blur() - if (this.y < canvas.w-1) { - canvas.aa[this.x][this.y+1].focus() - } - else { - canvas.focusLex(0, this.x+1) - } + break } + canvas.focusLex(this.y + direction[0], this.x + direction[1]) } diff --git a/js/matrix.js b/js/matrix.js index a36d3db..8975f15 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -40,8 +40,8 @@ Matrix.prototype.forEach = function(f){ }) }) } -Matrix.prototype.focusLex = function(y,x){ - this.aa[mod(x,this.h)][mod(y,this.w)].focus() +Matrix.prototype.focusLex = function(x,y){ + this.aa[mod(y,this.h)][mod(x,this.w)].focus() } Matrix.prototype.clear = function(){ this.forEach(function(lex,x,y){ lex.clear() }) diff --git a/js/shader.js b/js/shader.js index b829a0d..cd6b899 100644 --- a/js/shader.js +++ b/js/shader.js @@ -1,13 +1,14 @@ 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){ - new_fn = new Function('lex', 'x', 'y', fn_str) + new_fn = new Function('lex', 'x', 'y', 't', fn_str) try { new_fn(lex, 0, 0) } @@ -18,11 +19,26 @@ var shader = (function(){ return fn } exports.run = function(canvas){ + var t = +new Date canvas.forEach(function(lex, y, x){ - fn(lex, x, y) + fn(lex, x, y, t) lex.build() }) } + exports.toggle = function(state){ + animating = typeof state == "boolean" ? state : ! animating + } + exports.pause = function(){ + animating = false + } + exports.play = function(){ + animating = true + } + exports.animate = function (t){ + requestAnimationFrame(exports.animate) + if (! animating) { return } + exports.run(canvas) + } return exports @@ -10,6 +10,7 @@ Tool.prototype.focus = function(){ current_tool = this this.span.classList.add('focused') this.use() + if (this.name != 'shader') { cursor_input.focus() } } Tool.prototype.blur = function(){ current_tool = null |