From 56994771f03b6003b023c6e35b391064cdb726bf Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 14 Feb 2018 17:58:37 +0100 Subject: [PATCH 1/4] Fix PixelArray Creation Width --- lib/Dither.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Dither.dart b/lib/Dither.dart index 7f1cdb9..b51e2ea 100644 --- a/lib/Dither.dart +++ b/lib/Dither.dart @@ -81,7 +81,7 @@ class PixelArray { pixels = new List(height); for (int y = 0; y < height; y++) { pixels[y] = new List(width); - for (int x = 0; x < height; x++) { + for (int x = 0; x < width; x++) { pixels[y][x] = new Pixel(x, y, 0, 0, 0, 0); } } From 0cc15e9b4f67d0641ee9f29dfae36f9e97f4302a Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 14 Feb 2018 18:00:13 +0100 Subject: [PATCH 2/4] Add per Pixel Quantize Methods --- lib/Dither.dart | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/lib/Dither.dart b/lib/Dither.dart index b51e2ea..1201655 100644 --- a/lib/Dither.dart +++ b/lib/Dither.dart @@ -21,16 +21,23 @@ class Pixed { PixelArray pxArr = new PixelArray.fromPixelArray(image); for (var y = 0; y < pxArr.getHeight(); y++) { for (var x = 0; x < pxArr.getWidth(); x++) { - var px = pxArr.getPixel(x, y); - px.r = (steps * px.r / 255).round() * (255 ~/ steps); - px.g = (steps * px.g / 255).round() * (255 ~/ steps); - px.b = (steps * px.b / 255).round() * (255 ~/ steps); + pxArr.setPixel( _quantizePixel(pxArr.getPixel(x, y)) ); } } return pxArr; } - static PixelArray calcQuantizeError(PixelArray original, PixelArray quantized) { + static Pixel _quantizePixel(Pixel pixel, [int steps=1]) { + return new Pixel( + pixel.x, + pixel.y, + (steps * pixel.r / 255).round() * (255 ~/ steps), + (steps * pixel.g / 255).round() * (255 ~/ steps), + (steps * pixel.b / 255).round() * (255 ~/ steps), + pixel.a); + } + + static PixelArray quantizeError(PixelArray original, PixelArray quantized) { PixelArray pxArr = new PixelArray.fromPixelArray(original); for (var y = 0; y < pxArr.getHeight(); y++) { for (var x = 0; x < pxArr.getWidth(); x++) { @@ -43,6 +50,14 @@ class Pixed { } return pxArr; } + + static Pixel _quantizeErrorPixel(Pixel original, Pixel quantized) { + return new Pixel(original.x, original.y, + original.r - quantized.r, + original.g - quantized.g, + original.b - quantized.b, + original.a); + } } class Pixel { @@ -92,7 +107,6 @@ class PixelArray { int y = 0; int x = 0; pixels[y] = new List(imageWidth); - print(pixels[0].length.toString() + ","+ pixels.length.toString()); for (var pos = 0; pos < array.length; pos = pos + 4) { if (x >= imageWidth) { x = 0; @@ -107,7 +121,7 @@ class PixelArray { PixelArray.fromImageData(ImageData imagedata, int imageWidth): this.fromByteArray(imagedata.data, imageWidth); PixelArray.fromPixelArray(PixelArray pixelArray) { - pixels = new List>.from(pixelArray.pixels); + pixels = pixelArray.clone().pixels; } Uint8ClampedList toByteArray() { From c5a68ea94b6e80a98b3fe3c1abe71e33cd7814ea Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 14 Feb 2018 18:00:25 +0100 Subject: [PATCH 3/4] Add Dither Function --- lib/Dither.dart | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/lib/Dither.dart b/lib/Dither.dart index 1201655..89aee36 100644 --- a/lib/Dither.dart +++ b/lib/Dither.dart @@ -58,6 +58,39 @@ class Pixed { original.b - quantized.b, original.a); } + + static PixelArray dither(PixelArray image) { + PixelArray pxArr = new PixelArray.fromPixelArray(image); + for (var y = 0; y < pxArr.getHeight()-1; y++) { + for (var x = 1; x < pxArr.getWidth()-1; x++) { + Pixel origPx = pxArr.getPixel(x, y); + Pixel quantPx = _quantizePixel(origPx); + Pixel errPx = _quantizeErrorPixel(origPx, quantPx); + pxArr.setPixel(quantPx); + + Pixel px = pxArr.getPixel(x+1, y); + px.r = (px.r + errPx.r * (7/16)).toInt(); + px.g = (px.g + errPx.g * (7/16)).toInt(); + px.b = (px.b + errPx.b * (7/16)).toInt(); + + px = pxArr.getPixel(x-1, y+1); + px.r = (px.r + errPx.r * (3/16)).toInt(); + px.g = (px.g + errPx.g * (3/16)).toInt(); + px.b = (px.b + errPx.b * (3/16)).toInt(); + + px = pxArr.getPixel(x, y+1); + px.r = (px.r + errPx.r * (5/16)).toInt(); + px.g = (px.g + errPx.g * (5/16)).toInt(); + px.b = (px.b + errPx.b * (5/16)).toInt(); + + px = pxArr.getPixel(x+1, y+1); + px.r = (px.r + errPx.r * (1/16)).toInt(); + px.g = (px.g + errPx.g * (1/16)).toInt(); + px.b = (px.b + errPx.b * (1/16)).toInt(); + } + } + return pxArr; + } } class Pixel { From 763512a3b16afcc4ee0f332015a0a050637292cf Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 14 Feb 2018 18:00:57 +0100 Subject: [PATCH 4/4] Add Dither Effect to Example Image --- web/index.html | 4 ++-- web/main.dart | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/web/index.html b/web/index.html index 1a09a60..7dde92e 100644 --- a/web/index.html +++ b/web/index.html @@ -14,8 +14,8 @@ - + - + diff --git a/web/main.dart b/web/main.dart index ef830c7..a4c027a 100644 --- a/web/main.dart +++ b/web/main.dart @@ -8,11 +8,15 @@ ImageElement inputImg; ImageElement outputImg; void main() { - inputImg = new ImageElement(src: 'kitten.jpg', width: 712, height: 470); + inputImg = new ImageElement(src: 'kitten.jpg'); input = document.querySelector('#input'); output = document.querySelector('#output'); + input.width = inputImg.width; + input.height = inputImg.height; + output.width = inputImg.width; + output.height = inputImg.height; inputImg.onLoad.listen(imgLoaded); } @@ -20,9 +24,9 @@ void imgLoaded(Event e) { print("image loaded"); input.context2D.drawImage(inputImg, 0, 0); - PixelArray px = new PixelArray.fromImageData(getImageData(input), 712); + PixelArray px = new PixelArray.fromImageData(getImageData(input), input.width); px = Pixed.greyscale(px); - + px = Pixed.dither(px); output.context2D.putImageData(px.toImageData(), 0, 0); }