Merge branch 'dithering-algorithm'
This commit is contained in:
commit
092368c694
3 changed files with 64 additions and 13 deletions
|
@ -21,16 +21,23 @@ class Pixed {
|
||||||
PixelArray pxArr = new PixelArray.fromPixelArray(image);
|
PixelArray pxArr = new PixelArray.fromPixelArray(image);
|
||||||
for (var y = 0; y < pxArr.getHeight(); y++) {
|
for (var y = 0; y < pxArr.getHeight(); y++) {
|
||||||
for (var x = 0; x < pxArr.getWidth(); x++) {
|
for (var x = 0; x < pxArr.getWidth(); x++) {
|
||||||
var px = pxArr.getPixel(x, y);
|
pxArr.setPixel( _quantizePixel(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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return pxArr;
|
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);
|
PixelArray pxArr = new PixelArray.fromPixelArray(original);
|
||||||
for (var y = 0; y < pxArr.getHeight(); y++) {
|
for (var y = 0; y < pxArr.getHeight(); y++) {
|
||||||
for (var x = 0; x < pxArr.getWidth(); x++) {
|
for (var x = 0; x < pxArr.getWidth(); x++) {
|
||||||
|
@ -43,6 +50,47 @@ class Pixed {
|
||||||
}
|
}
|
||||||
return pxArr;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
class Pixel {
|
||||||
|
@ -81,7 +129,7 @@ class PixelArray {
|
||||||
pixels = new List(height);
|
pixels = new List(height);
|
||||||
for (int y = 0; y < height; y++) {
|
for (int y = 0; y < height; y++) {
|
||||||
pixels[y] = new List(width);
|
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);
|
pixels[y][x] = new Pixel(x, y, 0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -92,7 +140,6 @@ class PixelArray {
|
||||||
int y = 0;
|
int y = 0;
|
||||||
int x = 0;
|
int x = 0;
|
||||||
pixels[y] = new List(imageWidth);
|
pixels[y] = new List(imageWidth);
|
||||||
print(pixels[0].length.toString() + ","+ pixels.length.toString());
|
|
||||||
for (var pos = 0; pos < array.length; pos = pos + 4) {
|
for (var pos = 0; pos < array.length; pos = pos + 4) {
|
||||||
if (x >= imageWidth) {
|
if (x >= imageWidth) {
|
||||||
x = 0;
|
x = 0;
|
||||||
|
@ -107,7 +154,7 @@ class PixelArray {
|
||||||
PixelArray.fromImageData(ImageData imagedata, int imageWidth): this.fromByteArray(imagedata.data, imageWidth);
|
PixelArray.fromImageData(ImageData imagedata, int imageWidth): this.fromByteArray(imagedata.data, imageWidth);
|
||||||
|
|
||||||
PixelArray.fromPixelArray(PixelArray pixelArray) {
|
PixelArray.fromPixelArray(PixelArray pixelArray) {
|
||||||
pixels = new List<List<Pixel>>.from(pixelArray.pixels);
|
pixels = pixelArray.clone().pixels;
|
||||||
}
|
}
|
||||||
|
|
||||||
Uint8ClampedList toByteArray() {
|
Uint8ClampedList toByteArray() {
|
||||||
|
|
|
@ -14,8 +14,8 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<canvas id="input" width="712" height="470"></canvas>
|
<canvas id="input"></canvas>
|
||||||
|
|
||||||
<canvas id="output" width="712" height="470"></canvas>
|
<canvas id="output"></canvas>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -8,11 +8,15 @@ ImageElement inputImg;
|
||||||
ImageElement outputImg;
|
ImageElement outputImg;
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
inputImg = new ImageElement(src: 'kitten.jpg', width: 712, height: 470);
|
inputImg = new ImageElement(src: 'kitten.jpg');
|
||||||
|
|
||||||
input = document.querySelector('#input');
|
input = document.querySelector('#input');
|
||||||
output = document.querySelector('#output');
|
output = document.querySelector('#output');
|
||||||
|
|
||||||
|
input.width = inputImg.width;
|
||||||
|
input.height = inputImg.height;
|
||||||
|
output.width = inputImg.width;
|
||||||
|
output.height = inputImg.height;
|
||||||
inputImg.onLoad.listen(imgLoaded);
|
inputImg.onLoad.listen(imgLoaded);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,9 +24,9 @@ void imgLoaded(Event e) {
|
||||||
print("image loaded");
|
print("image loaded");
|
||||||
input.context2D.drawImage(inputImg, 0, 0);
|
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.greyscale(px);
|
||||||
|
px = Pixed.dither(px);
|
||||||
output.context2D.putImageData(px.toImageData(), 0, 0);
|
output.context2D.putImageData(px.toImageData(), 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue