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

Logo para realidad aumentada

Me gustaría recomendar un link que puede ser de gran utilidad para todos aquellos que tiramos del carro de la RA. De momento está solo en inglés en una fase beta pero el objetivo básico de esta iniciativa es identificar la RA cuando se encuentre en un entorno off-line.

Tiene toda la lógica. Ahora es una tecnología muy incipiente pero qué pasará cuando vayas por la calle y veas una marquesina de autobús con RA en la publicidad? O un packaging de un juguete o unas zapatillas, que visto a través de la cámara de tu móvil reproduce una u otra información?

Está claro, habrá que identificarlo con una identidad visual al igual que Bluetooth tiene su logo para indicar que conectándolo en tu móvil puedes descargarte cierta información o si ves el logo de Wi-Fi en el escaparate de un bar, sabes que tienes conexión a internet sin cables.

Será cuestión de ir integrándolo en cualquier trabajo relacionado con la tecnología, que funcione el boca-a-boca y se vaya standarizando como un referente más.

Ahí va: http://www.augmentedrealitylogo.com

Espero que os sea de utilidad. Desde luego a mí me lo resulta de cara a vender proyectos con Realidad Aumentada a mis clientes o agencias con las que trabajo. Da más empaque y seriedad al trabajo final y mayor confianza para apostar por 'esa cosa nueva' tan espectacular  :)

Buscamos colaboradores

Buscamos colaboradores

Buscamos desarrolladores Flash que tengan las siguientes características:

- Nivel senior en AS2 y AS3, programando con OOP

- Nociones de php. No es necesario que sea un crack pero si que esté familiarizado con envios de mails, bases de datos subida de archivos, etc....

- Que le guste su trabajo. Que cuando saquen Actionscript 4 esté deseando probarlo y no vaya llorando por las esquinas. Que cuando tenga que hacer algo que no ha hecho nunca no diga NO sino "lo miro y te cuento".

Puntos extra

- Que le haya echado un ojo a la API de android, o que se haya pegado con webs para iphone

- Experiencia desarrollando aplicaciones para facebook

Buscamos Freelance residentes en Madrid, para trabajar en nuestra oficina (al lado de la Plaza Mayor) o desde su casa.

Las condiciones estamos abiertos a negociarlas, pueden ser colaboraciones en proyectos puntuales o fees mensuales, todo es hablarlo.

Para que os hagáis una idea del tipo de trabajos que hacemos, estos son los últimos:

Samsung Impresoras

Loewe

Young & Rubicam

Mi mail es contacto@esedeerre.com

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

Cambiar la visualización utilizando Vertex

Etiquetas: vertex

Siguiendo con el tema de los Vertex en Papervision GreatWhite, dejo este ejemplo de como nos pueden valer para cambiar la visualización de manera sencilla.

Con un switch de este tipo:

 
switch(visualizacion) {
	case 1:
		vertex.z += (Math.abs(mouseX - n3d[count].x) - vertex.z) / 10;
	break;
	case 2:
		vertex.z += (Math.abs(mouseX - n3d[count].x) - vertex.z) / vs[count]; 
	break;
	case 3:
		vertex.z += (Math.min(5 * Math.abs(mouseX - (stage.stageWidth - 1000)/2 - n3d[count].x) +  5 * Math.abs(mouseY - (stage.stageHeight - 400)/2 - n3d[count].y),500) - vertex.z) / vs[count]; 
	break
}

podemos cambiar la reacción de los vértices a los movimientos del ratón.

Posicionar vértices en Papervision3D

Etiquetas: vertex WireFrameMaterial

Los elementos 3D (planos, esferas, modelos 3d, etc) están compuestos de triángulos.

Por ejemplo, si creamos un plano en Papervision3D con un WireframeMaterial con la siguiente sintaxis:

 
var plano:Plane = new Plane(material, 100, 100, 4, 3)	
 

obtenemos un resultado parecido a este:

Los vértices de un objeto están almacenados en un Array (vertex) dentro de la propiedad geometry del objeto. Por ejemplo, en el caso de nuestro plano podemos recorrer los vértices con este bucle:

 
for each (var vertex:Vertex3D in plano.geometry.vertices) {
}
 

Los números que he colocado sobre la imagen anterior, indican el orden en el que aparecen los vértices en esta matriz. Podemos observar que un plano por n x m segmentos, tiene (n+1) x (m+1) vértices.

En nuestro caso, el plano de 4x3 segmentos, tiene 5x4 vértices, ordenados de abajo arriba y de izquierda a derecha.

Estos vértices tienen unas coordenadas, que dan a la malla la apariencia de plano, y se pueden modificar. Por ejemplo imaginemos que queremos hacer un carrusel circular compuesto por 8 planos.

Podemos crear los 8 planos, y distribuirlos en el círculo mirando al centro, con lo que obtendríamos algo asi (click en la imagen para ver):

El efecto es resulton, pero si nos fijamos, los planos aparecen rígidos y no se adaptan a la forma del círculo. Para solucionarlo, podemos posicionar los vértices de los planos en el círculo, en lugar de los propios planos, con lo que obtendríamos algo asi (click en la imagen para ver):

Aunque en principio puede parecer muy complejo "posicionar vértices", en realidad haciendo un par de ejemplos se entiende perfectamente, y en algunos proyectos puede mejorar mucho los resultados. Dejo los fuentes comentados, para poder probar las dos opciones y ver las diferencias.

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.

Envio de email con adjuntos en AS3 y PHP

Etiquetas: FileReference FileFilter URLRequest

Este ejemplo muestra como hacer un formulario en Flash (Actionscript 3.0) con envio de adjuntos.

El esquema básico es que hacemos una subida normal con FileReference, y en el URLRequest de la subida incluimos las variables que queramos adjuntar en el formulario:

 
var request:URLRequest = new URLRequest(url);
request.method = URLRequestMethod.POST;
request.data = new URLVariables();
request.data.nombre = Nombre_txt.text;
request.data.destinatario = Destinatario_txt.text;	
subidor.upload(request);
 

Estas variables las recogemos después en el PHP con el nombre que les hayamos puesto con:

 
$_REQUEST[nombre]
 

En el php tenemos el código típico de una subida, y una vez terminada pasamos a montar el correo electrónico.

Dejo los fuentes con el fla, la clase Formulario, y el php para la subida.

El código php es una versión adaptada del que podéis encontrar en esta página

Estadísticas de esedeerre en 2010

Estas son las estadísticas de usuarios de esedeerre en 2009, y su evolución respecto a 2008: Usuario únicos: 101.676 Versiones de Flash: Flash Player 10 ya es la versión de la mayoría de los usuarios. En las estadísticas anuales la versión está instalada en el 83% de los ordenadores, y en las de diciembre llega al 88% Anuales: Diciembre Navegadores: La mayor diferencia respecto a 2008 es la subida de Google Chrome: pasa del 2% al 7% y continúa subiendo: en diciembre llega al 10,5%. Firefox se mantiene por encima del 50%, e Internet Explorer baja en diciembre hasta el 27%. Anuales: Diciembre Sistema operativo: Estadísticas prácticamente calcadas al año pasado: 88,22% Windows, 10,26% Macintosh Lo mas curioso de estás estadísticas, es que si miramos las versiones de windows en diciembre de 2009, obtenemos esta gráfica: XP sigue instalado en el 65% de los ordenadores, y Windows 7 ya casi iguala a Vista, instalado solo en el 18% de los ordenadores. Resoluciones de pantalla: El resumen es que cada vez hay mas resoluciones distintas, y que 800x600 "desaparece" definitivamente del mapa.