Форум Flasher.ru - Pixelization

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

- - Pixelization (http://www.flasher.ru/forum/showthread.php?t=88776)

Необходимо сделать данный эффект http://http://www.infosci.cornell.ed...on-15pixel.jpg
собственно нужна помощь по алгоритму для него или вообще любая в этом плане.

Я бы делал так:
Делишь картинку на блоки, считываешь каждый блок BitmapData.getPixels в ByteArray. Пробегаешься по ByteArray высчитывая средне-арифметический цвет. Заливаешь весь ByteArray этим цветом, кладешь блок назад в картинку BitmapData.setPixels
На первый взгляд ничего сложно...

Могу предложить 2 варианта, совместимых с AS2.0 и ниже.
Насчёт скорости ничего сказать не могу.

1. Используем DispacementMapFilter и специально построенную карту трансформации.

Правда, при этом цвет каждого квадрата будет не средним арифметическим всех содержащихся в нём пикселей, а будет выбран какой-то один конкретный пиксель и его цвет будет назначен всему квадрату.
Кроме того, требуется создавать аналогичный по размеру битмап.
Хорошо подходит для случая, когда начальная картинка содержится в мувиклипе.

2. Начальное изображение сперва уменьшаем, записываем в битмап, затем снова увеличиваем.
Требуется временный битмап для трансформаций, но на порядок меньшего размера.
Хорошо подходит для случая, когда картинка изначально содержится в битмапе.

Примеры.

Подготовительный этап (одинаковый для обоих)

Код:

import flash.display.*;

import flash.geom.*;

import flash.filters.*;



// ПОДГОТОВКА



// создаём битмапы: начальный и конечный

bmp1 = new BitmapData(100,100,false,0);

bmp2 = new BitmapData(100,100,false,0);



// создаём мувики для отображения битмапов

_root.createEmptyMovieClip("mcHolder1",0);

_root.createEmptyMovieClip("mcHolder2",1);

mcHolder1.attachBitmap(bmp1,0);

mcHolder2.attachBitmap(bmp2,0);

mcHolder2._x = 150;



// заполняем начальный битмап зелёным градиентом

for (var x=0; x<100; x++) {

        for (var y=0; y<100; y++) {

                bmp1.setPixel(x,y,(x+y)<<8);

        }

}

Первый алгоритм:

Код:

// заполняем карту трансформации

var bmpMap = new BitmapData(100,100);

for (var x=0; x<100; x++) {

        for (var y=0; y<100; y++) {

                bmpMap.setPixel(x,y,0x8080-(x%10<<8)-(y%10));

        }

}



var filter = new DisplacementMapFilter(bmpMap, new Point(0,0), 2, 4, 256, 256);

bmp2.applyFilter(bmp1,bmp1.rectangle,new Point(0,0),filter);

Второй алгоритм:

Код:

// создаём временный битмап

bmpTemp = new BitmapData(10,10);



// подготовливаем матрицы для преобразования

m1 = new Matrix();

m1.scale(1/10,1/10);

m2 = new Matrix();

m2.scale(10,10);



// уменьшаем

bmpTemp.draw(bmp1,m1);

// увеличиваем

bmp2.draw(bmpTemp,m2);

MerlinTwi я попровал ка ты говорил через среднее арифметическое, не то! Цвет уж очень какой то страшно далекий от то что должно быть. Может я не верно считаю среднее арифметическое. То есть я беру сумму цветов и делю на их кол-во

Код:

 

while (_byteArray.position < _byteArray.length) {

        k++;

        str=_byteArray.readUnsignedInt().toString(16);

        str=str.substring(2,str.length);

        _color+=int("0x"+str);

}

_color=_color/k;

_color=uint("0xff"+_color.toString(16));

Может кто подскажет как лучше вычислять конечный "общий" цвет?

эге, надо ведь покомпонентно смешивать

тебе надо посчитать не среднее число цвета, а средние числа его составляющих. тоесть R отдельно G отдельно и B отдельно. а у тя получается ваще фиг знает какое число. явно не то что тебе нужно :)

Что-то я не понял, зачем переводишь в строку и обратно? Это же медленно!
Лучше воспользуйся битовыми операциями.

Код:

r = 0;

g = 0;

b = 0;

while (_byteArray.position < _byteArray.length) {

        k++;

        c = _byteArray.readUnsignedInt();

        r += (c & 0xff0000)>>16;  // это красная составляющая

        g += (c & 0xff00)>>8;  // это зелёная составляющая

        b += c & 0xff;  // это синяя составляющая

}

_color= ((r/k) << 16) + ((g/k) << 8) + b/k;

Цитата:

Сообщение от NewMan_by

MerlinTwi я попровал ка ты говорил через среднее арифметическое, не то! Цвет уж очень какой то страшно далекий от то что должно быть.
. . .
Может кто подскажет как лучше вычислять конечный "общий" цвет?

Тебе правильно заметили, ты суммируешь все в одну кучу :)
В массиве ByteArray цвет одной точки сохраняется в 4 байта: прозрачность, красный, зеленый, синий
Надо суммировать каждый байт отдельно. Ниже см. пример.

А чем не подходит метод с уменьшением и увеличением картинки? Во-первых быстрее, во-вторых меньше кода. Я-то вариант с byteArray привел только как пример использования новых методов AS3 для решения этой задачи (это ведь форум по AS3 ;-)

Код:

// размеры картинки

var w:int = 200;

var h:int = 200;

var step:int = 16; // размер блока пикселизации

// нарисуем что-нибудь градиентное

var s:Shape = new Shape();

var matr:Matrix = new Matrix();

matr.createGradientBox(w, h, 20, 0, 0);

s.graphics.beginGradientFill(GradientType.LINEAR, [0x0000FF, 0x00FF00], [100, 100], [0x00, 0xFF], matr);

s.graphics.drawRect(0,0,w,h);

s.graphics.endFill();

addChild(s);



// Создаем BitmapData с картинкой

var bd:BitmapData = new BitmapData(w,h);

bd.draw(s);

addChild(new Bitmap(bd)).x = w + 10;



var tm:Number = getTimer(); // посчитаем сколько времени это займет

for (var y1:int=0; y1<h; y1+=step) {

        for (var x1:int=0; x1<w; x1+=step) {

                // считываем блок

                var b:ByteArray = bd.getPixels(new Rectangle(x1,y1,step,step));

                b.position=0;

                var alph:int=0, red:int=0, green:int=0, blue:int=0, cnt:int=0;

                while (b.bytesAvailable) {

                        alph += b.readUnsignedByte();

                        red += b.readUnsignedByte();

                        green += b.readUnsignedByte();

                        blue += b.readUnsignedByte();

                        cnt++;

                }

                // усредняем цвет

                alph /= cnt;

                red /= cnt;

                green /= cnt;

                blue /= cnt;

                // заполняем массив

                b.position=0;

                while (cnt--) {

                        b.writeByte(alph);

                        b.writeByte(red);

                        b.writeByte(green);

                        b.writeByte(blue);

                }



                // записываем массив обратно в картинку

                b.position=0;

                bd.setPixels(new Rectangle(x1,y1,step,step), b);

        }

}

trace("Time bytearray:", getTimer()-tm);



//------------------------------------------------------------

// Теперь попробуем метод с уменьшением и увеличением картинки

var bmp2:BitmapData = new BitmapData(w,h);

addChild(new Bitmap(bmp2)).y = h+ 10;



// создаём временный битмап

var bmpTemp:BitmapData = new BitmapData(w,h);



// подготовливаем матрицы для преобразования

var m1:Matrix = new Matrix();

m1.scale(1/step,1/step);

var m2:Matrix = new Matrix();

m2.scale(step,step);



tm = getTimer();

// уменьшаем

bmpTemp.draw(s,m1);

// увеличиваем

bmp2.draw(bmpTemp,m2);

trace("Time resize:", getTimer()-tm);

P.S. В результате теста обнаружился баг: если размер блока не кратен размеру картинки, то в варианте уменьшения-увеличения картинки справа и внизу видны артефакты :(

Я релиазивал первый вариант который привел WindWalker и он работает вполне подходяще и быстро. Спасибо WindWalker!