Laibum http://www.laibum.com/blog Cocoa, AS3 (Flash, Flex) Thu, 07 May 2009 07:04:22 +0000 http://wordpress.org/?v=2.6.1 en FlarToolkit - Augmented Reality http://www.laibum.com/blog/2009/05/03/flartoolkit-augmented-reality/ http://www.laibum.com/blog/2009/05/03/flartoolkit-augmented-reality/#comments Sun, 03 May 2009 05:28:29 +0000 aurbac http://www.laibum.com/blog/?p=109 Si!! está vez es un ejemplo más del mundo 3d pero ahora en Realidad Aumentada en Flash con papervision3d. Para este ejemplo igual se necesita de otras librerias que nos ayuden a generar este entorno junto con las clases ya comunes de papervision3d. Por lo que necesitaremos bajarlas desde este link:

http://www.libspark.org/svn/as3/FLARToolKit/trunk
Pero en este caso no hay un zip o algo para poder descaragar nuestro paquetito de clases, por lo que se neceisita de un programa SVN, podrán ayudar estos que se encuentran aquí, hay uno muy bueno para mac que se llama Versions, que alguien pase un serial, que diga me ayude a comprar una licencial!!!
Nuestra creación será lo siguiente:

Ejemplos para hacer algo así hay muy pocos y aún falta por entender el uso de las clases jaja lo malo que la mayoría de la documentación y ejemplos está en japonés, diablos, algún día aprenderé.

El proyecto en esté caso lo hice en el FlexBuilder como "ActionScript Project", solo es cuestión de copiar y pegar. Necesitaras estos dos archivos:

camera_para.dat y marker16.pat

Después para probar nuestro ejemplo, tenemos que imprimir el patrón imagen, en este ejemplo usaremos el ya conocido patrón que se hace uso en GE.

http://ge.ecomagination.com/smartgrid/ar/printme.pdf

Y pues es todo, aqui esta el demo en línea para que lo prueben, no olviden imprimir el patrón imagen del archivo pdf.

  1. package {
  2.     import flash.display.BitmapData;
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.     import flash.media.Camera;
  6.     import flash.media.Video;
  7.     import flash.utils.ByteArray;
  8.    
  9.     import org.libspark.flartoolkit.core.FLARCode;
  10.     import org.libspark.flartoolkit.core.param.FLARParam;
  11.     import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
  12.     import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
  13.     import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
  14.     import org.libspark.flartoolkit.pv3d.FLARBaseNode;
  15.     import org.libspark.flartoolkit.pv3d.FLARCamera3D;
  16.  
  17.     import org.papervision3d.lights.PointLight3D;
  18.     import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  19.     import org.papervision3d.materials.utils.MaterialsList;
  20.     import org.papervision3d.materials.ColorMaterial;
  21.     import org.papervision3d.objects.primitives.Cube;
  22.     import org.papervision3d.render.BasicRenderEngine;
  23.     import org.papervision3d.scenes.Scene3D;
  24.     import org.papervision3d.view.Viewport3D;
  25.    
  26.     [SWF(width="600", height="450", frameRate="30", backgroundColor="#000000")]
  27.  
  28.     public class FirstAR extends Sprite{
  29.         [Embed(source="marker16.pat", mimeType="application/octet-stream")]
  30.         private var pattern:Class;
  31.        
  32.         [Embed(source="camera_para.dat", mimeType="application/octet-stream")]
  33.         private var params:Class;
  34.        
  35.         private var flarParam:FLARParam;
  36.         private var flarCode:FLARCode;
  37.        
  38.         private var camera:Camera;
  39.         private var video:Video;
  40.         private var bitmapData:BitmapData;
  41.         private var raster:FLARRgbRaster_BitmapData;
  42.         private var detector:FLARSingleMarkerDetector;
  43.  
  44.        
  45.         private var scene:Scene3D;
  46.         private var viewport:Viewport3D;
  47.         private var render:BasicRenderEngine;
  48.                        
  49.         private var cube:Cube;
  50.        
  51.         private var cam3D:FLARCamera3D;
  52.         private var container:FLARBaseNode;
  53.         private var trans:FLARTransMatResult;
  54.        
  55.         public function FirstAR(){
  56.             setFLAR(); // Carga de nuestro patrón y parametros de camara
  57.             setCamera(); // Agregamos nuestra camara al stage
  58.             setBitmap(); // Establecemos nuestro objeto bitmapData para generar AR
  59.             setPV3D(); // Nuestro entorno básico de papervision3d mas FlarToolkit
  60.             addEventListener(Event.ENTER_FRAME, onEnter); // Generando la salida cada frame de la pelicula
  61.         }
  62.        
  63.         private function setFLAR():void{
  64.             flarParam = new FLARParam();
  65.             flarParam.loadARParam(new params() as ByteArray);
  66.             flarCode = new FLARCode(16, 16);
  67.             flarCode.loadARPatt(new pattern());
  68.         }   
  69.        
  70.         private function setCamera():void{
  71.             video = new Video(600, 450);
  72.             camera = Camera.getCamera();
  73.             camera.setMode(600, 450, 30);
  74.             video.attachCamera(camera);
  75.             addChild(video);
  76.         }   
  77.        
  78.         private function setBitmap():void{
  79.             bitmapData = new BitmapData(640, 480);
  80.             bitmapData.draw(video);
  81.             raster = new FLARRgbRaster_BitmapData(bitmapData);
  82.             detector = new FLARSingleMarkerDetector(flarParam, flarCode, 80);
  83.         }   
  84.        
  85.         private function setPV3D():void{
  86.             // Al generar el entorno 3d, cambiamos la clase Camera3d por FLARCamera3D, además de
  87.             // agregar a la escena un contenedor de la clase FLARBaseNode al cual agregaremos
  88.             // nuestros objetos, lo demás es igual, salvo los usos de clases de Flar
  89.             scene = new Scene3D();
  90.             cam3D = new FLARCamera3D(flarParam);
  91.             container = new FLARBaseNode();
  92.             scene.addChild(container);
  93.            
  94.             var cube:Cube = new Cube(new MaterialsList({ front: new ColorMaterial(0x00ccff),
  95.                                                 left: new ColorMaterial(0xccff00),
  96.                                                 right: new ColorMaterial(0xffcc00),
  97.                                                 top: new ColorMaterial(0xff6666),
  98.                                                 bottom: new ColorMaterial(0x00cc33),
  99.                                                 back: new ColorMaterial(0xffffcc) }), 30, 30, 30);
  100.                                                            
  101.             cube.z = 50;
  102.             container.addChild(cube);
  103.            
  104.             render = new BasicRenderEngine();
  105.             trans = new FLARTransMatResult();
  106.            
  107.             viewport = new Viewport3D(600, 450, true);
  108.             addChild(viewport);
  109.         }   
  110.        
  111.         private function onEnter(e:Event):void{
  112.             // Cada refresco de frame generaremos la imagen del video de salida para que sea procesado
  113.             // y si se detecta el patrón en la imagen, el entorno 3d hace su aparicion
  114.             // siguiendo los movimientos del patrón imagen
  115.             bitmapData.draw(video);
  116.             try{
  117.                 if(detector.detectMarkerLite(raster, 80) && detector.getConfidence()> 0.5){
  118.                     detector.getTransformMatrix(trans);
  119.                     container.setTransformMatrix(trans);
  120.                     render.renderScene(scene, cam3D, viewport);
  121.                 }
  122.             }
  123.             catch(e:Error){
  124.             }
  125.         }
  126.     }
  127. }

]]> http://www.laibum.com/blog/2009/05/03/flartoolkit-augmented-reality/feed/ Hello Cube http://www.laibum.com/blog/2009/04/19/hello-cube/ http://www.laibum.com/blog/2009/04/19/hello-cube/#comments Sun, 19 Apr 2009 05:53:53 +0000 aurbac http://www.laibum.com/blog/?p=97 Y hace mucho pero mucho... cuando todavía... cambiando un poquito, un ejemplo básico de inicio para Papervision3D 2.0, la librería y demás recursos los pueden encontrar en http://papervision3d.googlecode.com y nuestro resultado final será esto:

Para poder empezar y generar nuestro espacio 3d necesitamos de 4 clases básicas para generar el entorno Viewport, Scene3D, Camera3D y BasicRenderEngine.

  1. package{
  2.    
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.    
  6.     import org.papervision3d.scenes.Scene3D;
  7.     import org.papervision3d.cameras.Camera3D;
  8.     import org.papervision3d.render.BasicRenderEngine;
  9.     import org.papervision3d.view.Viewport3D;
  10.    
  11.     import org.papervision3d.objects.primitives.Cube;
  12.     import org.papervision3d.materials.utils.MaterialsList;
  13.     import org.papervision3d.materials.ColorMaterial;
  14.    
  15.     public class HelloCube extends Sprite{
  16.        
  17.         private var scene:Scene3D;
  18.         private var camera:Camera3D;
  19.         private var renderer:BasicRenderEngine;
  20.         private var view:Viewport3D;
  21.        
  22.         private var cube:Cube;
  23.        
  24.         public function HelloCube():void{
  25.             super();
  26.             setupPV3D();
  27.             //Si eres nuevo, este evento captura cada vez que se entra en un nuevo frame de la pelicula
  28.             //esto para que cada vez que suceda esto, se refresque el espacio 3d
  29.             addEventListener(Event.ENTER_FRAME, onEnter);
  30.         }
  31.        
  32.         private function setupPV3D():void{
  33.             //Ahora el elemento que se agrega al stage es el viewport, a diferencia de la version 1.5 recuerdo era la escena
  34.             scene = new Scene3D();
  35.             view = new Viewport3D(640, 480, true);
  36.             addChild(view);
  37.             renderer = new BasicRenderEngine();
  38.             camera = new Camera3D(60);
  39.            
  40.             //Para crear un cubo, se necesita al igual que para todos los objetos el material que compondra su piel
  41.             //en este caso se utiliza un color solido dentro de una lista de materiales indicando
  42.             //el material que le corresponde a cada cara del cubo
  43.             cube = new Cube(new MaterialsList({ front: new ColorMaterial(0x00ccff),
  44.                                                 left: new ColorMaterial(0xccff00),
  45.                                                 right: new ColorMaterial(0xffcc00),
  46.                                                 top: new ColorMaterial(0xff6666),
  47.                                                 bottom: new ColorMaterial(0x00cc33),
  48.                                                 back: new ColorMaterial(0xffffcc) }), 300, 300, 300);
  49.             //Todos los objetos creados son agregados solamente a la escena
  50.             scene.addChild(cube);
  51.            
  52.         }
  53.        
  54.         private function onEnter(e:Event):void{
  55.             //Rota el objeto en el eje X, el número de grados indicados
  56.             cube.pitch(3);
  57.             //Rota el objeto en el eje Y
  58.             cube.yaw(3);
  59.             //Generar la imagen de salida para este frame del espacio 3d
  60.             renderer.renderScene(scene,camera,view);
  61.         }
  62.     }
  63. }

Descargar archivos

]]> http://www.laibum.com/blog/2009/04/19/hello-cube/feed/ Headers and Structs http://www.laibum.com/blog/2008/09/10/headers-and-structs/ http://www.laibum.com/blog/2008/09/10/headers-and-structs/#comments Wed, 10 Sep 2008 15:28:56 +0000 aurbac http://www.laibum.com/blog/?p=62 Antes de entrar por completo a programación orientada a objetos seria bueno recordar algo de “headers” y “structs”.

Es común usar estructuras para englobar ciertos datos en una sola variable, ya que seria un completo desastre almacenarlos en variables separadas, por lo que una estructura es la agrupación de variables.

Los Headers son archivos que se usan para agrupar la declaración de funciones, variables y tipos de datos, esto para poder administrarlos en un diferente lugar al programa principal, ya que al tener proyectos grandes nos da la posibilidad de ver una sobrevista de nuestras líneas de código.

Primero creamos un nuevo proyecto Foundation Tool, dentro de la carpeta Source creamos un archivo nuevo pero esta vez será uno de C File que se encuentra en C and C++, como nombre le podremos lifo, cada archivo de C que se crea viene acompañado de su archivo de cabecera, en este caso lifo.h, aquí solo declararemos la estructura a usar y la de nuestras funciones.

Por lo tanto nuestro archivo lifo.h va a tener la declaración de la estructura pila que la llamamos Lifo y de sus operaciones, quedando así:

  1. typedef struct {
  2.     int *pila;
  3.     int *topePila;
  4.     int currentIndex;
  5.     int maxValues;
  6. } LiFo;
  7.  
  8. void initLiFo(LiFo *pila, int numValues);
  9. void statusLiFo(LiFo *pila);
  10. void pushLiFo(LiFo *pila, int value);
  11. int popLiFo(LiFo *pila);

Ahora abriremos nuestro archivo lifo.c, aquí pondremos nuestras funciones que usaremos, estas representan las operaciones básicas de nuestra pila, nota: en C solo se pone la serie de funciones a usar, aquí tenemos que agregar la instrucción de #import "lifo.h"

  1. #import "lifo.h";
  2.  
  3. void initLiFo(LiFo *pila, int numValues){
  4.     pila->pila = calloc(numValues, sizeof(int));
  5.     pila->topePila = pila->pila;
  6.     pila->currentIndex = 0;
  7.     pila->maxValues = numValues;
  8. }
  9.  
  10. void statusLiFo(LiFo *pila){
  11.     int i=0;
  12.     printf("\nValores maximos: %i\n", pila->maxValues);
  13.     printf("Indice tope de pila: %i\n", pila->currentIndex);
  14.     printf("\t--------\n");
  15.     pila->pila--;
  16.     for (i=pila->currentIndex; i>0; i--){
  17.         printf("\t %i\n", *pila->pila);
  18.         pila->pila--;
  19.     }
  20.     pila->pila = pila->topePila;
  21. }
  22.  
  23. void pushLiFo(LiFo *pila, int value){
  24.     if (pila->currentIndex<pila->maxValues){
  25.         *pila->pila = value;
  26.         pila->pila++;
  27.         pila->topePila = pila->pila;
  28.         pila->currentIndex++;
  29.     }else{
  30.         printf("\n++ Desbordamiento de memoria ++\n");
  31.     }
  32. }
  33.  
  34. int popLiFo(LiFo *pila){
  35.     if (pila->currentIndex!=0){
  36.         pila->pila--;
  37.         int value = *pila->pila;
  38.         pila->topePila = pila->pila;
  39.         pila->currentIndex--;
  40.         return value;
  41.     }else{
  42.         printf("\n++ SubDesbordamiento de memoria ++\n");
  43.         return -1;
  44.     }
  45. }

Y por ultimo editaremos el archivo Pila.m, primero incluiremos el archivo lifo.h, ahora si podemos hacer uso de nuestra estructura y funciones, por lo que declaramos una pila de tipo Lifo, y hacemos las respectivas llamadas a funciones para manejar nuestra pila, un detalle es que pasamos nuestra pila por referencia a nuestra función, esto es que no enviamos los datos sino que enviamos la dirección de memoria de la pila:

  1. #import <Foundation/Foundation.h>
  2. #import <stdio.h>
  3. #import "lifo.h"
  4.  
  5. int main (int argc, const char * argv[]) {
  6.     NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
  7.    
  8.     LiFo pila;
  9.     initLiFo(&pila,2);
  10.     printf("\nSe saco el elemento %i\n",popLiFo(&pila));
  11.     statusLiFo(&pila);
  12.     pushLiFo(&pila, 10);
  13.     pushLiFo(&pila, 12);
  14.     pushLiFo(&pila, 20);
  15.     statusLiFo(&pila);
  16.     printf("\nSe saco el elemento %i\n",popLiFo(&pila));
  17.     printf("\nSe saco el elemento %i\n",popLiFo(&pila));
  18.     pushLiFo(&pila, 13);
  19.     statusLiFo(&pila);
  20.    
  21.     [pool drain];
  22.     return 0;
  23. }

Listo ahora ya podemos dar un Build & Go, para ver el resultado de nuestro proyecto, por lo que podríamos ver algo así.

]]> http://www.laibum.com/blog/2008/09/10/headers-and-structs/feed/ Hello, World! http://www.laibum.com/blog/2008/09/08/hello-world/ http://www.laibum.com/blog/2008/09/08/hello-world/#comments Mon, 08 Sep 2008 23:13:00 +0000 aurbac http://www.laibum.com/blog/?p=25 Como es costumbre iniciar al aprender un nuevo lenguaje de programación, es el hacer un tradicional "Hola Mundo", en este caso será un poco más amplio, por que en esta ocasión solo va a ser necesario hacer unos cuantos clicks y listo, el IDE te lo generará automáticamente, listo para Build & Go.

Iniciaremos por abrir nuestro Xcode, el cual lo primero que nos muestra es una ventana de Bienvenida, pero lo que vamos  hacer es iniciar un proyecto nuevo, en modo Consola como lo conocemos, nos dirigimos al menú File->New Project en el listado de la izquierda seleccionamos Command Line Utility y elegimos el template Fuondation Tool and Choose...

Después nos indicará que elijamos la ruta donde se generará el proyecto, puedes tener una carpeta de Ejemplos y dentro de esa carpeta guardar los proyectos, Xcode te generará una carpeta por cada proyecto nuevo. Listo, nos mostrará nuestro navegador de archivos del proyecto, el código fuente en este caso será Hello.m, el mismo nombre con que guarde mi proyecto. Desde este paso podemos dar click en Build & Go, para poder ver la salida que produce, ir a menú Run->Console.

Si quieres más espacio para tratar el código fuente, solo doble Click en Hello.m y lo mostrará en una ventana aparte. Como esto no tendria sentido, y ya habia comentado que Objective-C esta basado en C, por lo tanto podemos incluir código que hayamos hecho en C para probar. Por lo que quedaria así.

  1. #import <Foundation/Foundation.h>
  2. #import <stdio.h>
  3.  
  4. int main (int argc, const char * argv[]) {
  5.     NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
  6.    
  7.     //Declaramos nuestras variables y punteros
  8.     int *nums = calloc(10, sizeof(int));
  9.     int *pnums;
  10.     int i=0;
  11.     //Asignamos la direccion inicial de nuestro arreglo a nuesrtro
  12.     //puntero auxiliar y llenamos el arreglo
  13.     pnums = nums;
  14.     for (i=10; i>0; i--) {
  15.         *nums = i;
  16.         nums++;
  17.     }
  18.     //Asignamos la direccion de auxiliar a nuestro arreglo
  19.     // e imprimimos sus valores
  20.     nums = pnums;
  21.     printf("Conteo de inicio\n");
  22.     for (i=0; i<10; i++) {
  23.         printf("\t---  %i\n",*nums);
  24.         nums++;
  25.     }
  26.    
  27.     NSLog(@"Hello, World!");
  28.    
  29.     [pool drain];
  30.     return 0;
  31. }

De esta forma probamos que hay completa compatibilidad, ya que hicimos uso de apuntadores y los tipos de datos comunes de C (bueno no todos), pero que significan las demás líneas extrañas?

#import <Foundation/Foundation.h>

En primera usamos import, pero al igual podemos usar include, diferencia?, buena pregunta, import se encarga de incluir solamente una vez el archivo si previamente esté no ha sido incluido, include no lo hace, este caso lo podemos ver también en php con include y require_once, Foundation.h incluye la definición de clases base de NextStep.

NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];

Esta instrucción nos crea un objeto para la administración de la memoria usado en Cocoa(otro termino por ver), este objeto nos cachara todas las asignaciones de memoria que se realicen para después limpiarlas cuando no se utilicen.

NSLog(@"Hello, World!");

NSLog es una función diseñada para desplegar mensajes de error, por eso al ejecutar nuestra aplicación muestra datos de fecha, etc. Algo importante los Strings son asignados y manejados por @"Cadena".

[pool drain];

Aquí solo mandamos a llamar el método drain del objeto pool que creamos arriba, para liberar memoria, después mas detalles.

]]> http://www.laibum.com/blog/2008/09/08/hello-world/feed/ Un poquito de historia y como iniciar http://www.laibum.com/blog/2008/08/30/un-poquitito-de-historia-y-como-iniciar/ http://www.laibum.com/blog/2008/08/30/un-poquitito-de-historia-y-como-iniciar/#comments Sat, 30 Aug 2008 05:47:06 +0000 aurbac http://www.laibum.com/blog/?p=10 Objective-C es el principal lenguaje para el desarrollo de Software para MAC, con el cual se necesitará de un poco de conocimientos de programación orientado a objetos y de C, ya que este fue creado como un subconjunto de C pero que implementa un modelo de objetos parecido al de Smalltak.

Pero bien, Apple la empresa fundada por Steve Jobs, la cuál en sus inicios y hasta ahorita como mucho saben dirigía de una manera fuerte, lo cual al contratar a John Sculley este decide quitarle cargos importantes a Steve Jobs provocando que este dejara Apple, o como se sabe, siendo despedido de lo que el mismo fundo.

El despido Steve Jobs lo impulsa a crear Pixar y NextStep, esta después del fracaso de Next. Next tenia como objetivo crear la siguiente generación de computadoras, el fracaso de este hizo que se enfocaran al desarrollo de Software, durante este tiempo Apple pasaba por una crisis ante el poco crecimiento de su Sistema Operativo, lo cual lo obliga a tomar un Sistema Operativo como base para seguir trabajando, siendo este bajo una elección, la cual gana NextStep y por lo mismo Steve Jobs vuelve a Apple.

NextStep brinda las posibilidades para el desarrollo de software en MAC, por lo cual el nombre de las clases que se usan inician con NS.

Para iniciar a desarrollar no necesitas comprar un IDE de desarrollo caro como muchos otros, lo único que necesitas es una MAC y su disco de instalación para instalar XCode ó puedes bajarlo del sitio de Apple.

Xcode en el dock

Nuestro entorno de desarrollo será primero XCode y posteriormente se usará Interface Builder. XCode lo encuentrás instalado en /Developer/Applications/Xcode y para que no seá tedioso ir a buscarlo sólo arrastralo al Dock para acceder de forma rápida.

]]> http://www.laibum.com/blog/2008/08/30/un-poquitito-de-historia-y-como-iniciar/feed/