Added grid

sources/index.html

@@ -5,6 +5,7 @@
     <script type="text/javascript" src="scripts/modules/brush.js"></script>
     <script type="text/javascript" src="scripts/modules/eraser.js"></script>
 
+    <script type="text/javascript" src="scripts/grid.js"></script>
     <script type="text/javascript" src="scripts/io.js"></script>
     <script type="text/javascript" src="scripts/query.js"></script>
     <script type="text/javascript" src="scripts/keyboard.js"></script>

sources/links/main.css

@@ -4,6 +4,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 yu { display:block; }
 
 #ronin { background:#eee; height: 100vh; width:100vw; }
+#grid { z-index:1;position: fixed; }
+#render { z-index:800; position: fixed; }
 #commander { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px;  -webkit-user-select: none;-webkit-app-region: drag; z-index:900;}
 #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 20px;font-size: 11px;color: black; margin-left:20px; }
 #hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: #999; margin-left:20px; }

sources/scripts/grid.js

@@ -0,0 +1,61 @@
+function Grid()
+{
+  this.el = document.createElement('canvas'); this.el.id = "grid";
+
+  this.install = function()
+  {
+    ronin.el.appendChild(this.el);
+  }
+
+  this.update = function()
+  {
+    this.el.width = window.innerWidth * 2;
+    this.el.height = window.innerHeight * 2;
+    this.el.style.width = (window.innerWidth)+"px";
+    this.el.style.height = (window.innerHeight)+"px";
+
+    this.draw();
+  }
+
+  this.draw = function()
+  {
+    var size = 60;
+    var x = 1;
+    while(x < this.el.width/size){
+      var y = 1;
+      while(y < (this.el.height/size)-1){
+        this.draw_vertex(x * size,y * size)
+        y += 1;
+      }
+      x += 1;
+    }
+  }
+
+  this.draw_vertex = function(x,y)
+  {
+    var ctx = this.context();
+    var r = 1.5;
+    ctx.beginPath();
+    ctx.arc(x, y, 1.5, 0, 2 * Math.PI, false);
+    ctx.fillStyle = '#ccc';
+    ctx.fill();
+  }
+
+  this.context = function()
+  {
+    return this.el.getContext('2d');
+  }
+
+  this.resize_to = function(size)
+  {
+    this.el.width = size.width * 2;
+    this.el.height = size.height * 2;
+    this.el.style.width = size.width+"px";
+    this.el.style.height = size.height+"px";
+  }
+
+  this.clear = function()
+  {
+    ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
+  }
+}

sources/scripts/keyboard.js

@@ -8,20 +8,29 @@ function Keyboard()
   this.key_down = function(e)
   {
     if(e.key == "Enter"){
+      e.preventDefault();
       ronin.commander.validate();
     }
     
     if(e.key == "Escape"){
+      e.preventDefault();
       ronin.commander.input_el.blur();;
     }
 
     if(e.key == "]"){
+      e.preventDefault();
       ronin.brush.mod_size(1);
     }
     if(e.key == "["){
+      e.preventDefault();
       ronin.brush.mod_size(-1);
     }
 
+    if(e.key == "n" && (e.ctrlKey || e.metaKey)){
+      e.preventDefault();
+      ronin.render.clear();
+    }
+
     ronin.hint.update(e);
   }
 }

sources/scripts/module.js

@@ -16,9 +16,11 @@ function Module(name)
 
     for(route_id in this.routes){
       var route_val = this.routes[route_id];
-      html += route_val+"->"+route_id;
+      html += route_val+"->"+route_id+" ";
     }
 
+    console.log(this.name,this.settings);
+
     return html.trim() != "" ? "<b>"+this.name+"</b> "+html.trim() : "";
   }
 }

sources/scripts/modules/brush.js

@@ -6,18 +6,19 @@ function Brush()
 
   this.pointers = [
     new Pointer({offset:{x:0,y:0}}),
-    new Pointer({offset:{x:2,y:2}}),
+    new Pointer({offset:{x:1,y:0}}),
-    new Pointer({offset:{x:4,y:4}}),
+    new Pointer({offset:{x:-1,y:0}}),
+    new Pointer({offset:{x:0,y:1}}),
+    new Pointer({offset:{x:0,y:-1}}),
   ];
 
-  // brush speed->blue speed->thickness noise->green
-
   this.ports.speed = 0;
   this.ports.distance = 0;
   this.ports.red = 255;
   this.ports.green = 0;
   this.ports.blue = 0;
   this.ports.alpha = 1;
+  this.ports.x = 1;
   this.ports.noise = 0;
 
   this.thickness = function(line)
@@ -31,7 +32,7 @@ function Brush()
   this.offset = function(line)
   {
     if(this.ports[this.routes.offset]){
-      return this.ports[this.routes.offset] * this.settings.size;  
+      return this.ports[this.routes.offset];  
     }
     return 1;
   }
@@ -47,7 +48,6 @@ function Brush()
   this.green = function(line)
   {
     if(this.ports[this.routes.green]){
-      console.log(this.ports[this.routes.green])
       return this.ports[this.routes.green] * 255;  
     }
     return this.ports.green;
@@ -63,7 +63,10 @@ function Brush()
 
   this.alpha = function(line)
   {
-    return 1;
+    if(this.ports[this.routes.alpha]){
+      return this.ports[this.routes.alpha];  
+    }
+    return this.ports.alpha;
   }
 
   this.stroke = function(line)
@@ -72,7 +75,8 @@ function Brush()
 
     this.ports.speed = distance_between(line.from,line.to)/15.0;
     this.ports.distance += this.ports.speed;
-    this.ports.noise = Math.random(255);
+    this.ports.noise = Math.random(255/255.0);
+    this.ports.x = line.from.x/2;
 
     for(pointer_id in this.pointers){
       this.pointers[pointer_id].stroke(line);
@@ -122,8 +126,6 @@ function Pointer(options)
     ctx.strokeStyle = "rgba("+clamp(parseInt(ronin.brush.red()),0,255)+","+clamp(parseInt(ronin.brush.green()),0,255)+","+clamp(parseInt(ronin.brush.blue()),0,255)+","+ronin.brush.alpha()+")";
     ctx.stroke();
     ctx.closePath();
-
-    console.log("rgba("+clamp(parseInt(ronin.brush.red()),0,255)+","+clamp(parseInt(ronin.brush.green()),0,255)+","+clamp(parseInt(ronin.brush.blue()),0,255)+","+ronin.brush.alpha()+")");
   }
 
   function clamp(v, min, max)

sources/scripts/modules/frame.js

@@ -1,4 +1,6 @@
 function Frame()
 {
   Module.call(this,"frame");
+  
+  this.settings = {width:200,height:200};
 }

sources/scripts/render.js

@@ -1,6 +1,6 @@
 function Render()
 {
-  this.el = document.createElement('canvas');
+  this.el = document.createElement('canvas'); this.el.id = "render";
 
   this.install = function()
   {
@@ -27,4 +27,9 @@ function Render()
     this.el.style.width = size.width+"px";
     this.el.style.height = size.height+"px";
   }
+
+  this.clear = function()
+  {
+    ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
+  }
 }

sources/scripts/ronin.js

@@ -3,6 +3,7 @@ function Ronin()
   this.el = document.createElement('yu');
   this.el.id = "ronin";
 
+  this.grid = new Grid();
   this.io = new IO();
   this.keyboard = new Keyboard();
   this.commander = new Commander();
@@ -24,6 +25,7 @@ function Ronin()
   {
     document.body.appendChild(this.el);
 
+    this.grid.install();
     this.render.install();
     this.commander.install();
     this.hint.install();
@@ -43,6 +45,7 @@ function Ronin()
 
     console.log("Ronin","Started");
     this.render.update();
+    this.grid.update();
   }
 
   this.resize_to = function(size)