Pixelization

[NewMan_by]

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

[MerlinTwi]

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

[WindWalker]

Могу предложить 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);

[NewMan_by]

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));

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

[FlexBuilder]

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

[BlooDHounD]

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

[WindWalker]

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

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;

[MerlinTwi]

Сообщение от 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. В результате теста обнаружился баг: если размер блока не кратен размеру картинки, то в варианте уменьшения-увеличения картинки справа и внизу видны артефакты

[NewMan_by]

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