diff --git a/assets/css/sally.css b/assets/css/sally.css
index 447fb04..59ac265 100644
--- a/assets/css/sally.css
+++ b/assets/css/sally.css
@@ -105,7 +105,6 @@ body.loading { opacity: 0; }
body { transition: 0.1s linear; }
#import_textarea { font-size: 9pt; }
textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
-#shader_rapper { display: none; }
#import_rapper { display: none; }
#canvas_rapper {
white-space: pre;
@@ -194,7 +193,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
100% { color: hsl(360,100%,50%) }
}
-.panke #shader_el,
.panke #load_el,
.panke #import_textarea,
.panke #doc_el,
diff --git a/assets/doc/index.html b/assets/doc/index.html
index d788ef0..57dc943 100644
--- a/assets/doc/index.html
+++ b/assets/doc/index.html
@@ -23,13 +23,6 @@ features of the asdf.us color code tool:
* tips.txt - Tips on using the keyboard
* irssi.txt - Instructions on using IRSSI to make color codes.
-Documents on Shaders
-
-* shadetut.txt - A brief tutorial on ASCII shaders.
-* shaders/brush.txt - Shaders designed to work on the brush
-* shaders/canvas.txt - Shaders designed to work on the canvas
-* shaders/util.txt - Miscellaneous utilities / snippets
-
For more information on IRC, Color Codes, and much more, visit the
documentation sitemap, part of the Jollo IRC Network.
diff --git a/assets/doc/shaders/brush.txt b/assets/doc/shaders/brush.txt
deleted file mode 100644
index 8a5f672..0000000
--- a/assets/doc/shaders/brush.txt
+++ /dev/null
@@ -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
-
-
-
diff --git a/assets/doc/shaders/canvas.txt b/assets/doc/shaders/canvas.txt
deleted file mode 100644
index 3e036bd..0000000
--- a/assets/doc/shaders/canvas.txt
+++ /dev/null
@@ -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]
-}
-
diff --git a/assets/doc/shaders/util.txt b/assets/doc/shaders/util.txt
deleted file mode 100644
index a455eb3..0000000
--- a/assets/doc/shaders/util.txt
+++ /dev/null
@@ -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) )
-
-
diff --git a/assets/doc/shadetut.txt b/assets/doc/shadetut.txt
deleted file mode 100644
index 681b421..0000000
--- a/assets/doc/shadetut.txt
+++ /dev/null
@@ -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
-
-
diff --git a/assets/js/app.js b/assets/js/app.js
index 3cf6db3..fdb60a6 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -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')
diff --git a/assets/js/gfx.js b/assets/js/gfx.js
index 1bf9034..5e0c59a 100644
--- a/assets/js/gfx.js
+++ b/assets/js/gfx.js
@@ -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
-
-})()
-
diff --git a/assets/js/ui/canvas.js b/assets/js/ui/canvas.js
index ca14323..57bea79 100644
--- a/assets/js/ui/canvas.js
+++ b/assets/js/ui/canvas.js
@@ -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)
}
diff --git a/assets/js/ui/controls.js b/assets/js/ui/controls.js
index 9e0673c..efa3bae 100644
--- a/assets/js/ui/controls.js
+++ b/assets/js/ui/controls.js
@@ -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){
diff --git a/assets/js/ui/keys.js b/assets/js/ui/keys.js
index 77922c7..621c7a7 100644
--- a/assets/js/ui/keys.js
+++ b/assets/js/ui/keys.js
@@ -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 = ""
diff --git a/assets/js/ui/tool.js b/assets/js/ui/tool.js
index d0053a6..ad62d80 100644
--- a/assets/js/ui/tool.js
+++ b/assets/js/ui/tool.js
@@ -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
diff --git a/assets/text/TODO b/assets/text/TODO
index f7d1887..e3fa8fb 100644
--- a/assets/text/TODO
+++ b/assets/text/TODO
@@ -6,5 +6,5 @@
6) feature: {line,measuring} tool
7) feature: status bar w/ position, etc.
8) feature: zoom {in,out}
-9) reimplement: {save,upload} as PNG & gallery
+9) reimplement: {save,upload} as PNG & gallery, shaders (possibly)
10) releases: merge w/ MiRCARTools (into asciiblaster,) provide signed release APK, set is_{iphone,ipad,android,mobile,desktop}
diff --git a/index.html b/index.html
index b838076..68f7067 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,6 @@
saveload
- shaderdoc _ advanced
@@ -82,26 +81,12 @@