From ee67ec8da23c85b6dba9298ee094f58e050372a3 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Fri, 25 Nov 2016 13:16:27 -0600 Subject: [PATCH] Added mouse drag and various minor visual changes. --- README.md | 5 ++--- index.html | 4 ++-- links/main.css | 4 ++++ media/grid_20.png | Bin 0 -> 105 bytes scripts/commander.js | 8 ++++---- scripts/init.js | 23 +++++++++++++++++++---- scripts/modules/brush.js | 2 +- scripts/modules/canvas.js | 27 +++++++++++++++++++++++++++ scripts/modules/filter.eval.js | 8 ++++---- scripts/modules/hint.js | 14 +++++++++++++- scripts/modules/overlay.js | 27 +++++++++++++++++++++++++++ scripts/ronin.js | 12 +++++++++++- scripts/units/rect.js | 4 ++-- 13 files changed, 116 insertions(+), 22 deletions(-) create mode 100644 media/grid_20.png 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 0000000000000000000000000000000000000000..0e6c281e6e153a9e8c1447a4cc9c04cf5ad5b8b8 GIT binary patch literal 105 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=fv1aOh=qT$iILH-`geCM-Pp7k zS4pxIpI^~9<@lKliM}>PNkxNMIVU(wOmvkEco^FzvWV9E-vb%M;OXk;vd$@?2>{() B8$bX6 literal 0 HcmV?d00001 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() {