Added rotation filter

index.html

@@ -30,12 +30,14 @@
     <script type="text/javascript" src="scripts/modules/render.js"></script>
     
     <script type="text/javascript" src="scripts/filters/filter.js"></script>
+    <script type="text/javascript" src="scripts/filters/stencil.js"></script>
+    <script type="text/javascript" src="scripts/filters/rotate.js"></script>
+    <!-- Need to migrate -->
     <script type="text/javascript" src="scripts/filters/saturation.js"></script>
     <script type="text/javascript" src="scripts/filters/chromatic.js"></script>
     <script type="text/javascript" src="scripts/filters/offset.js"></script>
     <script type="text/javascript" src="scripts/filters/eval.js"></script>
     <script type="text/javascript" src="scripts/filters/balance.js"></script>
-    <script type="text/javascript" src="scripts/filters/stencil.js"></script>
     
     <script type="text/javascript" src="scripts/core/keyboard.js"></script>
     <script type="text/javascript" src="scripts/core/cursor.js"></script>

scripts/core/commander.hint.js

@@ -22,39 +22,7 @@ function Hint(element)
   
   this.message = function(module,cmd)
   {
-    var s = this.pad(cmd.content.join(" "));
+    return module.hint(cmd);
-
-    s += cmd.content.join(" ").length == 0 ? "<span class='module'>"+module.constructor.name+"</span>" : "";
-
-    // Params
-
-    var e = 0;
-    while(e < 10){
-      if(!module.parameters[e]){ break; }
-      var param_name = module.parameters[e].name;
-      s += cmd[param_name.toLowerCase()]() ? "" : "<span class='param'>"+param_name+"</span>";
-      e += 1;
-    }
-
-    // Variables
-    if(module.variables){
-      for (var key in module.variables){
-        if(cmd.variable(key)){continue;}
-        s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+module.variables[key]+"</span> ";
-      }
-    }
-    
-    return s;
-  }
-
-  this.pad = function(input)
-  {
-    var s = "";
-    for (i = 0; i < input.length+2; i++){
-      s += "_";
-    }
-
-    return "<span style='color:#000'>"+s+"</span>";
   }
   
   this.default = function()

scripts/core/init.js

@@ -34,4 +34,10 @@ commander.query("~ "+ronin.timestamp());
 commander.query("# "+starting_canvas.render());
 commander.query("# layer=render");
 commander.query("# layer=main");
-commander.query("> 1 0,0 #000000");
+commander.query("> 1 0,0 #000000");
+// commander.query("# #999");
+// commander.query("> #0000ff");
+// commander.query("_ 0,100 360,100");
+// commander.query("> #ff00ff");
+// commander.query("_ 180,0 180,200");
+// commander.query("%rotate");

scripts/filters/rotate.js

@@ -0,0 +1,42 @@
+function Filter_Rotate()
+{
+  Filter.call(this);
+  this.parameters = [Angle,Position];
+
+  this.render = function(cmd)
+  {
+    var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width/2,ronin.surface.size.height/2);
+    var angle = cmd.angle() ? cmd.angle().degrees : 90;
+
+    ronin.overlay.clear();
+    this.draw(this.context(),angle,position);
+    ronin.overlay.clear();
+  }
+
+  this.preview = function(cmd)
+  {
+    if(cmd.position()){
+      ronin.overlay.clear();
+      ronin.overlay.draw_pointer(cmd.position());
+    }
+  }
+
+  this.draw = function(context = this.context(), angle, position)
+  {
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+
+    ronin.overlay.context().drawImage(context.canvas,0,0,w,h);
+
+    ronin.surface.active_layer.clear();
+
+    context.save();
+    context.translate(position.x,position.y);
+    context.rotate(angle*Math.PI/180);
+
+    context.drawImage(ronin.overlay.context().canvas, -position.x, -position.y,w,h)
+
+    context.rotate(-angle*Math.PI/180);
+    context.restore();
+  }
+}

scripts/filters/stencil.js

@@ -1,6 +1,7 @@
 function Filter_Stencil()
 {
   Filter.call(this);
+  this.parameters = [Angle];
 
   this.render = function(cmd)
   {

scripts/modules/module.js

@@ -27,7 +27,39 @@ function Module(rune)
   
   this.hint = function(cmd)
   {
-    return "unknown";
+    var s = this.pad(cmd.content.join(" "));
+
+    s += cmd.content.join(" ").length == 0 ? "<span class='module'>"+this.constructor.name+"</span>" : "";
+
+    // Params
+
+    var e = 0;
+    while(e < 10){
+      if(!this.parameters[e]){ break; }
+      var param_name = this.parameters[e].name;
+      s += cmd[param_name.toLowerCase()]() ? "" : "<span class='param'>"+param_name+"</span>";
+      e += 1;
+    }
+
+    // Variables
+    if(this.variables){
+      for (var key in this.variables){
+        if(cmd.variable(key)){continue;}
+        s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+this.variables[key]+"</span> ";
+      }
+    }
+    
+    return s;
+  }
+
+  this.pad = function(input)
+  {
+    var s = "";
+    for (i = 0; i < input.length+2; i++){
+      s += "_";
+    }
+
+    return "<span style='color:#000'>"+s+"</span>";
   }
   
   this.widget = function()

scripts/modules/render.js

@@ -6,14 +6,13 @@ function Render(rune)
   this.collection = {};
 
   this.collection["stencil"] = new Filter_Stencil();
+  this.collection["rotate"] = new Filter_Rotate();
   
   this.active = function(cmd)
   {
     var name = cmd.content[0];
 
-    if(!this.collection[name]){ console.log("Unknown filter:"+name); return; }
+    if(!this.collection[name]){ return; }
-
-    cmd.content.shift();
     
     return this.collection[name].render(cmd);
   }
@@ -21,11 +20,8 @@ function Render(rune)
   this.passive = function(cmd)
   {
     var name = cmd.content[0];
-    if(!this.collection[name]){ console.log("Unknown filter:"+name); return; }
+    if(!this.collection[name]){ return; }
 
-    cmd.content.shift();
-
-    console.log(name);
     return this.collection[name].preview(cmd);
   }
 	

scripts/modules/stroke.js

@@ -52,8 +52,8 @@ function Stroke(rune)
     ronin.surface.context().moveTo(pos1.x,pos1.y);
     ronin.surface.context().lineTo(pos2.x,pos2.y);
     ronin.surface.context().lineCap="round";
-    ronin.surface.context().lineWidth = 1;
+    ronin.surface.context().lineWidth = 10;
-    ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
+    ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
     ronin.surface.context().stroke();
     ronin.surface.context().closePath();
   }