From 7dbfbd748f68fa589f21fb3f605493d7bb5d9844 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 14 Nov 2016 21:11:48 -0800 Subject: [PATCH] Added new Bang() cmd and began building filters. --- README.md | 31 +++++++++++++++++++------------ index.html | 1 + scripts/commander.js | 7 ------- scripts/ronin.brush.js | 16 ++++++++++++---- scripts/ronin.brush.pointer.js | 12 ++++++++++-- scripts/ronin.canvas.js | 17 +++++++++++++---- scripts/ronin.file.js | 2 ++ scripts/ronin.filter.js | 19 +++++++++++++++++++ scripts/ronin.js | 16 +--------------- scripts/ronin.overlay.js | 4 +++- scripts/unit.command.js | 16 ++++++++++++++++ scripts/unit.position.js | 6 ------ 12 files changed, 96 insertions(+), 51 deletions(-) create mode 100644 scripts/ronin.filter.js diff --git a/README.md b/README.md index b571ece..700611d 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,14 @@ ``` @ 600x400 ; New canvas of size 600w and 400h @ 100x100 #ff0000 ; New canvas of size 100w and 100h with red background -@ ? ; Clear canvas +@ ! ; Clear canvas ``` ##Save File ``` $ new_name ; Create a new file with name $ 3 ; Save to temporary storage, accessible with Load +$ ! ; Clear temporary storage ``` ##Load File @@ -27,32 +28,41 @@ $ 3 ; Save to temporary storage, accessible with L > 10,0 ; Add pointer at pos > 400x0 ; Add mirror pointer, at 400x > 4 #ff0000 ; Red brush, Size 4 -> ? ; Remove last pointer +> ! ; Remove all pointers ``` ##Guides ``` | 10,10 100x100 ; Draw a guide | -100,0 ; Draw a grid at every 100px -| ? ; Remove guides +| ! ; Remove all guides +``` + +##Filters* +``` +: saturation 0.5 ; Set image saturation to 0.5 +: 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% ``` ##Translate* ``` ^ 0,10 ; Translate 10px vertically ^ 20,20 100x100 40,40 ; Translate a specific portion to a specific location +^ -1280x800 ; Flip image horizontally ``` ##Zoom* ``` -= 75 ; Zoom factor -= ? ; Zoom 100% += 75 ; Zoom factor of 75% += ! ; Zoom 100% ``` ##Layers* ``` # 3 ; Layer 3 -# ? ; Layer 1 +# ! ; Layer 1 ``` #Units* @@ -61,9 +71,6 @@ $ 3 ; Save to temporary storage, accessible with L 5,7 ; position: 5x 7y 7x9 ; rect: 7w 9h #ff0000 ; color: red -``` - -- Mirror -- Filter -- Noise -- +?5 ; random: 0..5 +45' ; degree: 45/365 +``` \ No newline at end of file diff --git a/index.html b/index.html index 9f5fde7..4df4287 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + diff --git a/scripts/commander.js b/scripts/commander.js index 55e1362..f476c83 100644 --- a/scripts/commander.js +++ b/scripts/commander.js @@ -26,9 +26,6 @@ function Commander(element,element_input) case "@": ronin.canvas.active(cmd); break; - case "~": // TODO - ronin.memory.active(cmd); - break; case "$": ronin.file.save(cmd); break; @@ -69,10 +66,6 @@ function Commander(element,element_input) ronin.canvas.passive(this.cmd); ronin.module = ronin.canvas; break; - case "~": - ronin.memory.passive(this.cmd); - ronin.module = ronin.memory; - break; case "/": ronin.file.passive(this.cmd); ronin.module = ronin.file; diff --git a/scripts/ronin.brush.js b/scripts/ronin.brush.js index 407828f..7d0d811 100644 --- a/scripts/ronin.brush.js +++ b/scripts/ronin.brush.js @@ -2,6 +2,8 @@ function Brush() { Module.call(this); + this.pointers = [new Pointer(new Position())]; + this.position = new Position(); this.is_drawing = false; this.size = 1; @@ -12,6 +14,8 @@ function Brush() this.active = function(cmd) { + if(cmd.bang()){ this.pointers = []; } + var pointer = new Pointer(); if(cmd.position()){ @@ -20,7 +24,10 @@ function Brush() if(cmd.rect()){ pointer.mirror = cmd.rect(); } - if(cmd.rect() || cmd.position()){ + if(cmd.noise()){ + pointer.noise = cmd.noise(); + } + if(cmd.rect() || cmd.position() || cmd.noise()){ this.add_pointer(pointer); } if(cmd.color()){ @@ -37,16 +44,17 @@ function Brush() this.hint = function(cmd) { + if(cmd.bang()){ return "Brush: Erase all pointers"; } + var hint_value = (cmd.value() ? "Size "+cmd.value()+" " : ""); var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); var hint_color = (cmd.color() ? "Color "+cmd.color().hex+" " : ""); var hint_rect = (cmd.rect() ? "Mirror "+cmd.rect().width+"/"+cmd.rect().height+" " : ""); + var hint_noise = (cmd.noise() ? "Noise 0.."+cmd.noise()+" " : ""); - return "Brush: "+hint_value+hint_position+hint_color+hint_rect; + return "Brush: "+hint_value+hint_position+hint_color+hint_rect+hint_noise; } - this.pointers = [new Pointer(new Position())]; - this.add_pointer = function(pointer) { this.pointers.push(pointer); diff --git a/scripts/ronin.brush.pointer.js b/scripts/ronin.brush.pointer.js index 6559010..b661f05 100644 --- a/scripts/ronin.brush.pointer.js +++ b/scripts/ronin.brush.pointer.js @@ -2,6 +2,7 @@ function Pointer(offset = new Position(), color = new Color('000000')) { this.offset = offset; this.mirror = null; + this.noise = null; this.position_prev = null; this.draw = function() @@ -9,16 +10,23 @@ function Pointer(offset = new Position(), color = new Color('000000')) if(!this.position_prev){this.position_prev = this.position(); } if(ronin.brush.size < 0){ this.erase(); return; } + var position = this.position(); + + if(this.noise){ + position.x += (Math.random() * this.noise) - (this.noise/2); + position.y += (Math.random() * this.noise) - (this.noise/2); + } + context.beginPath(); context.moveTo(this.position_prev.x,this.position_prev.y); - context.lineTo(this.position().x,this.position().y); + context.lineTo(position.x,position.y); context.lineCap="round"; context.lineWidth = this.thickness(); context.strokeStyle = ronin.brush.color.rgba(); context.stroke(); context.closePath(); - this.position_prev = this.position(); + this.position_prev = position; } this.erase = function() diff --git a/scripts/ronin.canvas.js b/scripts/ronin.canvas.js index 2f44427..6729ad8 100644 --- a/scripts/ronin.canvas.js +++ b/scripts/ronin.canvas.js @@ -6,16 +6,18 @@ function Canvas(element) this.active = function(cmd) { + if(cmd.bang()){ this.context().clearRect(0, 0, canvas.width, canvas.height); } + if(cmd.rect()){ this.resize(cmd.rect()); ronin.overlay.resize(cmd.rect()); } if(cmd.color()){ - this.element.getContext('2d').beginPath(); - this.element.getContext('2d').rect(0, 0, canvas.width, canvas.height); - this.element.getContext('2d').fillStyle = cmd.color().hex; - this.element.getContext('2d').fill(); + this.context().beginPath(); + this.context().rect(0, 0, canvas.width, canvas.height); + this.context().fillStyle = cmd.color().hex; + this.context().fill(); } } @@ -28,6 +30,8 @@ function Canvas(element) this.hint = function(cmd) { + if(cmd.bang()){ return "Canvas: Clear"; } + var hint_rect = (cmd.rect() ? "Resize to "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); var hint_color = (cmd.color() ? "Fill with color "+cmd.color().hex+" " : ""); @@ -41,4 +45,9 @@ function Canvas(element) this.element.setAttribute('width',rect.width+"px"); this.element.setAttribute('height',rect.height+"px"); } + + this.context = function() + { + return this.element.getContext('2d'); + } } \ No newline at end of file diff --git a/scripts/ronin.file.js b/scripts/ronin.file.js index 6e5ff02..165b91e 100644 --- a/scripts/ronin.file.js +++ b/scripts/ronin.file.js @@ -6,6 +6,8 @@ function File() this.active = function(cmd) { + if(cmd.bang()){ this.storage = []; } + ronin.overlay.clear(); if(!cmd.position()){ return; } diff --git a/scripts/ronin.filter.js b/scripts/ronin.filter.js new file mode 100644 index 0000000..40de277 --- /dev/null +++ b/scripts/ronin.filter.js @@ -0,0 +1,19 @@ +function Filter(element) +{ + Module.call(this); + + this.active = function(cmd) + { + console.log("Nothing to do."); + } + + this.passive = function(cmd) + { + console.log("Nothing to do."); + } + + this.hint = function(cmd) + { + return "Filter: "; + } +} \ No newline at end of file diff --git a/scripts/ronin.js b/scripts/ronin.js index f8f7006..8db2349 100644 --- a/scripts/ronin.js +++ b/scripts/ronin.js @@ -6,19 +6,5 @@ function Ronin() this.brush = new Brush(); this.file = new File(); this.hint = new Hint(); - - this.fill = function(p) - { - cvSave = canvas.toDataURL("image/png"); - - context.beginPath(); - context.rect(0, 0, canvas.width, canvas.height); - context.fillStyle = "#"+p[0]; - context.fill(); - - var imgObj = new Image(); - imgObj.src = cvSave; - - context.drawImage(imgObj,0,0); - } + this.filter = new Filter(); } \ No newline at end of file diff --git a/scripts/ronin.overlay.js b/scripts/ronin.overlay.js index 22523a1..788719a 100644 --- a/scripts/ronin.overlay.js +++ b/scripts/ronin.overlay.js @@ -13,11 +13,13 @@ function Overlay(element) this.active = function(cmd) { - + if(cmd.bang()){ this.guides = []; } } this.hint = function(cmd) { + if(cmd.bang()){ return "Overlay: Erase all guides"; } + var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); diff --git a/scripts/unit.command.js b/scripts/unit.command.js index 31a7e80..7f5d1f9 100644 --- a/scripts/unit.command.js +++ b/scripts/unit.command.js @@ -42,4 +42,20 @@ function Command(cmd_array) } return null; } + + this.noise = function() + { + for (i = 0; i < this.cmd_array.length; i++) { + if(this.cmd_array[i].indexOf("?") >= 0){ return parseInt(this.cmd_array[i][1]); } + } + return null; + } + + this.bang = function() + { + for (i = 0; i < this.cmd_array.length; i++) { + if(this.cmd_array[i].indexOf("!") >= 0){ return true; } + } + return null; + } } \ No newline at end of file diff --git a/scripts/unit.position.js b/scripts/unit.position.js index ef7f2ed..4912246 100644 --- a/scripts/unit.position.js +++ b/scripts/unit.position.js @@ -5,12 +5,6 @@ function Position(position_str = "0,0",y = null) this.x = y ? position_str : parseFloat(this.position_str.split(",")[0]); this.y = y ? y : parseFloat(this.position_str.split(",")[1]); - this.update = function(x,y) - { - this.x = x; - this.y = y; - } - this.is_equal = function(target) { if(target.x == this.x && target.y == this.y){ return true; }