shader

3 files changed, 41 insertions, 10 deletions

diff --git a/index.html b/index.html
index 3cb02b1..f049247 100644
--- a/index.html
+++ b/index.html
@@ -24,12 +24,23 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
   <span id="text_el" class="tool">text</span>
 
   brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span>
+  canvas size: <span id="canvas_width_el" class="ed">5</span> x <span id="canvas_height_el" class="ed">5</span>
 </div>
 </div>
 
 </body>
-
+<script type="text/javascript-shader" id="demo_shader">
+	if (x > y || y > x + 20 || x > y / 4 + 10) {
+		lex.clear()
+	}
+	else {
+		lex.bg = x+y*y
+		lex.fg = (x+y)%2
+		lex.char = ":"
+	}
+</script>
 <script src="js/lex.js"></script>
 <script src="js/matrix.js"></script>
 <script src="js/tool.js"></script>
+<script src="js/shader.js"></script>
 <script src="js/app.js"></script>
diff --git a/js/app.js b/js/app.js
index 3f2a206..4c5100a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -22,14 +22,9 @@ function init () {
 function build () {
 	canvas = new Matrix (cols, rows, function(x,y){
 		var lex = new Lex (x,y)
-		if (x > y || y > x + 20 || x > y / 4 + 10) {
-			lex.clear()
-		}
-		else {
-			lex.bg = x+y*y
-			lex.fg = (x+y)%2
-			lex.char = ":"
-		}
+		//
+		shader(lex, x, y)
+		//
 		lex.build()
 		return lex
 	})
@@ -90,6 +85,8 @@ function build () {
 	
 	controls.width = new Lex (width_el)
 	controls.height = new Lex (height_el)
+	controls.canvas_width = new Lex (canvas_width_el)
+	controls.canvas_height = new Lex (canvas_height_el)
 	
   controls.circle.focus()
 
@@ -144,7 +141,7 @@ function bind () {
     dragging = erasing = false
   });
   
-	[controls.width, controls.height].forEach(function(lex){
+	[controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){
   	lex.span.addEventListener('mousedown', function(e){
 			lex.focus()
 		})
@@ -170,6 +167,22 @@ function bind () {
 		brush.h = n
 		brush.rebuild()
 	})
+
+	controls.canvas_width.key = int_key(function(n, keyCode){
+		controls.canvas_width.blur()
+		controls.canvas_width.char = ""+n
+		controls.canvas_width.build()
+		brush.w = n
+		brush.rebuild()
+	})
+	controls.canvas_height.key = int_key(function(n, keyCode){
+		controls.canvas_height.blur()
+		controls.canvas_height.char = ""+n
+		controls.canvas_height.build()
+		brush.h = n
+		brush.rebuild()
+	})
+
 	window.addEventListener('keydown', function(e){
 		if (! e.metaKey && ! e.ctrlKey && ! e.altKey) {
 			e.preventDefault()
diff --git a/js/shader.js b/js/shader.js
new file mode 100644
index 0000000..a6937b7
--- /dev/null
+++ b/js/shader.js
@@ -0,0 +1,7 @@
+(function(){
+
+	var fn_str = demo_shader.innerHTML
+	var shader = new Function('lex', 'x', 'y', fn_str)
+
+	window.shader = shader
+})()
\ No newline at end of file