Further experiments with procedural scripts.

sources/links/main.css

@@ -3,7 +3,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 
 yu { display:block; }
 
-#ronin { background:#444; height: 100vh; width:100vw; }
+#ronin { background:#eee; height: 100vh; width:100vw; }
 #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: white; margin-left:20px; }
+#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: white; 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; }
+#hint b { font-family: 'input_mono_regular' }

sources/scripts/commander.js

@@ -32,6 +32,8 @@ function Commander()
       ronin.modules[q.module][method_id].run(method_param);
     }
 
+    ronin.modules[q.module].routes = q.routes;
+
     ronin.commander.input_el.value = "";
     ronin.hint.update();
   }

sources/scripts/hint.js

@@ -17,7 +17,7 @@ function Hint()
       var module = ronin.modules[module_id];
       html += module.hint()+" ";
     }
-    this.el.innerHTML = this.pad(ronin.commander.input_el.value)+html;
+    this.el.innerHTML = this.pad(ronin.commander.input_el.value)+(ronin.commander.input_el.value == "" ? html : "");
   }
 
   this.pad = function(input)

sources/scripts/module.js

@@ -1,6 +1,9 @@
 function Module(name)
 {
   this.name = name;
+  this.settings = {};
+  this.routes = {};
+  this.ports = {};
 
   this.hint = function()
   {
@@ -11,6 +14,11 @@ function Module(name)
       html += setting_id+"="+setting_value+" ";
     }
 
-    return this.name+"["+html.trim()+"]";
+    for(route_id in this.routes){
+      var route_val = this.routes[route_id];
+      html += route_val+"->"+route_id;
+    }
+
+    return html.trim() != "" ? "<b>"+this.name+"</b> "+html.trim() : "";
   }
 }

sources/scripts/modules/brush.js

@@ -2,28 +2,81 @@ function Brush()
 {
   Module.call(this,"brush");
 
-  this.settings = {size:10,color:"#f00"};
+  this.settings = {size:1,color:"#f00",opacity:1.0};
+
+  this.pointers = [
+    new Pointer({offset:{x:0,y:0}}),
+    new Pointer({offset:{x:2,y:2}}),
+    new Pointer({offset:{x:4,y:4}}),
+  ];
+
+  // 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.noise = 0;
 
   this.thickness = function(line)
   {
-    var ratio = 1 - (distance_between(line.from,line.to)/15.0);
+    if(this.ports[this.routes.thickness]){
-    return this.settings.size * ratio;
+      return this.ports[this.routes.thickness] * this.settings.size;  
+    }
+    return this.settings.size;
+  }
+
+  this.offset = function(line)
+  {
+    if(this.ports[this.routes.offset]){
+      return this.ports[this.routes.offset] * this.settings.size;  
+    }
+    return 1;
+  }
+
+  this.red = function(line)
+  {
+    if(this.ports[this.routes.red]){
+      return this.ports[this.routes.red] * 255;  
+    }
+    return this.ports.red;
+  }
+
+  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;
+  }
+
+  this.blue = function(line)
+  {
+    if(this.ports[this.routes.blue]){
+      return this.ports[this.routes.blue] * 255;  
+    }
+    return this.ports.blue;
+  }
+
+  this.alpha = function(line)
+  {
+    return 1;
   }
 
   this.stroke = function(line)
   {
     ronin.commander.blur();
-    var ctx = ronin.render.context();
 
-    ctx.beginPath();
+    this.ports.speed = distance_between(line.from,line.to)/15.0;
-    ctx.globalCompositeOperation="source-over";
+    this.ports.distance += this.ports.speed;
-    ctx.moveTo(line.from.x * 2,line.from.y * 2);
+    this.ports.noise = Math.random(255);
-    ctx.lineTo(line.to.x * 2,line.to.y * 2);
+
-    ctx.lineCap="round";
+    for(pointer_id in this.pointers){
-    ctx.lineWidth = this.thickness(line);
+      this.pointers[pointer_id].stroke(line);
-    ctx.strokeStyle = this.settings.color;
+    }
-    ctx.stroke();
-    ctx.closePath();
   }
 
   this.mod_size = function(mod)
@@ -41,3 +94,40 @@ function Brush()
     return Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) );
   }
 }
+
+function Pointer(options)
+{
+  this.options = options;
+
+  this.thickness = function(line)
+  {
+    return ronin.brush.thickness(line);
+  }
+
+  this.color = function(line)
+  {
+    return ronin.brush.settings.color;
+  }
+
+  this.stroke = function(line)
+  {
+    var ctx = ronin.render.context();
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo((line.from.x * 2) + (this.options.offset.x * ronin.brush.offset(line)),(line.from.y * 2) + (this.options.offset.y * ronin.brush.offset(line)));
+    ctx.lineTo((line.to.x * 2) + (this.options.offset.x * ronin.brush.offset(line)),(line.to.y * 2) + (this.options.offset.y * ronin.brush.offset(line)));
+    ctx.lineCap="round";
+    ctx.lineWidth = this.thickness(line);
+    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)
+  { 
+    return v < min ? min : v > max ? max : v; 
+  }
+}

sources/scripts/query.js

@@ -5,6 +5,7 @@ function Query(query_str)
   this.raw = parts.join(" ");
   this.methods = {};
   this.settings = {};
+  this.routes = {};
 
   for(part_id in parts){
     var part = parts[part_id];
@@ -13,10 +14,15 @@ function Query(query_str)
       var value = part.indexOf(":") > -1 ? part.split(":")[1] : part;
       this.methods[key] = value;
     }
-    if(part.indexOf("=") > -1){
+    else if(part.indexOf("=") > -1){
       var key = part.indexOf("=") > -1 ? part.split("=")[0] : "any";
       var value = part.indexOf("=") > -1 ? part.split("=")[1] : part;
       this.settings[key] = value;
     }
+    else if(part.indexOf("->") > -1){
+      var key = part.indexOf("->") > -1 ? part.split("->")[1] : "any";
+      var value = part.indexOf("->") > -1 ? part.split("->")[0] : part;
+      this.routes[key] = value;
+    }
   }
 }