Bienvenido Google Web Tool Kit!

En los ultimos dias he estado viendo la posibilidad de aprender la herramienta Google Web Toolkit (GWT). He leido poco sobre ella pero parece ser una muy buena opcion para desarrollar paginas web RIA (o Rich Internet Application). En fin, estaba algo renuente a tener que aprender todo un lenguaje de nuevo porque, a decir verdad, a veces me da algo de pereza tener que empezar de nuevo desde cero o desde escribir el clasico Hello World. Despeus de algunos minutos leyendo un libro que encontre por internet sobre GWT, comence a tomarle algo de gusto e incluso llegar a disfrutar escribiendo codigo en el. En fin, se trata de Java que sera compilado a lenguaje JavaScript el cual no tiene nada que ver con Java pero funciona en todos los exploradores (o por lo menos en lo mas populares). Lo que mas me llama la atencion de este lenguaje es la posibilidad de compilar codigo para cualquier navegados e incluso para el mismo sistema Android. Lo cual es una gran ventaja en este momento en que queremos entrar al mercado de los video juegos.

Para correr el programa Hello World, con GWT, tuve que desinstalar la verison mas reciente de mi explorador FireFox 6.0 y cambiarlo a la version 5. Esto fue debido a que GWT necesita un plugin para testear las aplicaciones web que se intala en el navegador y, segun se comenta en los foros del propio Google, les es algo dificil seguirle el paso a los desarrolladores de Firefox, como para tener la version del plugin siempre actualizada para las versiones de Firefox en el momento en que estas son lanzadas.

Es impresionante todo el movimiento que esta ocasionando Google en cuanto al uso de internet. En mi opinion la tendencia es hacia las redes sociales y el open source (me encantaria iniciar un proyecto para crear un ERP libre y open source). Y esto provocara una nueva aceleracion en el avance tecnologico. Imagino las nuevas interfaces y paginas web, diseniadas especialmente para integrarse a las redes sociales.

Generacion de numeros Aleatorios con Distribucion LogNormal

Hace unos dias en la facultad, en la clase de programacion y simulacion nos pidieron crear una funcion en algun lenguaje de nuestra eleccion que generara numeros aleatorios con una cierta distribucion. En nuestro caso, las mediciones que obtuvimos del proceso que queremos simular siguen una distribucion LogNormal.

Existen algunos metodos para generar numeros. Primeramente implementamos el metodo de la transformacion inversa que consiste en generar un numero aleatorio con distribucion uniforme entre 0 y 1. La mayoria de los lenguajes de programacion cuentan con alguna funcion tipo Random o Rnd que genere numeros aleatorios como estos. Despues, una vez obtenido el numero aleatorio, se calcula el valor de la variable aleatoria X para el cual la funcion de densidad acumulada sea mayor o igual al valor que generamos. Si se conoce la funcion F(X) es facil despejar la X, pero si la F(X) es desconocida o muy dificil de calcular se puede aproximar utilizando sumatorias. Se inicia en un valor pequeno mayor a 0 (para el caso de la distribucion lognormal), y se va incrementando usando un delta tambien pequeno (digamos, 0.001) y se van sumando las areas de los rectangulos hasta completar el valor generado entre 0 y 1. Los valores obtenidos con este metodo seguiran una distribucion logaritmica normal.

Y como este es un blog de programacion tambien, pongo este programa aqui por si a alguien le llega a servir algun dia. A decir verdad, estos algoritmos se necesitan en la programacion de video juegos, quiza en un juego tipo tetris estariamos usando una distribucion uniforme para enviar piezas al jugador. Y tal vez, para un juego de estrategia podriamos usar una distribucion normal. En fin, la distribucion sera elegida dependiendo de cada situacion.

Esto fue desarrollado en Visual Studio, usando el lenguaje C#. Muy similar al Java. Este es un codigo lento y necesita optimizacion. Pero se podrian generar, digamos unos 400 numeros aleatorios y almacenarlos en memoria. Utilizaria al rededor de 400 * 4 = 1600 bytes en memoria RAM si fueran enteros de 32 bits, pero no se necesitaria gastar tiempo de procesador en obtener el siguiente numero. Tengamos en cuenta que se necesitan obtener 400 numeros de una poblacion infinita para que esta muestra conserve las caracteristicas de la poblacion completa. Alguna vez vieron 100 mexicanos dijeron? Los estadisticos insisten en que con 4 de esos programas de television se conoceria la opinion de todo mexico. Siempre y cuando, por supuesto, todo Mexico tenga la misma probabilidad de ser entrevistado.


Los demas detalles acerca de la distribucion LogNormal se encuentran facilmente en wikipedia. Aqui esta el codigo:

        private double LogNormal(double R, double mu, double sigma)
        {
            double deltha = 0.001;
            double actual_R = 0;
            double X = 0;

            double eval1 = EvalLogNormal(X, mu, sigma);

            while (actual_R < R)
            {
                double eval2 = EvalLogNormal(X += deltha, mu, sigma);
                actual_R += deltha * (eval1 + eval2) / 2;

                eval1 = eval2;
            }

            return X;
        }

        private double EvalLogNormal(double X, double mu, double sigma)
        {
            if (X == 0) return 0;
           
            double c1 = 1 / (sigma * X * Math.Sqrt(2 * Math.PI));
            double c2 = -(0.5) * Math.Pow((Math.Log(X) - mu) / sigma, 2);
            return c1 * Math.Exp(c2);
        }

 

        private void btnGenerar_Click(object sender, EventArgs e)
        {
            Random rnd = new Random(System.Environment.

TickCount);

            double media = Convert.ToDouble(txtMedia.Text);
            double desviacionStandar = Convert.ToDouble(txtDesviacionStandar.Text);
            double varianza = desviacionStandar * desviacionStandar;

            double var = Math.Log(varianza / (media * media) + 1);
            double sigma = Math.Sqrt(var);
            double mu = Math.Log(media) - (0.5) * Math.Log(varianza / (media * media) + 1);

            int cantidadNumeros = Convert.ToInt16(txtCantidad.Text);

            progressBar1.Minimum = progressBar1.Value = 0;
            progressBar1.Maximum = cantidadNumeros;

            txtResultados.Text = "";

            for (int k = 0; k < cantidadNumeros; k++)
            {
                txtResultados.Text += LogNormal(rnd.NextDouble(), mu, sigma).ToString("##.###") + "\r\n";

                progressBar1.Value++;
                Application.DoEvents();
            }

            progressBar1.Value = 0;
        }

 

Decision de Programar para Android

Bueno, he estado algo ocupado estos ultimos dias que no he podido practicar el dibujo por computadora. Sobre todo por tanto trabajo, la facultad y porque he estado leyendo ese libro de programacion para android para dummies. He hecho los ejercicios que vienen alli y he aprendido mucho.

Y bueno, porque Android? -preguntaran tal vez. La respuesta es que la programacion es gratis. Hay dos muy buenos IDE que permiten hacer aplicaciones para Android muy facilmente. Uno es el Eclipse y el otro es el Netbeans. He utilizado los dos, pero debido a la sugerencia del propio libro me he estado acostumbrando mas a utilizar el Eclipse.Otra razon es que hay demasiada informacion disponible para aprender a programar. Y por ultimo, para vender tus aplicaciones en el market de Android es necesario pagar una cuota unica de 25 dolares. Comparado con el iPhone para el cual necesitas tener una computadora Mac, una licencia de desarrollo y pagar 99 dolares anuales para vender tus aplicaciones... si eres un programador sin mucho dinero es probable que me apoyes en esta decision.

Al principio fue una sorpresa ver que el Android estaba escrito sobre la base del kernel de linux, pero se entiende que necesitaban algo "libre", robusto, difundido y lo suficientemente bueno como para manejar la seguridad tan necesaria en un telefono celular. Sobre todo para evitar que aplicaciones maliciosas dentro del celular puedan modificar archivos que pertenecen a otra aplicacion o incluso modificar esas aplicaciones, infectandolas. Que mejor que un linux. Otra sorpresa fue saber que cada una de las aplicaciones corre en un usuario diferente dentro del Android. Quiza un poco de fuerza bruta por ahi.

Volviendo a la comparativa del Android y iPhone, he estado leyendo por ahi que iPhone tiene un mercado mucho mas variado que el Android. De hecho, la mayoria de las personas que actualmente poseen un Android son mayormente techies que prueban las tecnologias y las adoptan mas rapidamente. En fin, no pretendo disvariar mucho. Se hizo en noviembre una investigacion de mercado y se obtuvo que Android acaba de sobrepasar al iPhone en Estados Unidos y sigue creciendo.

Aqui les dejo una nota con los detalles: http://blogs.computerworld.com/17752/android_beats_iphone_q4_market_share_nokia_microsoft_lag

De todas formas un 30% del mercado que tiene iPhone no se puede despreciar para nada, y la idea es en un futuro no muy lejando poder hacer la inversion y desarrollar videojuegos en ambos ambientes.



 

De nuevo dibujando un ojo

Muy bien, creo que ya fue demasiado estar dibujando ojos en photoshop y publicandolos en el blog, pero este ya es el ultimo para pasar a otra cosa, como por ejemplo los labios. En general, estuve utilizando alrededor de 7 capas para dibujar ojos, que se distribuyen asi:

1. boceto
2. sombras debiles
3. luces debiles
4. sombras fuertes
5. luces fuertes
6. colores de iris
7. colores de carnocidades

Pero, conforme adquiera mas experiencia vere si esto realmente funciona. Les dejo las imagenes finales:

Tiempo de dibujo: alrededor de unas 3.5 horas...



Algunos puntos interesantes que descubri sobre el photoshop es que dejando la tecla Alt presionada se puede hacer zoom in y zoom out con el trackball del mouse. Ademas presionando y  manteniendo Espacio se puede deslizar la imagen para pintar en otra parte de la misma y haciendo Alt+Clic sin arrastrar el mouse se puede obtener el color para despues utilizarlo con la brocha. Pequenas cosas que ayudan mucho.

Como dibujar un ojo en photoshop

Hay una serie de detalles que deben estar presentas cuando se dibuja un ojo, porque sin ellos el ojo se vería "raro". En cambio, si están presentes, aunque el ojo no sea perfecto se verá aceptablemente bien. El ojo que se ve a continuación lo hice sin seguir un tutorial paso a paso, aún le faltan detalles obviamente, pero estoy contento con el resultado.

Mi mayor problema fue dibujar las cejas, porque no me gustaban como quedaban, estas son las cuartas que dibujé. En total, me tarde al rededor de unas cinco horas para terminar esta imagen. Supongo que con el tiempo habré de mejorar la velocidad.

Los detalles que les comentaba que de preferencia deben incluirse en un ojo "realista" se ven en la imagen siguiente. Este si es un ojo de verdad que saque del buscador de imagenes de google.

1. Las pestañas: Las pestañas superiores son mas abundantes que las inferiores. Siguen una forma curva y salen del ojo justo en el borde donde ya se esta llegando al globo ocular. Las pestañas inferiores son menos abundantesy no tan curvas como las superiores. Se deben dejar algunos pequeños espacios sin pestañas para darle un toque realista.

2. La sombra del parpado: Esta en la parte de arriba y solo es una. En la imagen de mi primer post al respecto dibuje una sombra tambien en la parte de abajo (ni que tuviera dos parpados!). Es una linea que va en la parte de arriba. Notesé la forma de la línea y como se va curveando al final. De un lado parece mas ancho el parpado que del otro (Cosa que no hice en el ojo de arriba, porque lo acabo de aprender!, pero en el siguiente lo haré)

3. La sombra inferior: En la parte de abajo tambien lleva una sombra, pero no es una línea sino un degradado que hace que parezca curvo.

4. Las carnocidades del ojo: Son muy importantes para el enfoque realistico a menos que estes dibujando a los Simpson. Generalmente son de tonos mas claros o rojisos.

5. El Iris: Son relativamente fáciles de hacer. Hay tres cosas que se deben tener en cuenta para que parezca más real. a) La pupila es casi negro absoluto, en algunos casos es gris oscuro por los reflejos de luz, pero la mayoria de las veces se ve negra. b) La parte del color que va de ser relativamente clara a más oscura, lleva muchas rayitas blancas, negras, en fin creo que se podrian usar fractales para dibujar iris. c) La parte mas externa del iris debe ir mas oscura. Por ultimo cabe mencionar que el Iris es muy brilloso, por lo que siempre hay que incluir luces casi blancas.

6. Los brillos de luces mas intensos: Estos brillos son casi blancos y se presentan aveces en los bordes a los que le llega la luz mas directamente.

Ahora unas imagenes para observar estos detalles:

Y ahora un video de como se hace en photoshop:

Progresos - Dibujo de un Ojo

Despues de algunos intentos con Photoshop y sus herramientas me he dado cuenta que esto se puede hacer sin ningun problema en el GIMP. Realmente no se necesitan tantas cosas y diferentes filtros para dibujar. Asi que mis preferencias por el Photoshop ya no son tan definitivas como antes.

Segun mis experiencias hasta ahora, lo mas complicado de la "pintura digital" es el manejo de sombras y luces, si se manejan adecuadamente se pueden crear objetos que se vean muy reales. El problema, es saber colocar esas sombras, luces y detalles. Desde que empece con el dibujo del ojo, incluso cuando me estan hablando me le quedo viendo a la gente a los ojos observando las luces, sombras, brillos, etc. Es interesante y antes no le prestaba antencion. Creo que estoy algo obsesionado con el asunto.

Bien, ahora les pongo unas imagenes del ultimo ojo. Aun me falta perfeccionarlo y tengo mucho que mejorar en las pestañas,  pero creo que es un buen avance. Y proximamente estare en disposición de crear un video juego, el cual dejé pendiente desde que estaba en la facultad. El Dark Mario. Mi intencion es crear todo el arte.

Agradeceré a Stephanie ( http://www.stval.fr ). Porque publicó un tutorial paso a paso para conseguir crear un ojo como este. Este ojo es el resultado de seguir paso a paso dicho tutorial.

Siguiente objetivo: Mejorar pestañas y dibujar Labios realistas. Excelente.

Divide y Venceras

El algoritmo de divide y venceras es algo famoso, conocido por mucha gente. Sobre todo por la gente que estudio alguna carrera relacionada con las ciencias computacionales. Se dice que un problema complicado puede dividirse en subproblemas mas sencillos que puedan resolverse relativamente facil, y al resolver estos, se puede resolver el problema inicial combinando las soluciones de los problemas mas sencillos. Asi que porque no aplicar esto al aprendizaje de arte digital? Como mi objetivo es dibujar un ojo realista, una forma seria empezar dibujando el iris. Hacer unos cuantos ejercicios y cada vez tendre uno que parezca mas real.

Mientras tanto, ahi voy obteniendo experiencia, quiza con el iris numero 50 habre dominado el arte de dibujar Iris. Por lo menos con la calidad suficiente para hacer video juegos!

 

El arte Digital en los Video Juegos

Desde que tengo 13 años programo computadoras. Mi primer lenguaje de programacion fue el basic. Usabamos un editor que se llamaba QBasic el cual funcionaba en MS-DOS. Que buenos tiempos diria yo, porque no teniamos ninguna preocupacion excepto ir a la secundaria y mas delante a la preparatoria; teniamos todo el tiempo del mundo para programar, jugar videojuegos, jugar futbol y comer pizza los fines de semana. En fin, a lo largo de mi vida he tenido grandes amigos y no es de sorprenderse que tambien les gusta programar. Desde aquellos tiempos nos deciamos a nosotros mismos que creariamos el nuevo Mortal Kombat 4 para super nintendo (Solo existian hasta el 3). Nos dedicamos a aprender a programar cosas cada vez mas complejas y aunque sabiamos de un punto el cual nos daria problemas muchas veces le sacabamos la vuelta y preferiamos centrarnos tan solo en la programacion. Este gran punto es el Arte. Es dificil encontrar personas que sean muy buenas en programacion y excelentes creando arte digital. Ambas pueden tomar toda una vida (o una carrera) para desempeñarse relativamente bien.

¿Que se viene la mente al decir: "quiero programar un video juego"?. Pues la respuesta podria ser, matematicas, fisica, simulacion, colisiones, lenguajes de programacion, inteligencia artificial, computadoras, etc. Si es que tu eres un programador, como yo. Pero ahi es donde esta el problema. Un video juego, es mucho mas que eso. Es una historia, es imagenes, movimiento, efectos visuales, efectos de sonido, comunicacion y hasta marketing. Y bueno, a eso es a lo que voy. Mis amigos y yo somos muy buenos programando y asi es como nos ganamos la vida, trabajando. Creo que podriamos decir, que podemos programar lo que sea. Pero desgraciadamente ninguno es lo suficiente bueno creando arte digital como para crear un videojuego con graficos y sonidos aceptables.

Es hora de tomar el asunto del arte con mayor seriedad.

¿Que necesitamos?. Pues estuve investigando en internet, y existen muchos aparatos que pueden ayudar para crear arte digital profesional. Pero son demasiado costosos (al menos unos 1999 dolares sin contar el envio). Este dispositivo es una tableta Wacom Cintiq que es genial para dibuajar. Pero por ahora no tenemos los ingresos necesarios como para permitirnos gastar esas cantidades. Asi que por ahora me conformare con utilizar el mouse. En cuanto al software, mi favorito es el photoshop cs5. Existe un software gratuito similar al photoshop que es muy conocido entre la gente que le gusta linux. Es el GIMP. Aunque considero que no es tan bueno como el photoshop cs5 se puede hacer todo el arte que se desee. Creo que le hace falta mas tiempo de desarrollo al GIMP, y necesita mas donadores que permitan sustentar el proyecto.

En estas dos ultimas noches, me meti al Youtube, y le di play a un maraton de tutoriales sobre dibujo realistico. Me quede fascinado con lo que se puede encontrar en Youtube. Hay gente que es realmente buena en esto del arte. Hoy en la mañana, aqui en el trabajo, me puse a aplicar algo de lo que aprendi viendo los videos mientras esperaba a un auditor para una junta de trabajo.Y el resultado es el siguiente ojo:

Creo que no es muy bueno pero tampoco esta tan horrible. Le dedicare mas tiempo a esto y espero poder hacer un ojo mucho mejor con unas dos semanas de practica.

Les dejo este link http://www.stval.fr/ donde vienen algunos tutoriales de los que vi.

Recuerden que el objetivo, es crear un video juego. Y hemos comenzado a aprender a hacer arte digital.

Inicio

Bienvenidos a este blog de programacion y arte digital. La intencion de este blog es compartir mi experiencia con la programacion, las matematicas y el arte digital, principalmente aquellas que se relacionen con los Video Juegos. Espero que sea del agrado de muchas personas y recibir retroalimentacion, consejos, critica y en general comentarios sobre los trabajos aqui expuestos.