Building the Line tool

sources/index.html

@@ -4,6 +4,7 @@
     <script type="text/javascript" src="scripts/modules/frame.js"></script>
     <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/modules/line.js"></script>
 
     <script type="text/javascript" src="scripts/grid.js"></script>
     <script type="text/javascript" src="scripts/io.js"></script>

sources/scripts/commander.js

@@ -12,10 +12,8 @@ function Commander()
     this.input_el.focus();
   }
 
-  this.validate = function(query_str = ronin.commander.input_el.value)
+  this.validate = function(q = ronin.commander.query())
   {
-    var q = new Query(query_str);
-
     if(!ronin.modules[q.module]){ console.log("Unknown module",q.module); return; }
 
     // Update settings
@@ -47,4 +45,19 @@ function Commander()
   {
     this.input_el.blur();
   }
+
+  this.active_module = function()
+  {
+    return this.query().module;
+  }
+
+  this.inject = function(str,entry_code = "$")
+  {
+    ronin.commander.input_el.value = ronin.commander.input_el.value.replace(entry_code,str);
+  }
+
+  this.query = function()
+  {
+    return new Query(ronin.commander.input_el.value);
+  }
 }

sources/scripts/cursor.js

@@ -7,6 +7,7 @@ function Cursor(rune)
   {
     e.preventDefault();
 
+    ronin.cursor.line.origin = {x:e.clientX,y:e.clientY};
     ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
   }
 
@@ -18,7 +19,10 @@ function Cursor(rune)
 
     ronin.cursor.line.to = {x:e.clientX,y:e.clientY};
 
-    if(e.altKey){
+    if(ronin.commander.active_module()){
+
+    }
+    else if(e.altKey){
       ronin.eraser.stroke(ronin.cursor.line);
     }
     else{
@@ -32,7 +36,21 @@ function Cursor(rune)
   {   
     e.preventDefault();
     
+    ronin.cursor.line.destination = {x:e.clientX,y:e.clientY};
+
+    if(distance_between(ronin.cursor.line.origin,ronin.cursor.line.destination) > 10){
+      ronin.commander.inject(e.clientX+"x"+e.clientY);
+    }
+    else{
+      ronin.commander.inject(e.clientX+","+e.clientY);
+    }
+    
     ronin.cursor.is_down = false;
     ronin.cursor.line = {};
   }
+
+  function distance_between(a,b)
+  {
+    return Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) );
+  }
 }

sources/scripts/modules/brush.js

@@ -2,7 +2,7 @@ function Brush()
 {
   Module.call(this,"brush");
 
-  this.settings = {size:1,color:"#f00",opacity:1.0};
+  this.settings = {size:4,color:"#000",opacity:1.0};
 
   this.pointers = [
     new Pointer({offset:{x:0,y:0}}),
@@ -14,7 +14,7 @@ function Brush()
 
   this.ports.speed = 0;
   this.ports.distance = 0;
-  this.ports.red = 255;
+  this.ports.red = 0;
   this.ports.green = 0;
   this.ports.blue = 0;
   this.ports.alpha = 1;

sources/scripts/modules/line.js

@@ -0,0 +1,87 @@
+function Line()
+{
+  Module.call(this,"line");
+
+  this.settings = {steps:20};
+
+  this.methods = {};
+
+  this.methods.tween = function(q)
+  {
+    var from = parse_sequence(q.split(">>")[0]);
+    var to = parse_sequence(q.split(">>")[1]);
+
+    var s = 0;
+    while(s < ronin.line.settings.steps){
+      var progress = s/parseFloat(ronin.line.settings.steps);
+      var new_positions = tween_positions(from,to,progress);
+      ronin.line.stroke_multi(new_positions);
+      s += 1;
+    }
+  }
+
+  this.stroke_multi = function(coordinates)
+  {
+    var from = coordinates[0];
+    for(pos_id in coordinates){
+      var pos = coordinates[pos_id];
+      ronin.line.stroke(from,pos);
+      from = pos;
+    }
+  }
+
+  this.stroke = function(from,to)
+  {
+    var ctx = ronin.render.context();
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo((from.x * 2),(from.y * 2));
+    ctx.lineTo((to.x * 2),(to.y * 2));
+    ctx.lineCap="round";
+    ctx.lineWidth = 4;
+    ctx.strokeStyle = "#000";
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  function parse_sequence(seq_str)
+  {
+    var a = [];
+
+    var parts = seq_str.split("&");
+    for(part_id in parts){
+      var part = parts[part_id];
+      a.push(parse_unit(part));
+    }
+    return a;
+  }
+
+  function parse_unit(unit_str)
+  {
+    if(unit_str.indexOf(",") > -1){
+      return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1])};
+    }
+    if(unit_str.indexOf("x") > -1){
+      return {width:parseInt(unit_str.split("x")[0]),height:parseInt(unit_str.split("x")[1])};
+    }
+  }
+
+  function tween_positions(froms,tos,progress)
+  {
+    var a = [];
+    for(pos_id in froms){
+      var from = froms[pos_id];
+      var to = tos[pos_id];
+      a.push(tween_position(from,to,progress));
+    }
+
+    return a;
+  }
+
+  function tween_position(from,to,progress)
+  {
+    var offset = {x:to.x - from.x,y:to.y - from.y};
+    return {x:from.x + offset.x * progress,y:from.y + offset.y * progress};
+  }
+}

sources/scripts/ronin.js

@@ -14,11 +14,13 @@ function Ronin()
   this.brush = new Brush();
   this.eraser = new Eraser();
   this.frame = new Frame();
+  this.line = new Line();
 
   this.modules = {
     brush : this.brush,
     eraser : this.eraser,
     frame : this.frame,
+    line : this.line,
   };
   
   this.install = function()
@@ -46,5 +48,7 @@ function Ronin()
     console.log("Ronin","Started");
     this.render.update();
     this.grid.update();
+
+    this.commander.input_el.value = "line tween:$&$&$>>$&$&$"
   }
 }