diff --git a/README.md b/README.md
index 2defdd0..bb641cc 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
#Starting
-Ronin is a web based drawing application and visual language. Launch index.html and press **:**(colon) to display the command prompt. Input the commands below to interface with the different tools. Headings with a star are features in development.
+Ronin is a web based drawing application and visual language. Launch index.html and press **:**(colon) to display the command prompt. Input the commands below to interface with the different tools. Headings with a star are features in development. Mouse2 is used to drag the canvas around.
```
:
@@ -74,9 +74,8 @@ $ ! ; Clear temporary storage
: saturation 0.5 ; Set image saturation to 0.5
: chromatic 10 ; Shifts, from center, pixels red value by 10, green by 5, blue by 0
: chromatic 8 0 16 ; Shifts, from center, pixels red value by 8, green by 0, blue by 16
+: balance 0.9 0.4 0.7 ; Set color balance to R0.9 G0.4 B0.7
-: balance red 0.9 0.4 0.7 ; Set color balance red to 0.9 0.4 0.7
-: balance white 0.7 0.7 0.7 ; Set color balance white to 0.7 0.7 0.7
: sharpen 0.5 ; Sharpen image to 50%
```
diff --git a/index.html b/index.html
index df843df..a892b1f 100644
--- a/index.html
+++ b/index.html
@@ -38,10 +38,10 @@
diff --git a/links/main.css b/links/main.css
index 76ddfe1..1717b0a 100644
--- a/links/main.css
+++ b/links/main.css
@@ -3,12 +3,16 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;}
+#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
+
#overlay { position:fixed; z-index:1000;}
+#workspace { position:fixed; background:#efefef; border-radius:3px;}
#commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; }
#commander.hidden { display:none; }
#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
+#commander input:before { content:"input"; color:red;}
#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;}
#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;}
diff --git a/media/grid_20.png b/media/grid_20.png
new file mode 100644
index 0000000..0e6c281
Binary files /dev/null and b/media/grid_20.png differ
diff --git a/scripts/commander.js b/scripts/commander.js
index 1f23198..dd09379 100644
--- a/scripts/commander.js
+++ b/scripts/commander.js
@@ -47,8 +47,8 @@ function Commander(element,element_input)
this.storage.push(content.join(" "));
this.storage_index = this.storage.length;
- var key = content[0];
- content.shift();
+ var key = content[0][0];
+ content[0] = content[0].slice(1);
var cmd = new Command(content);
switch(key) {
@@ -94,8 +94,8 @@ function Commander(element,element_input)
this.passive = function(content)
{
- var key = content[0];
- content.shift();
+ var key = content[0][0];
+ content[0] = content[0].slice(1);
this.cmd = new Command(content);
ronin.module = null;
diff --git a/scripts/init.js b/scripts/init.js
index 4e4ca3e..7db1dee 100644
--- a/scripts/init.js
+++ b/scripts/init.js
@@ -7,11 +7,26 @@ var commander = new Commander(document.getElementById("commander"),document.getE
// Interactive
-document.addEventListener('mousemove', function(e) { ronin.brush.draw(e); ;
+document.addEventListener('mousemove', function(e) {
+ if(e.which == 1){ ronin.brush.draw(e); }
+ if(e.which == 2){ ronin.canvas.drag(e); ronin.overlay.drag(e); }
+}, false);
+document.addEventListener('mousedown', function(e) {
+ if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
+ if(e.which == 2){ ronin.canvas.drag_start(e); ronin.canvas.drag(e); ronin.overlay.drag_start(e); ronin.overlay.drag(e); }
+}, false);
+document.addEventListener('mouseup', function(e) {
+ if(e.which == 1){ ronin.brush.draw_stop(e); }
+ if(e.which == 2){ ronin.canvas.drag_stop(e); ronin.overlay.drag_stop(e); }
+ document.getElementById("commander_input").focus();
}, false);
-document.addEventListener('mousedown', function(e) { if(e.which != 1){ return; } ronin.brush.draw_start(e); ronin.brush.draw(e) }, false);
-document.addEventListener('mouseup', function(e) { ronin.brush.draw_stop(e); document.getElementById("commander_input").focus();}, false);
-
var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen(event); };
+
+var starting_canvas = new Rect();
+starting_canvas.width = window.innerWidth - 200;
+starting_canvas.height = window.innerHeight - 200;
+
+ronin.canvas.resize(starting_canvas);
+ronin.overlay.resize(starting_canvas);
diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js
index 43d6646..32a7ead 100644
--- a/scripts/modules/brush.js
+++ b/scripts/modules/brush.js
@@ -67,7 +67,7 @@ function Brush()
{
if(this.is_drawing === false){return;}
- this.position = new Position(e.clientX,e.clientY);
+ this.position = new Position(e.clientX - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.canvas.element.style.top));
for (i = 0; i < this.pointers.length; i++) {
this.pointers[i].draw();
diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js
index de5d546..c7c4ecb 100644
--- a/scripts/modules/canvas.js
+++ b/scripts/modules/canvas.js
@@ -35,6 +35,8 @@ function Canvas(element)
{
this.element.setAttribute('width',rect.width+"px");
this.element.setAttribute('height',rect.height+"px");
+ this.element.style.left = (window.innerWidth/2)-(rect.width/2);
+ this.element.style.top = (window.innerHeight/2)-(rect.height/2);
}
this.context = function()
@@ -46,4 +48,29 @@ function Canvas(element)
{
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
+
+ // Drag
+
+ this.drag_from = null;
+
+ this.drag_start = function(e)
+ {
+ this.drag_from = new Position(e.clientX,e.clientY);
+ }
+
+ this.drag = function(e)
+ {
+ if(e.which != 2){ return; }
+
+ var offset_x = this.drag_from.x - e.clientX;
+ this.element.style.left = parseInt(this.element.style.left) - offset_x;
+ var offset_y = this.drag_from.y - e.clientY;
+ this.element.style.top = parseInt(this.element.style.top) - offset_y;
+ this.drag_from = new Position(e.clientX,e.clientY);
+ }
+
+ this.drag_stop = function(e)
+ {
+ this.drag_from = null;
+ }
}
\ No newline at end of file
diff --git a/scripts/modules/filter.eval.js b/scripts/modules/filter.eval.js
index 695e29a..bbff93c 100644
--- a/scripts/modules/filter.eval.js
+++ b/scripts/modules/filter.eval.js
@@ -13,10 +13,10 @@ Filter.prototype.filter_eval = function(pixels = this.pixels(),p = null)
var q = (x % parseInt(p[0]) === 0 && y % parseInt(p[1]) === 0);
- if(q === true){
- data[i] = 255; // red
- data[i + 1] = 0; // green
- data[i + 2] = 0; // blue
+ if(x % 20 == 0 && y % 20 == 0){
+ data[i] = 50; // red
+ data[i + 1] = 50; // green
+ data[i + 2] = 50; // blue
data[i + 3] = 255; // alpha?
}
}
diff --git a/scripts/modules/hint.js b/scripts/modules/hint.js
index 13be6eb..7bf5e7a 100644
--- a/scripts/modules/hint.js
+++ b/scripts/modules/hint.js
@@ -11,7 +11,8 @@ function Hint(element)
this.element.style.display = "block";
}
else{
- this.element.style.display = "none";
+ this.element.innerHTML = this.default();
+ this.element.style.display = "block";
}
}
@@ -29,4 +30,15 @@ function Hint(element)
return s;
}
+
+ this.default = function()
+ {
+ var s = "Modules";
+
+ for (var key in ronin.modules){
+ s += ""+ronin.modules[key].constructor.name+" "+key+" ";
+ }
+
+ return s;
+ }
}
\ No newline at end of file
diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js
index 91ce5d2..5b5deca 100644
--- a/scripts/modules/overlay.js
+++ b/scripts/modules/overlay.js
@@ -106,6 +106,8 @@ function Overlay(element)
{
this.element.setAttribute('width',rect.width+"px");
this.element.setAttribute('height',rect.height+"px");
+ this.element.style.left = (window.innerWidth/2)-(rect.width/2);
+ this.element.style.top = (window.innerHeight/2)-(rect.height/2);
}
this.show_guide = function(position,rect)
@@ -135,4 +137,29 @@ function Overlay(element)
{
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
}
+
+ // Drag
+
+ this.drag_from = null;
+
+ this.drag_start = function(e)
+ {
+ this.drag_from = new Position(e.clientX,e.clientY);
+ }
+
+ this.drag = function(e)
+ {
+ if(e.which != 2){ return; }
+
+ var offset_x = this.drag_from.x - e.clientX;
+ this.element.style.left = parseInt(this.element.style.left) - offset_x;
+ var offset_y = this.drag_from.y - e.clientY;
+ this.element.style.top = parseInt(this.element.style.top) - offset_y;
+ this.drag_from = new Position(e.clientX,e.clientY);
+ }
+
+ this.drag_stop = function(e)
+ {
+ this.drag_from = null;
+ }
}
\ No newline at end of file
diff --git a/scripts/ronin.js b/scripts/ronin.js
index 9cca5d8..540bc93 100644
--- a/scripts/ronin.js
+++ b/scripts/ronin.js
@@ -1,11 +1,21 @@
function Ronin()
{
+ this.modules = {};
+
+ this.hint = new Hint();
this.canvas = new Canvas();
this.overlay = new Overlay();
this.brush = new Brush();
this.file = new File();
- this.hint = new Hint();
this.filter = new Filter();
this.stroke = new Stroke();
this.vector = new Vector();
+
+ this.modules["@"] = this.canvas;
+ this.modules["|"] = this.overlay;
+ this.modules[">"] = this.brush;
+ this.modules["/"] = this.file;
+ this.modules[":"] = this.filter;
+ this.modules["-"] = this.stroke;
+ this.modules["+"] = this.vector;
}
\ No newline at end of file
diff --git a/scripts/units/rect.js b/scripts/units/rect.js
index 27daeba..d3300d3 100644
--- a/scripts/units/rect.js
+++ b/scripts/units/rect.js
@@ -4,8 +4,8 @@ function Rect(rect_str)
this.rect_str = rect_str;
- this.width = parseFloat(this.rect_str.split("x")[0]);
- this.height = parseFloat(this.rect_str.split("x")[1]);
+ this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0;
+ this.height = rect_str ? parseFloat(this.rect_str.split("x")[1]) : 0;
this.render = function()
{