assets/*, index.html: removes shader feature due to lack of interest on #MiRCart & maintenance cost.

This commit is contained in:
Lucio Andrés Illanes Albornoz 2018-11-23 19:32:02 +01:00
parent 8bb9982b3b
commit 9bacadcb70
14 changed files with 6 additions and 694 deletions

View File

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

View File

@ -23,13 +23,6 @@ features of the asdf.us color code tool:
* <a href="tips.txt">tips.txt</a> - Tips on using the keyboard
* <a href="irssi.txt">irssi.txt</a> - Instructions on using IRSSI to make color codes.
Documents on Shaders
* <a href="shadetut.txt">shadetut.txt</a> - A brief tutorial on ASCII shaders.
* <a href="shaders/brush.txt">shaders/brush.txt</a> - Shaders designed to work on the brush
* <a href="shaders/canvas.txt">shaders/canvas.txt</a> - Shaders designed to work on the canvas
* <a href="shaders/util.txt">shaders/util.txt</a> - Miscellaneous utilities / snippets
For more information on IRC, Color Codes, and much more, visit the
<a href="http://jollo.org/LNT/doc/">documentation sitemap</a>, part of the <a href="http://jollo.org/">Jollo IRC Network</a>.

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

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]
lex = canvas.aa[y][x]
if (! dragging) return
shader_el.innerHTML = point.join(",")
if (drawing) {
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.memorable = true
controls.experimental_palette.use = function(state){

View File

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

View File

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

View File

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

View File

@ -63,7 +63,6 @@
<span id="save_el" class="tool">save</span>
<span id="load_el" class="tool">load</span>
<br>
<span id="shader_el" class="tool">shader</span>
<a id="doc_el" href="assets/doc/index.html" target="_blank">doc</a>
<br>
<span id="advanced_checkbox" class="tool">_ advanced</span>
@ -82,26 +81,12 @@
<div id="cutoff_warning_el">character limit of 425 exceeded</div>
<textarea id="import_textarea"></textarea>
</div>
<div id="shader_rapper">
<span id="animate_checkbox" class="tool">_ animate</span>
to <span id="shader_target_el">*canvas brush selection</span>
<span id="shader_fps_el" class="hidden faded"></span><br>
<textarea id="shader_textarea"></textarea>
</div>
</div>
</div>
<input type="text" id="cursor_input">
</body>
<script type="text/javascript-shader" id="demo_shader">
// lex.bg = hue((x+y*y+t/10)/20)
// lex.fg = colors.white
// lex.char = " "
// lex.opacity = 1
</script>
<script src="assets/js/ext/oktween.js"></script>
<script src="assets/js/ext/util.js"></script>