From 16d3575fc0d9b5c8f3c2293d33a856adcfe5c2f6 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 15 Nov 2016 10:31:38 -0800 Subject: [PATCH] Began working on filters. --- scripts/commander.js | 16 ++++++++-------- scripts/ronin.canvas.js | 7 ++++++- scripts/ronin.file.js | 5 ++++- scripts/ronin.filter.js | 38 ++++++++++++++++++++++++++++++++++++-- scripts/unit.command.js | 34 +++++++++++++++++----------------- 5 files changed, 71 insertions(+), 29 deletions(-) diff --git a/scripts/commander.js b/scripts/commander.js index 5e94696..78d9590 100644 --- a/scripts/commander.js +++ b/scripts/commander.js @@ -16,11 +16,11 @@ function Commander(element,element_input) this.element_input.value = ""; } - this.active = function(cmd_array) + this.active = function(content) { - var key = cmd_array[0]; - cmd_array.shift(); - var cmd = new Command(cmd_array); + var key = content[0]; + content.shift(); + var cmd = new Command(content); switch(key) { case "@": @@ -55,11 +55,11 @@ function Commander(element,element_input) this.hide(); } - this.passive = function(cmd_array) + this.passive = function(content) { - var key = cmd_array[0]; - cmd_array.shift(); - this.cmd = new Command(cmd_array); + var key = content[0]; + content.shift(); + this.cmd = new Command(content); switch(key) { case "@": diff --git a/scripts/ronin.canvas.js b/scripts/ronin.canvas.js index 851b4fd..cb67fc6 100644 --- a/scripts/ronin.canvas.js +++ b/scripts/ronin.canvas.js @@ -6,7 +6,7 @@ function Canvas(element) this.active = function(cmd) { - if(cmd.bang()){ this.context().clearRect(0, 0, this.element.width, this.element.height); } + if(cmd.bang()){ clear(); } if(cmd.rect()){ this.resize(cmd.rect()); @@ -50,4 +50,9 @@ function Canvas(element) { return this.element.getContext('2d'); } + + this.clear = function() + { + this.context().clearRect(0, 0, this.element.width, this.element.height); + } } \ No newline at end of file diff --git a/scripts/ronin.file.js b/scripts/ronin.file.js index 02246ab..c9583f6 100644 --- a/scripts/ronin.file.js +++ b/scripts/ronin.file.js @@ -16,6 +16,9 @@ function File() base_image = new Image(); base_image.src = cmd.value() && this.storage[cmd.value()] ? this.storage[cmd.value()] : cmd.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; @@ -63,7 +66,7 @@ function File() else{ var d = ronin.canvas.element.toDataURL("image/png"); var w = window.open('about:blank','image from canvas'); - w.document.write(""+(cmd.cmd_array[0] ? cmd.cmd_array[0] : "Untitled")+"from canvas"); + w.document.write(""+(cmd.content[0] ? cmd.content[0] : "Untitled")+"from canvas"); } } } \ No newline at end of file diff --git a/scripts/ronin.filter.js b/scripts/ronin.filter.js index 40de277..c65d6b9 100644 --- a/scripts/ronin.filter.js +++ b/scripts/ronin.filter.js @@ -4,16 +4,50 @@ function Filter(element) this.active = function(cmd) { - console.log("Nothing to do."); + 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(p); + break; + } } this.passive = function(cmd) { - console.log("Nothing to do."); } this.hint = function(cmd) { return "Filter: "; } + + // Filters + + this.filter_saturation = function() + { + var imgPixels = this.pixels(); + for(var y = 0; y < imgPixels.height; y++){ + for(var x = 0; x < imgPixels.width; x++){ + var i = (y * 4) * imgPixels.width + x * 4; + var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; + imgPixels.data[i] = avg; + imgPixels.data[i + 1] = avg; + imgPixels.data[i + 2] = avg; + } + } + ronin.canvas.clear(); + ronin.canvas.context().putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); + } + + // + + this.pixels = function() + { + return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height); + } } \ No newline at end of file diff --git a/scripts/unit.command.js b/scripts/unit.command.js index 7f5d1f9..6af5798 100644 --- a/scripts/unit.command.js +++ b/scripts/unit.command.js @@ -1,60 +1,60 @@ -function Command(cmd_array) +function Command(content) { - this.cmd_array = cmd_array; + this.content = content; this.rect = function() { - for (i = 0; i < this.cmd_array.length; i++) { - if(this.cmd_array[i].indexOf("x") >= 0){ return new Rect(this.cmd_array[i]); } + for (i = 0; i < this.content.length; i++) { + if(this.content[i].indexOf("x") >= 0){ return new Rect(this.content[i]); } } return null; } this.position = function() { - for (i = 0; i < this.cmd_array.length; i++) { - if(this.cmd_array[i].indexOf(",") >= 0){ return new Position(this.cmd_array[i]); } + for (i = 0; i < this.content.length; i++) { + if(this.content[i].indexOf(",") >= 0){ return new Position(this.content[i]); } } return null; } this.color = function() { - for (i = 0; i < this.cmd_array.length; i++) { - if(this.cmd_array[i].indexOf("#") >= 0){ return new Color(this.cmd_array[i]); } + for (i = 0; i < this.content.length; i++) { + if(this.content[i].indexOf("#") >= 0){ return new Color(this.content[i]); } } return null; } this.path = function() { - for (i = 0; i < this.cmd_array.length; i++) { - if(this.cmd_array[i].indexOf("/") >= 0){ return this.cmd_array[i]; } + for (i = 0; i < this.content.length; i++) { + if(this.content[i].indexOf("/") >= 0){ return this.content[i]; } } return null; } this.value = function() { - for (i = 0; i < this.cmd_array.length; i++) { - var test = /[^$\-\d]/.test(this.cmd_array[i]); - if(!test){ return parseFloat(this.cmd_array[i]); } + for (i = 0; i < this.content.length; i++) { + var test = /[^$\-\d]/.test(this.content[i]); + if(!test){ return parseFloat(this.content[i]); } } 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]); } + for (i = 0; i < this.content.length; i++) { + if(this.content[i].indexOf("?") >= 0){ return parseInt(this.content[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; } + for (i = 0; i < this.content.length; i++) { + if(this.content[i].indexOf("!") >= 0){ return true; } } return null; }