Improved commander hints.

scripts/modules/brush.js

@@ -0,0 +1,95 @@
+function Brush()
+{
+  Module.call(this);
+  
+  this.parameters = [Position,Rect,Angle,Color,Value,Bang];
+  this.pointers = [new Pointer(new Position())];
+  
+  this.position = new Position();
+  this.is_drawing = false;
+  this.size = 1;
+  this.opacity = 1;
+  this.color = new Color();
+  
+  // Module
+  
+  this.active = function(cmd)
+  {
+    if(cmd.bang()){ this.pointers = []; }
+    
+    var pointer = new Pointer();
+    
+    if(cmd.position()){
+      pointer.offset = cmd.position();
+    }
+    if(cmd.rect()){
+      pointer.mirror = cmd.rect();
+    }
+    if(cmd.variable("osc_scale") && cmd.variable("osc_rate")){
+      pointer.osc_rate  = parseFloat(cmd.variable("osc_rate"));
+      pointer.osc_scale = parseFloat(cmd.variable("osc_scale"));
+    }
+    if(cmd.angle()){
+      pointer.angle = cmd.angle();
+    }
+    if(cmd.rect() || cmd.position() || cmd.variable("osc_rate") || cmd.angle()){
+      this.add_pointer(pointer);
+    }
+    if(cmd.color()){
+      this.color = cmd.color();
+    }
+    if(cmd.value()){
+      this.size = cmd.value().float;
+    }
+  }
+  
+  this.passive = function(cmd)
+  {
+    if(cmd.rect()){
+      var x = isNaN(cmd.rect().width) ? 0 : cmd.rect().width;
+      var y = isNaN(cmd.rect().height) ? 0 : cmd.rect().height;
+      var pos = new Position(x+","+y);
+      ronin.overlay.draw(pos);
+    }
+    if(cmd.angle() && cmd.position()){
+      ronin.overlay.draw(cmd.position());
+    }
+  }
+  
+  this.add_pointer = function(pointer)
+  {
+    this.pointers.push(pointer);
+  }
+  
+  // Draw
+  
+  this.draw = function(e)
+  {
+    if(this.is_drawing === false){return;}
+    
+    this.position = new Position(e.clientX,e.clientY);
+    
+    for (i = 0; i < this.pointers.length; i++) {
+      this.pointers[i].draw();
+    }
+  }
+  
+  this.draw_start = function(e)
+  {
+    this.is_drawing = true;
+    
+    for (i = 0; i < this.pointers.length; i++) {
+      this.pointers[i].start();
+    }
+  }
+  
+  this.draw_stop = function(e)
+  {
+    this.is_drawing = false;
+    
+    for (i = 0; i < this.pointers.length; i++) {
+      this.pointers[i].stop();
+    }
+  }
+  
+}

scripts/modules/brush.pointer.js

@@ -0,0 +1,80 @@
+function Pointer(offset = new Position(), color = new Color('000000'))
+{
+  this.offset = offset;
+  this.mirror = null;
+  this.position_prev = null;
+  this.angle = null;
+  this.distance = 0;
+  
+  this.osc_scale = null;
+  this.osc_rate = null;
+  
+  this.draw = function()
+  {
+    if(!this.position_prev){this.position_prev = this.position(); }
+    if(ronin.brush.size < 0){ this.erase(); return; }
+    
+    var position = this.position();
+    
+    this.distance += position.distance_to(this.position_prev);
+    
+    // Osc experiment
+    if(this.osc_rate && this.osc_scale){
+      // position.x += (Math.sin(this.distance/(25 * this.osc_rate)) * this.osc_scale) - (this.osc_scale/2);
+      position.y += (Math.sin(this.distance/(25 * this.osc_rate)) * this.osc_scale) - (this.osc_scale/2);
+    }
+    
+    ronin.canvas.context().beginPath();
+    ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
+    ronin.canvas.context().lineTo(position.x,position.y);
+    ronin.canvas.context().lineCap="round";
+    ronin.canvas.context().lineWidth = this.thickness();
+    ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
+    ronin.canvas.context().stroke();
+    ronin.canvas.context().closePath();
+    
+    this.position_prev = position;
+  }
+  
+  this.erase = function()
+  {
+    ronin.canvas.context().clearRect(this.position().x - (ronin.brush.size/2), this.position().y - (ronin.brush.size/2), ronin.brush.size, ronin.brush.size);
+  }
+  
+  this.thickness = function()
+  {
+    var ratio = 10/this.position().distance_to(this.position_prev);
+    ratio = ratio > 1 ? 1 : ratio;
+    return ronin.brush.size * ratio;
+  }
+  
+  this.position = function()
+  {
+    if(this.angle){
+      var angle_radian = this.angle.degrees * Math.PI / 180;
+      var deltaX = ronin.brush.position.x - this.offset.x;
+      var deltaY = ronin.brush.position.y - this.offset.y;
+      var t = Math.atan2(deltaY, deltaX) + angle_radian;
+      var radius = ronin.brush.position.distance_to(this.offset);
+      var x = Math.cos(t) * radius;
+      var y = Math.sin(t) * radius;
+      return new Position(x + this.offset.x,y + this.offset.y);
+    }
+    else if(this.mirror && this.mirror.width > 0){
+      return new Position((2 * this.mirror.width) - (ronin.brush.position.x + this.offset.x), 0 + (ronin.brush.position.y + this.offset.y));
+    }
+    else if(this.mirror && this.mirror.height > 0){
+      return new Position((ronin.brush.position.x + this.offset.x), (2 * this.mirror.height) - (ronin.brush.position.y + this.offset.y));
+    }
+    return new Position(ronin.brush.position.x + this.offset.x, ronin.brush.position.y + this.offset.y);
+  }
+  
+  this.start = function()
+  {
+  }
+  
+  this.stop = function()
+  {
+    this.position_prev = null;
+  }
+}

scripts/modules/canvas.js

@@ -0,0 +1,49 @@
+function Canvas(element)
+{
+  Module.call(this);
+
+  this.parameters = [Rect,Color,Bang];
+  this.element = element;
+  
+  this.active = function(cmd)
+  {
+    if(cmd.bang()){ this.clear(); }
+    
+    if(cmd.rect()){
+      this.resize(cmd.rect());
+      ronin.overlay.resize(cmd.rect());
+    }
+    
+    if(cmd.color()){
+      this.context().beginPath();
+      this.context().rect(0, 0, this.element.width, this.element.height);
+      this.context().fillStyle = cmd.color().hex;
+      this.context().fill();
+    }
+  }
+  
+  this.passive = function(cmd)
+  {
+    if(cmd.rect()){
+      ronin.overlay.show_guide(null,cmd.rect());
+    }
+  }
+  
+  //
+  
+  this.resize = function(rect)
+  {
+    this.element.setAttribute('width',rect.width+"px");
+    this.element.setAttribute('height',rect.height+"px");
+  }
+  
+  this.context = function()
+  {
+    return this.element.getContext('2d');
+  }
+  
+  this.clear = function()
+  {
+    this.context().clearRect(0, 0, this.element.width, this.element.height);
+  }
+}

scripts/modules/file.js

@@ -0,0 +1,64 @@
+function File()
+{
+  Module.call(this);
+  
+  this.parameters = [Filepath,Position,Rect,Bang];
+  this.storage = [];
+  
+  this.active = function(cmd)
+  {
+    if(cmd.bang()){ this.storage = []; }
+    
+    ronin.overlay.clear();
+    
+    if(!cmd.filepath() && !cmd.value()){ return; }
+    
+    var position = cmd.position() ? cmd.position() : new Position();
+    
+    base_image = new Image();
+    base_image.src = cmd.value() && this.storage[cmd.value().int] ? this.storage[cmd.value().int] : cmd.filepath().path;
+    base_image.src += '?' + new Date().getTime();
+    base_image.crossOrigin = "Anonymous";
+    
+    base_image.onload = function(){
+      var width = base_image.naturalWidth;
+      var height = base_image.naturalHeight;
+      if(cmd.rect()){
+        width = cmd.rect().width;
+        height = cmd.rect().height;
+        position.normalize(cmd.rect());
+      }
+      // Scale with only 1 unit
+      width  = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width;
+      height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
+      
+      ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height);
+    }
+  }
+  
+  this.passive = function(cmd)
+  {
+    if(!cmd.filepath() && !cmd.value()){ return; }
+    
+    var position = cmd.position() ? cmd.position() : new Position();
+    
+    if(position && cmd.rect()){
+      ronin.overlay.draw(position,cmd.rect());
+    }
+    else if(position){
+      ronin.overlay.draw(position);
+    }
+  }
+  
+  this.save = function(cmd)
+  {
+    if(cmd.value() && cmd.value().int > 0){
+      this.storage[cmd.value().int] = ronin.canvas.element.toDataURL("image/png");
+    }
+    else{
+      var d = ronin.canvas.element.toDataURL("image/png");
+      var w = window.open('about:blank','image from canvas');
+      w.document.write("<title>"+(cmd.content[0] ? cmd.content[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>");
+    }
+  }
+}

scripts/modules/filter.js

@@ -0,0 +1,50 @@
+function Filter(element)
+{
+  Module.call(this);
+  
+  this.parameters = [Text,Value];
+  
+  this.active = function(cmd)
+  {
+    if(cmd.content.length < 1){ return; }
+    
+    var p = cmd.content;
+    var filter_name = p[0];
+    p.shift();
+    
+    switch(filter_name) {
+      case "saturation":
+        this.filter_saturation(this.pixels(),p);
+        break;
+    }
+  }
+  
+  this.passive = function(cmd)
+  {
+  }
+  
+  // Filters
+  
+  this.filter_saturation = function(pixels = this.pixels(),p = null)
+  {
+    var d = pixels.data;
+    for (var i=0; i<d.length; i+=4) {
+      var r = d[i];
+      var g = d[i+1];
+      var b = d[i+2];
+      // CIE luminance for the RGB
+      // The human eye is bad at seeing red and blue, so we de-emphasize them.
+      var v = 0.2126*r + 0.7152*g + 0.0722*b;
+      d[i] = d[i+1] = d[i+2] = v
+    }
+  	ronin.canvas.clear();
+  	ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+  }
+  
+  //
+  
+  this.pixels = function()
+  {
+    return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
+  }
+}

scripts/modules/hint.js

@@ -0,0 +1,32 @@
+function Hint(element)
+{
+  Module.call(this);
+  
+  this.element = element;
+  
+  this.update = function()
+  {
+    if(ronin.module){
+      this.element.innerHTML = this.message(ronin.module,commander.cmd);
+      this.element.style.display = "block";
+    }
+    else{
+      this.element.style.display = "none";
+    }
+  }
+  
+  this.message = function(module,cmd)
+  {
+    var s = "<span class='module'>"+module.constructor.name+"</span>";
+    
+    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='value'>"+cmd[param_name.toLowerCase()]().render()+"</span>" : "<span class='param'>"+param_name+"</span>";
+      e += 1;
+    }
+    
+    return s;
+  }
+}

scripts/modules/overlay.js

@@ -0,0 +1,137 @@
+function Overlay(element)
+{
+  Module.call(this);
+  
+  this.element = element;
+  
+  // Module
+  
+  this.passive = function(cmd)
+  {
+    this.draw(cmd.position(),cmd.rect());
+  }
+  
+  this.active = function(cmd)
+  {
+    if(cmd.bang()){ this.guides = []; }
+  }
+  
+  // draw
+  
+  this.draw = function(position,rect)
+  {
+    this.clear();
+    
+    if(!position){ return; }
+    
+    if(rect){
+      this.draw_rect(position,rect);
+    }
+    else if(position.x !== 0 && position.y !== 0){
+      this.draw_pointer(position);
+    }
+    else if(position.x !== 0 ){
+      this.draw_vertical_line(position);
+    }
+    else if(position.y !== 0 ){
+      this.draw_horizontal_line(position);
+    }
+  }
+  
+  this.draw_rect = function(position,rect)
+  {
+    this.context().beginPath();
+    
+    position.normalize(rect);
+    
+    this.context().moveTo(position.x,position.y);
+    this.context().lineTo(position.x + rect.width,position.y);
+    this.context().lineTo(position.x + rect.width,position.y + rect.height);
+    this.context().lineTo(position.x,position.y + rect.height);
+    this.context().lineTo(position.x,position.y);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = "#ff0000";
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.draw_pointer = function(position)
+  {
+    this.context().beginPath();
+    
+    this.context().moveTo(position.x,position.y);
+    this.context().lineTo(position.x + 10,position.y);
+    this.context().lineTo(position.x,position.y + 10);
+    this.context().lineTo(position.x,position.y);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = "#ff0000";
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.draw_vertical_line = function(position)
+  {
+    this.context().beginPath();
+    
+    this.context().moveTo(position.x,0);
+    this.context().lineTo(position.x,this.element.height);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = "#ff0000";
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.draw_horizontal_line = function(position)
+  {
+    this.context().beginPath();
+    
+    this.context().moveTo(0,position.y);
+    this.context().lineTo(this.element.width,position.y);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = "#ff0000";
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.resize = function(rect)
+  {
+    this.element.setAttribute('width',rect.width+"px");
+    this.element.setAttribute('height',rect.height+"px");
+  }
+  
+  this.show_guide = function(position,rect)
+  {
+    this.clear();
+    this.context().beginPath();
+    
+    this.context().moveTo(0,0);
+    this.context().lineTo(rect.width,0);
+    this.context().lineTo(rect.width,rect.height);
+    this.context().lineTo(0,rect.height);
+    this.context().lineTo(0,0);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = "#ff0000";
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.context = function()
+  {
+    return this.element.getContext('2d');
+  }
+  
+  this.clear = function()
+  {
+    this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
+  }
+}

scripts/modules/stroke.js

@@ -0,0 +1,34 @@
+function Stroke(element)
+{
+  Module.call(this);
+  
+  this.parameters = [Any];
+  
+  // Module
+  
+  this.passive = function(cmd)
+  {
+  }
+  
+  this.active = function(cmd)
+  {
+    // TODO
+    
+    var origin = new Position(cmd.content[0]);
+    var destination = new Position(cmd.content[1]);
+    
+    var e = {};
+    e.clientX = origin.x;
+    e.clientY = origin.y;
+    
+    ronin.brush.is_drawing = true;
+    ronin.brush.draw(e);
+    
+    e.clientX = destination.x;
+    e.clientY = destination.y;
+    
+    ronin.brush.draw(e);
+    ronin.brush.is_drawing = false;
+  }
+  
+}

scripts/modules/vector.js

@@ -0,0 +1,34 @@
+function Vector()
+{
+  Module.call(this);
+  
+  this.parameters = [Any,Position];
+  
+  // Module
+  
+  this.passive = function(cmd)
+  {
+    ronin.overlay.clear();
+    ronin.overlay.context().lineCap="round";
+    ronin.overlay.context().lineWidth = ronin.brush.size;
+    ronin.overlay.context().strokeStyle = "red";
+    ronin.overlay.context().stroke(new Path2D(cmd.content.join(" ")));
+  }
+  
+  this.active = function(cmd)
+  {
+    ronin.overlay.clear();
+    ronin.canvas.context().lineCap="round";
+    ronin.canvas.context().lineWidth = ronin.brush.size;
+    ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
+    ronin.canvas.context().stroke(new Path2D(cmd.content.join(" ")));
+  }
+  
+  // + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle
+  // M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z
+  
+  // Large 128
+  // @ 128x128;> 2 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0;$ logo
+  // Icon 128
+  // @ 128x128;> 4 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;$ logo
+}