From 2e9fd149bc3aa622d3a9fe4fd3fea34e6df8e7e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucio=20Andr=C3=A9s=20Illanes=20Albornoz?= Date: Fri, 23 Nov 2018 19:32:02 +0100 Subject: [PATCH] assets/*, index.html: removes shader feature due to lack of interest on #MiRCart & maintenance cost. --- assets/css/sally.css | 2 - assets/doc/index.html | 7 - assets/doc/shaders/brush.txt | 126 ------------------ assets/doc/shaders/canvas.txt | 237 ---------------------------------- assets/doc/shaders/util.txt | 38 ------ assets/doc/shadetut.txt | 156 ---------------------- assets/js/app.js | 14 +- assets/js/gfx.js | 59 --------- assets/js/ui/canvas.js | 1 - assets/js/ui/controls.js | 35 ----- assets/js/ui/keys.js | 4 - assets/js/ui/tool.js | 4 +- assets/text/TODO | 2 +- index.html | 15 --- 14 files changed, 6 insertions(+), 694 deletions(-) delete mode 100644 assets/doc/shaders/brush.txt delete mode 100644 assets/doc/shaders/canvas.txt delete mode 100644 assets/doc/shaders/util.txt delete mode 100644 assets/doc/shadetut.txt 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 @@ save load
- shader doc
_ advanced @@ -82,26 +81,12 @@
character limit of 425 exceeded
- -
- _ animate - to *canvas brush selection -
- -
-