shader

author: Jules Laplace <jules@okfoc.us> 2014-11-22 11:44:05 -0500
committer: Jules Laplace <jules@okfoc.us> 2014-11-22 11:44:05 -0500
commit: dd8a053f9845d4adeb8540f24d1e8d46def35ad3 (patch)
tree: d61188f3f87ddc3023709667a659f867506a5ead
parent: 2464f6e5d4d190631efbb738e56d9c2c810f7ced (diff)
6 files changed, 163 insertions, 14 deletions
diff --git a/index.html b/index.html
index c1c250a..3a6d1a7 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@ 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; }
+#shader_textarea { display: none; width: 400px; height: 400px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; }
 </style>
 
 <body class="grid loading">
@@ -35,7 +35,6 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
 </div>
 <textarea id="shader_textarea"></textarea>
 </div>
-
 </body>
 <script type="text/javascript-shader" id="demo_shader">
 	lex.bg = colors[color_hue_order[Math.floor((x+y*y)/20)%16]]
@@ -53,6 +52,7 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
 	}
 */
 </script>
+<script src="js/util.js"></script>
 <script src="js/lex.js"></script>
 <script src="js/matrix.js"></script>
 <script src="js/tool.js"></script>
diff --git a/js/app.js b/js/app.js
index 84333e9..9cd9cf8 100644
--- a/js/app.js
+++ b/js/app.js
@@ -24,12 +24,12 @@ function init () {
 function build () {
 	canvas = new Matrix (cols, rows, function(x,y){
 		var lex = new Lex (x,y)
-		//
-		shader(lex, x, y)
-		//
-		lex.build()
+//		lex.build()
 		return lex
 	})
+	shader.init()
+	shader.run(canvas)
+
 	brush = new Matrix (5, 5, function(x,y){
 		var lex = new Lex (x,y)
 		lex.build()
@@ -98,11 +98,17 @@ function build () {
 	controls.shader = new Tool (shader_el)
 	controls.shader.use = function(){
 		shader_textarea.style.display = "block"
+		setTimeout(function(){ shader_textarea.focus() })
 	}
 	controls.shader.blur = function(){
 		Tool.prototype.blur.call(this)
 		shader_textarea.style.display = "none"		
 	}
+	shader_textarea.value = demo_shader.innerHTML
+	shader_textarea.addEventListener("input", function(){
+		var fn = shader.build(shader_textarea.value)
+		fn && shader.run(canvas)
+	})
 	
 	controls.width = new Lex (width_el)
 	controls.height = new Lex (height_el)
@@ -194,6 +200,7 @@ function bind () {
 		controls.canvas_width.build()
 		canvas.w = n
 		canvas.rebuild()
+		canvas.build()
 	})
 	controls.canvas_height.key = int_key(function(n, keyCode){
 		controls.canvas_height.read()
@@ -204,12 +211,17 @@ function bind () {
 		controls.canvas_height.build()
 		canvas.h = n
 		canvas.rebuild()
+		canvas.build()
 	})
 
 	window.addEventListener('keydown', function(e){
+		if (current_tool.name == "shader") {
+			return
+		}
 		if (! e.metaKey && ! e.ctrlKey && ! e.altKey) {
 			e.preventDefault()
 		}
+		
 		// console.log(e.keyCode)
 		switch (e.keyCode) {
 			case 27: // esc
diff --git a/js/draw.js b/js/draw.js
index cb7f816..6ccdda7 100644
--- a/js/draw.js
+++ b/js/draw.js
@@ -16,4 +16,3 @@ function stamp (canvas, brush, x, y, erasing) {
 		}
 	})
 }
-
diff --git a/js/lex.js b/js/lex.js
index e98538c..7066ddb 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -16,7 +16,7 @@ Lex.prototype.build = function(){
 	this.span.innerHTML = this.html()
 }
 Lex.prototype.css = function(){
-	return "f" + letters[this.fg&15] + "b" + letters[this.bg&15]
+	return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,15)]
 }
 Lex.prototype.html = function(){
 	return this.char == " " ? "&nbsp;" : this.char || "&nbsp;"
diff --git a/js/shader.js b/js/shader.js
index a6937b7..b829a0d 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -1,7 +1,29 @@
-(function(){
+var shader = (function(){
+	var fn_str, fn, lex
+	var exports = {}
+	
+	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)
+		try {
+			new_fn(lex, 0, 0)
+		}
+		catch (e) {
+			throw 'Shader execution error'
+		}
+		exports.fn = fn = new_fn
+		return fn
+	}
+	exports.run = function(canvas){
+		canvas.forEach(function(lex, y, x){
+			fn(lex, x, y)
+			lex.build()
+		})
+	}
+	
+	return exports
 
-	var fn_str = demo_shader.innerHTML
-	var shader = new Function('lex', 'x', 'y', fn_str)
-
-	window.shader = shader
-})()
-\ No newline at end of file
+})()
diff --git a/js/util.js b/js/util.js
new file mode 100644
index 0000000..fac0faf
--- /dev/null
+++ b/js/util.js
@@ -0,0 +1,116 @@
+if (window.$) {
+  $.fn.int = function(){ return parseInt($(this).val(),10) }
+  $.fn.float = function(){ return parseFloat($(this).val()) }
+  $.fn.string = function(){ return trim($(this).val()) }
+  $.fn.enable = function() { return $(this).attr("disabled",null) }
+  $.fn.disable = function() { return $(this).attr("disabled","disabled") }
+}
+
+function noop(){}
+function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
+
+var E = Math.E
+var PI = Math.PI
+var PHI = (1+Math.sqrt(5))/2
+var TWO_PI = PI*2
+var LN10 = Math.LN10
+function clamp(n,a,b){ return n<a?a:n<b?n:b }
+function norm(n,a,b){ return (n-a) / (b-a) }
+function lerp(n,a,b){ return (b-a)*n+a }
+function mix(n,a,b){ return a*(1-n)+b*n }
+function ceil(n){ return Math.ceil(n) }
+function floor(n){ return Math.floor(n) }
+function round(n){ return Math.round(n) }
+function max(a,b){ return Math.max(a,b) }
+function min(a,b){ return Math.min(a,b) }
+function abs(n){ return Math.abs(n) }
+function sign(n){ return Math.abs(n)/n }
+function pow(n,b) { return Math.pow(n,b) }
+function exp(n) { return Math.exp(n) }
+function log(n){ return Math.log(n) }
+function ln(n){ return Math.log(n)/LN10 }
+function sqrt(n) { return Math.sqrt(n) }
+function cos(n){ return Math.cos(n) }
+function sin(n){ return Math.sin(n) }
+function tan(n){ return Math.tan(n) }
+function acos(n){ return Math.cos(n) }
+function asin(n){ return Math.sin(n) }
+function atan(n){ return Math.atan(n) }
+function atan2(n){ return Math.atan2(n) }
+function sec(n){ return 1/cos(n) }
+function csc(n){ return 1/sin(n) }
+function cot(n){ return 1/tan(n) }
+function cosp(n){ return (1+Math.cos(n))/2 } // cos^2
+function sinp(n){ return (1+Math.sin(n))/2 }
+function random(){ return Math.random() }
+function rand(n){ return (Math.random()*n) }
+function randint(n){ return rand(n)|0 }
+function randrange(a,b){ return a + rand(b-a) }
+function randsign(){ return random() >= 0.5 ? -1 : 1 }
+function choice(a){ return a[randint(a.length)] }
+function deg(n){ return n*180/PI }
+function rad(n){ return n*PI/180 }
+function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) }
+function mod(n,m){ return n-(m * floor(n/m)) }
+function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) }
+function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) }
+function avg(m,n,a){ return (m*(a-1)+n)/a }
+function quantize(a,b){ return ~~(a/b)*b }
+
+function pixel(x,y){ return 4*(mod(y,actual_h)*actual_w+mod(x,actual_w)) }
+function rgbpixel(d,x,y){
+  var p = pixel(~~x,~~y)
+  r = d[p]
+  g = d[p+1]
+  b = d[p+2]
+  a = d[p+3]
+}
+function fit(d,x,y){ rgbpixel(d,x*actual_w/w,y*actual_h/h) }
+
+function step(a, b){
+  return (b >= a) + 0 
+               // ^^ bool -> int
+}
+
+
+function julestep (a,b,n) {
+  return clamp(norm(n,a,b), 0.0, 1.0);
+}
+
+// hermite curve apparently
+function smoothstep(min,max,n){
+  var t = clamp((n - min) / (max - min), 0.0, 1.0);
+  return t * t * (3.0 - 2.0 * t)
+}
+
+function shuffle(a){
+  for (var i = a.length; i > 0; i--){
+    var r = randint(i)
+    var swap = a[i-1]
+    a[i-1] = a[r]
+    a[r] = swap
+  }
+  return a
+}
+function reverse(a){
+  var reversed = []
+  for (var i = 0, _len = a.length-1; i <= _len; i++){
+    reversed[i] = a[_len-i]
+  }
+  return reversed
+}
+function deinterlace(a){
+  var odd = [], even = []
+  for (var i = 0, _len = a.length; i < _len; i++) {
+    if (i % 2) even.push(a[i])
+    else odd.push(a[i])
+  }
+  return [even, odd]
+}
+function weave(a){
+  var aa = deinterlace(a)
+  var b = []
+  aa[0].forEach(function(el){ b.push(el) })
+  reverse(aa[1]).forEach(function(el){ b.push(el) })
+  return b
+}
+\ No newline at end of file
author	Jules Laplace <jules@okfoc.us>	2014-11-22 11:44:05 -0500
committer	Jules Laplace <jules@okfoc.us>	2014-11-22 11:44:05 -0500
commit	dd8a053f9845d4adeb8540f24d1e8d46def35ad3 (patch)
tree	d61188f3f87ddc3023709667a659f867506a5ead
parent	2464f6e5d4d190631efbb738e56d9c2c810f7ced (diff)