SagMor

OOP en Javascript

2009-06-29T00:00:00+00:00

Javascript debe ser el lenguaje mas malentendido del mundo, pero resulta ser uno de los lenguajes mas interesantes y poderosos que hay, con sus bases funcionales se pueden hacer cosas muy interesantes y una de ellas es la programación orientada a objetos, aun que, sorprendentemente, esto es algo que no muchos saben que se puede hacer y mi intención es darle un par de vueltas en este post.

La gente que ha jugado con javascript estará acostumbrada a código eminentemente procedural con código como el siguiente:

function function_name(param1, param2, param3) {
  // Do something!
}

function_name(some, actual, params);

Está bien, se hace lo que se pide pero, imaginen unas 20, 30 o mas funciones de esas y ya tienes una pesadilla.

Luego uno conoce JSON que es excelente para pasar parámetros o transferirlo por la red.

some_function({
  arg1: 'value1',
  arg2: 'value2'
});

Esto definitivamente hace mas facil entender que se está haciendo, pero todavía falta algo, esas funciones desperdigadas por el mundo me molestan, así que definamos “objetos de verdad” ahora!

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  alert('Hello, ' + this.name);
}

// Y lo usamos:
var p = new Person('Sebastián');
p.greet();

Aquí creo que debería aclarar que es Person.prototype, el modelo de objetos de JavaScript se basa en en prototipos y el objeto Person.prototype no es mas que una colección de propiedades que se ván a copiar en toda instancia de Person que se cree, de hecho, nos podemos aprovechar de esto para implementar herencia!

function Employee(name, company) {
  this.name = name;
  this.company = company;
}

Employee.prototype = new Person();

var e = new Employee('Sebastián', 'Gaaper');
e.greet();

Esto sorprendentemente comienza a verse mejor y se vuelve mucho mas interesante cuando se entienden correctamente las clausuras (que para los que vienen de Ruby notarán que se parecen mucho a los bloques pero un poco mas potentes) ya que usándolas inteligentemente se pueden implementar encapsulamiento y espacios de nombres.

Veamos una clausura básica:

(function() {
  var private = 0;
  
  window.increaseValue = function() {
    private++;
  }
  
  window.getValue = function() {
    return private;
  }
})();

getValue();       // retorna 0;
increaseValue();
private--;        // error: ReferenceError: Can't find variable: private
getValue();       // retorna 1;

Esto básicamente encapsula el valor de private que es inaccesible desde fuera de la clausura y define las funciones increaseValue y getValue que permiten acceder y modificar private. Y para esto solo hizo falta definir una función anonima y ejecutarla!

Pero nos falta una cosa todavía, estas funciones están definidas en window por lo que se corre el riesgo de que existan conflictos de nombre con otro script y para eso acuden los espacios de nombres al rescate!

Namespace = {};

(function($) {
  var private = 0;
  
  $.increaseValue = function() {
    private++;
  }
  
  $.getValue = function() {
    return private;
  }
})(Namespace);

Namespace.increaseValue();
Namespace.getValue();

Fácil y rápido, hemos cambiado el ejemplo anterior para que utilizara un Espacio de Nombre y no definiera los métodos en window.

La verdad es que JavaScript es un lenguaje muy dinamico y existen otras formas de hacer todo lo que puse aquí cada una con sus pros y contras, pero intenté mantener todo lo mas sencillo posible y utilizando los diseños que a mi me parecen mas elegantes y si tienen alguna idea de como esto se podría hacer mejor, me encantaría que la plantearan en los comentarios.

Para finalizar les dejo un ejemplo que aplica gran parte de lo que puse aquí, es un poco mas complejo pero adelante ;)

(function($) {
  // Aquí defino la "clase Foo"
  function Foo(text) {
    /* Variable de instancia pública */
    this.text = text || privateMethod();
    
    /* Variable de instancia privada */
    var priv = 'ehem';
    
    /* método público que utiliza la variable privada */
    this.setPrivate = function(p) { priv = p; }
    
    /* método privado */
    function privateMethod() { return 'this is private: '+priv; }
  }
  
  Foo.prototype.getText = function() { return this.text; }  
  
  /* Variable de clase privada */
  var class_priv = 0;
  
  /* Método de clase público */
  Foo.bar = function() { 
    class_priv++; 
    return new Foo('bar'+class_priv); 
  }
  
  /* Método de clase privado */
  function helloFoo() { return new Foo('Hello'); }
  
  $.Foo = Foo;
  
})(window);

var f = new Foo('Hello!');

Y si quedaron con gusto a poco, aquí les dejo un lugar donde encontrar mas información pero en inglés.

Fácil y rápido

2009-06-28T00:00:00+00:00

Así es otra vez estoy inaugurando un nuevo sitio personal, pero esta ves utilizando las herramientas con las que en verdad me siento cómodo, ¡mi editor y mi terminal!

Ya lo se, es tan facil tener un sitio ahora. Instala Wordpress y listo!, pero para mí usar Wordpress es como usar Word, sencillamente complicado, me saca de mi flujo normal de trabajo y todas esas ventajas no se vuelven mas que distracciones y luego de ver lo que ofrecen los chicos de GitHub, pensé “Eso es justo lo que necesito!”.

La idea es fácil:

Te creas un repositorio llamado tu-nombre.github.com (donde tu-nombre es tu usuario en GitHub)
haces el sítio (casi como si fuera contenido estático)
lo subes, usando git, al repositorio que acabas de crear
y ya está, GitHub hace el resto.

Y siempre lo pueden complicar mas si quieren, de hecho es bastante personalizable y pueden aprender mas aquí.

Por cierto todo el sitio lo pueden encontrar en el repositorio sagmor.github.com

No soy delincuente

2009-04-02T00:00:00+00:00

Simplemente genial, porque todos somos delincuentes!? por Jani Dueñas

Vía: Huasonic | Más información en Nosoydelincuente.cl

Liberando Feeling Needish

2009-03-30T00:00:00+00:00

Saludos, hace tiempo que no escribo nada por acá.

Así que vamos, para variar, a colocar algo que le puede interesar a aquellos que están metidos en lo que es el desarrollo de aplicaciones nativas para el iPhone, se trata de la primera aplicación que desarrollé, bien fea por cierto, pero que mas se le puede pedir a un humilde ingeniero con un mes de trabajo ;)

Se trata de la aplicación con la que participé en el concurso Web2.0Rockstars en la que accedo a la api de Needish y pueden encontrar su código fuente completo aquí!.

Ojalá a alguien le sirva y le saque provecho…

Código Fuente CelShader

2008-11-17T00:00:00+00:00

Luego de haber trabajado limpiando un poco el código de la aplicación, y aprovechando que Apple levantó el NDA del iPhone, es un agrado informarles que el código fuente se encuentra disponible en mi repositorio Git en:

http://github.com/SagMor/iphone-celshader/

Versión final del proyecto de Cel-Shading

2008-11-16T00:00:00+00:00

Luego de un semestre completo de estudios y de trabajo, finalmente están listos los últimos detalles que me faltaban implementar para completar el proyecto de “Rendering no fotorealista” para el iPhone, entre estos últimos detalles destacan:

Cargar la textura del modelo y mostrarla en conjunto con la textura generada por el Cel-Shading
Una interfaz a través de la cual se puede:
- Seleccionar el modelo a cargar.</li>
- Activar o desactivar el algoritmo de Cel-Shading y a textura por defecto del modelo.
- Desplazar y acercar/alejar el modelo usando la interfaz multi-touch del dispositivo.

Aún que el proyecto ya esta terminado, de todas formas hay un par de cosas que planeo hacer con el, primero quiero limpiar un poco el código, y aprovechando que Apple a liberado el NDA, espero pronto subir el código de la aplicación para que otros puedan aprovecharlo y por otra parte espero animarme y escribir un par de artículos detallando un poco mas la experiencia.

Cel-Shading Funcionando

2008-10-19T00:00:00+00:00

Ya implementé Cel-Shading en la aplicación y esta dando excelentes resultados como se puede ver en la Galería de Imágenes del proyecto.

Por si les interesa saber como lo hice, me base principalmente en dos artículos el primero es una introducción teorica sobre los que se trata CelShading, que básicamente lo que hace es “discretizar” la iluminación de los objetos quitándoles la apariencia 3D que les da la iluminación tradicional.

El segundo articulo es la lección numero 37 de NeHe en que implementan el algoritmo que explican “teoricamente” en el primero, nuevamente tuve que hacer varios ajustes para hacerlo funcionar con VertexArrays, y por otra parte tuve que modificar las rutinas de carga de la textura tambien debido a limitaciones de OpenGL ES.

La implementación, dado que OpenGL ES 1.1 no incluye soporte para vertex/fragment program, se basa en desactivar las luces de la escena, para posteriormente calcular la intensidad de la luz que le corresponde a cada triángulo del modelo para luego asociarle una textura que obscurece en función de la intensidad calculada.

Soy un Desarrollador Certificado!

2008-09-25T00:00:00+00:00

Hoy me acaba de enterar que aprobaron mi solicitud para acceder al iPhone Developer Program lo que me permite finalmente realizar pruebas en un iPhone real de mi proyecto de computación gráfica, ademas de otras ideas que están rondando por mi cabeza.

Carga de Modelos 3D

2008-09-20T00:00:00+00:00

Ya esta implementada la carga de modelos 3D a partir de archivos MD2.

Para hacer esto, me basé en la implementación en C descrita en http://tfc.duke.free.fr/coding/md2-specs-en.html la cual en general fue bastante sencilla de seguir gracias a que el iPhone incluye toda (o al menos gran parte de) la libc, sin embargo, se presentaron ciertas dificultades al momento de dibujar los modelos, puesto que OpenGL ES deprecó el paradigma.

glBegin(...);
glEnd();

Reemplazándolo por el uso de VertexArrays.

Todavía es una implementación bastante rudimentaria, principalmente debido a las restricciones impuestas por la API de OpengGL ES con las que me he ido encontrando, lo que deja bastantes cosas por hacer todavía, principalmente:

Reducir consumo de CPU/Memoria
Cargar Texturas

Problemas que voy a retocar en paralelo mientras implemento la siguiente face del desarrollo del proyecto, el algoritmo de Cel-Shading.

Definida la plataforma

2008-08-18T00:00:00+00:00

Ya definí la plataforma para desarrollar este proyecto.

Finalmente opte por desarrollarlo utilizando el iPhone SDK.

Las razones por las que escogí esta plataforma de desarrollo son básicamente

El interes personal por ahondar en el desarrollo para Mac/iPhone
Varias facilidades técnicas, como que ya tengo el software necesario para empezar a trabajar y no necesito utilizar emuladores para el sistema operativo (trabajo con Mac OS X y la mayoría de las otras plataformas se desarrollan en Windows)
Y finalmente tengo acceso a un dispositivo para hacer pruebas, al menos en cuando obtenga los certificados de apple para ejecutar código en el)

En fin, ya está todo listo para empezar a trabajar en el proyecto.

Inicio del proyecto de Computación Gráfica

2008-08-09T00:00:00+00:00

Hoy le doy inicio al desarrollo del proyecto del curso Computación Gráfica (CC52B) de la carrera Ingeniería Civil en Ciencias de la Computación impartido por el Departamento de Ciencias de la Computación (DCC) de la Universidad de Chile.

Como podrán ver en el sitio del proyecto, este consiste en implementar un algorítmo de Rendering No-Fotrealista, en particular de Cel-Shading en un dispositivo movil que estaría definiendo dentro de los próximos días.