Pixelar Textos en Papervision

Mezclando los experimentos con cubos y el de pixelizar imágenes, he hecho esta prueba para convertir textos en cubos 3D.

VER EJEMPLO EN MOVIMIENTO

El funcionamiento es sencillo.

1. Rellenar un campo de texto con la palabra que queremos "pixelizar":

2. Hacer un BitmapData con el texto, y dividirlo en cuadrados de lado n:

3. Repasar los cuadrados, y marcar los que tengan el pixel superior izquierdo de color negro:

4. Crear cubos en las coordenadas de los cuadrados que hemos marcado. Estos cubos pueden tener imágenes como material, colores, etc...

El resultado depende de varios factores. Podemos jugar con la tipografía utilizada, el tamaño de los cuadrados (a menor tamaño, mas precisión), el material de los cubos... Jugando con estos parámetros podemos conseguir cosas así (imágenes tras el salto):

Prueba de rendimiento para Papervision y Box2D

Etiquetas: PointLight3D FlatShadeMaterial b2AABB

Lo dicho, prueba de rendimiento con Papervision GreatWhite y Box2D.

Un PointLight3D, 100 cubos, 4 de las caras con FlatShadeMaterial, y por detras una simulación de físicas con Box2D a 5 iteraciones.

Cuando pueda limpiar el código y optimizar, lo publico comentado.

Cualquier comentario sobre el rendimiento será bienvenido.

ver ejemplo en movimiento

Pixelando imágenes en Actionscript 3.0

Etiquetas: Bitmapdata threshold getPixel32 draw

Este post es una modificación de este experimento.

En el anterior recortaba una imagen en cuadrados, comprobando si contenían algún pixel transparente o no. En este divido la imagen en cuadrados, calculo el color que aparece mas veces en ese cuadrado, y creo un Shape relleno de ese color que coloco en las coordenadas del cuadrado.

Las función que calcula el color dominante es esta:

 
public static function obtenerColorPrincipal( source:BitmapData):Array
{
	var n:Object = {};
	var a:Array = [];
	var p:int;
	var alphaValue:uint
 
	for (var x:int = 0; x < source.width; x += 10) 
	{
		for (var y:int = 0; y < source.height; y+= 10) 
		{
			p = source.getPixel32(x, y);
			alphaValue = p >> 24 & 0xFF;
			if (alphaValue > 0x00) {
				n[p] ? n[p]++ : n[p] = 1;
			}
		}
	}
 
	for (var c:String in n)
	{
		a.push ( { colour:c, count:n[c] } );
	}
 
	return a.sortOn( ["count"], Array.DESCENDING );
}

Realidad Aumentada y Físicas con FlarToolKit y FOAM

Etiquetas: FlarToolKit

Esta noche me he puesto por primera vez con Realidad Aumentada (FlarToolKit) y la cosa parece bastante sencilla (por lo menos a un nivel básico de uso) .

He hecho una demo en la que controlo unos cubos sobre una superficie plana, mezclando Papervision y FOAM. De momento dejo un video tras el salto, cuando tenga una visión mas clara de la librería, haré un tutorial.

BitmapData: Recortar imágenes seleccionando trozos no transparentes

Etiquetas: threshold

No sé si le servirá a alguien, pero hoy entrenando se me ha ocurrido hacer esto y creo que puedo tener alguna aplicación interesante.

Se trata de recortar una imagen en cuadrados, haciendo que los recortes afecten solo a los pixels no transparentes de la imagen, utilizando threshold y Bitmapdata.

Primero dividimos la imagen en cuadrados, y comprobamos si los cuadrados contienen algún pixel no vacío (es decir, que no sea transparente). Si el cuadrado no está vacio, creamos un botón con el trozo de imagen que le corresponde, y si no no.

Por último, en los botones que hemos creado, mostramos solo el handCursor cuando el pixel sobre el que está el ratón no es transparente.

Comparando imágenes en Actionscript 3.0 con compare()

Etiquetas: BitmapData draw Bitmap compare

Esta prueba se me ha ocurrido hoy en el metro. Es algo muy sencillo, hacer una captura de un video, y compararla con la anterior para sacar los pixels diferentes y mostrar esta diferencia.

La comparación se puede hacer con la función compare de BitmapData:

 
  var df:BitmapData = BitmapData(bmd.compare(ant));

Hay que tener "cuidado" con esta función, ya que no siempre devuelve un objeto BitmapData. Según la ayuda de Flash:

Si los objetos BitmapData son equivalentes (con la misma anchura y altura e idénticos valores de píxeles), el método devolverá el número 0.

Si la anchura de los objetos BitmapData no es la misma pero la altura sí, el método devolverá el número -3.

Si la altura de los objetos BitmapData no es la misma pero la anchura sí, el método devolverá el número -4.

El video que he utilizado para la prueba es D.A.N.C.E., del grupo francés Justice.

Guardar imágenes en AS3 con PNGEncoder y Base64

Etiquetas: PNGEncoder Base64 BitmapData Rectangle encodeByteArray

Para guardar una imagen en AS2 habia que almacenar los colores de todos sus pixels, y mandar una cadena de texto con los valores a un fichero en el servidor para que creara la imagen. Esto era viable para imágenes relativamente pequeñas, ya que tanto Flash como el servidor tardaban mucho en procesar los datos. Con AS3 han surgido varias clases que aprovechan el potencial de la clase ByteArray y optimizan el flujo de datos Flash/servidor. En este ejemplo utilizo las clases PNGEncoder y Base64 para guardar un dibujo hecho en flash y guardarlo en el servidor como PNG. El tamaño de la imagen es de 400x400, y el proceso no dura más de 2 seg.

Este es el código:

Experimento: APE + Papervision

Este es mi primer experimento con APE + Papervision. Puedes ver el resultado a pantalla completa aquí.

Flash + Flickr: Galeria de imágenes

Desde hace un tiempo, Flickr permite acceder a sus datos y archivos a través de una API desarrollada por usuarios. Incluso han habilitado ficheros crossdomain en sus servidores para que se pueda acceder a los archivos desde plataformas como Flash. La API es bastante potente, y además es muy fácil de usar. La documentación está disponible aquí:

http://flickr.com/services/api/

Por mi parte he hecho algunas pruebas, y he colgado los primeros resultados aquí (espero ir mejorando/actualizando).

Acceso galeria

Actionscript 3.0: Simular el movimiento de una cuerda

Etiquetas: addEventListener graphics clear moveTo lineStyle curveTo Math.sin Math.sqrt

Cuando empecé a aprender Flash, lo que más me llamaba la atención eran los experimentos de páginas como uncontrol. Con el tiempo he ido viendo que algunos de esos experimentos no son tan complicados como me parecían, sino que son una mezcla de imaginación y matemáticas. Este es el código para simular el movimiento de una cuerda oscilando, utilizando la función curveTo y un poco de matemáticas.

"Simulación de 3D" con BitMapData y Actionscript 3.0

La idea me la dió Ximo en una de nuestras escapadas a por desayunos del Chess. Se coge una imagen y se proyecta sobre el suelo, troceándola y escalando los trozos para dar sensación de profundidad. Este es mi primer intento, de momento no es muy realista, pero todo se andará.