Textos bilingües

English Spanish

Este post no va dirigido a temas de informática gráfica. Presento una manera de poder mostrar 'posts' en dos idiomas. El sistema es muy sencillo y se puede utilizar en blogspot como voy a demostrar. No he perdido mucho tiempo buscando por internet mecanismos similares. Debido a la sencillez he preferido realizarlo por mi mismo.

Para llevar a cabo esto se usará Javascript. Expongo los pasos:

• Modificación de la plantilla


• Creación de los links de idioma en el post


• Definición de los bloques de idioma en el post

Modificación de la plantilla
En las opciones de blogger de 'Diseño' se modifica la plantilla HTML. Añadiendo lo siguiente:

<script language='javascript' type='text/javascript'>
function showBlk_1 ()
{
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'none';
}
function showBlk_2 ()
{
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'none';
}
</script>

El código es sencillo. Si se invoca a showBlk_1 se cambia el estilo del bloque identificado como 'blk_1' a visible, y el identificado como 'blk_2' a invisible.

La otra función realiza la operación inversa.

Creación de los links de idioma en el post

Simplemente definimos etiquetas 'span' o 'a' con un href apuntando a '#' y esto es lo importante: Una función onclick.

Por ejemplo:

<a href='#'><span onclick="showBlk_1()">Spanish</span></a>
<a href='#'><span onclick="showBlk_2()">English</span></a>

Definición de los bloques de idioma en el post

Finalmente ahora se escriben los textos en los dos idiomas. El texto en el idioma asociado al bloque 1 (blk_1) estará dentro de un div identificado con blk_1.
Los textos en el otro idioma estarán metidos dentro del otro bloque.

Por ejemplo:

<div id="blk_1" style="display: inline;">Esto es un texto en idioma Español.</div>
<div id="blk_2" style="display: none;">This is an English text.</div>

Uno de los bloques ha de ser visible y los demás invisbles para que por defecto se muestre sólo un idioma.
Aquí por claridad se ha añadido un retorno de carro para separar los divs pero en el post han de estar los 'divs' pegados. Si no, el segundo idioma aparecerá con un retorno de línea extra.

Conclusión

Se ha presentado una manera muy sencilla de generar posts en dos idiomas. Este modelo es a su vez fácilmente escalable para esquemas de múltiples idiomas.

This post is not related to computer graphics. I present a way to show posts in two languages. The mechanism is very simple and can be used in blogspot as I'm going to show. I haven't wasted too much time in finding over internet similar mechanisms. Due to the simplicity of this method I had prefered doing it by myself.

In order to achieve this javascript will be used. I expose the steps:

• Modifying the template


• Creation of the language links in the post


• Definition of the language blocks in the post

Modifying the template
The template can be modified in Design options of blogger. It's possible to add this:

<script language='javascript' type='text/javascript'>
function showBlk_1 ()
{
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'none';
}
function showBlk_2 ()
{
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'none';
}
</script>

The code is simple. If showBlk_1 is invoked, the style of the block identified by blk_1 is changed to visible, and the one identified with blk_2 is set to invisible.
The other function does the oposite operation.

Creation of the language links in the post
Simply we define the tags 'span' o 'a' with a href targeting '#' and this is the important thing: An onclick function:
For example:

<a href='#'><span onclick="showBlk_1()">Spanish</span></a>
<a href='#'><span onclick="showBlk_2()">English</span></a>

Definition of the language blocks in the post
Finaly now the texts in the two languages are written. The text in the language associated to the block 1 (blk_1) will be inside in a div block identified with blk_1.
The texts in the other language will be inside the other block.
For example:

<div id="blk_1" style="display: inline;">Esto es un texto en idioma Español.</div>
<div id="blk_2" style="display: none;">This is an English text.</div>

One of the blocks has to be visible and the other ones invisibles so by default only one language will be shown.

Here, for clarity it has been added a return carriage to separate the divs but in the post the 'divs' shouldn't be separated. If not, the second language will appear with an extra line.

Conclusion
It has been shown a very easy way to generate posts in two langages. This model it's also easily scalable to manage schemes with multiple languages.

Prueba bilingüe

English Spanish

This is an English text.

Esto es un texto en idioma Español.

Gravity Paths

Dejo aquí unos renders que hice hace poco. Representan las trayectorias de partículas con masa dentro de un campo gravitatorio arbitrario. Para realizarlo he partido de un objeto tridimensional. He calculado su campo gravitatorio. Luego he dejado dentro del campo un conjunto de partículas. Avanzando la simulación las partículas se mueven dentro del campo. Se pueden registrar sus trayectorias a medida que se mueven. Una vez que se obtienen las trayectorias se pueden convertir a objetos sólidos tubulares. Con el objeto sólido se puede realizar un render de pathtracing y obtener estos resultados:

Lattice Object

El otro día estuve mirando un libro de Escher que tengo desde hace tiempo. Hojeándolo llegué hasta uno de los dibujos que siempre me había sorprendido por su regularidad: "Cubic Space Division" . Este dibujo se puede representar a mano con un poco de paciencia, cosa que les sobra a las computadoras. Así, que decidí realizar un pequeño programa que representara escenarios parecidos a ese dibujo.

Cómo mostrar el espacio sin más es aburrido, decidí representar un enrejado acotado por la superficie de un objeto. Para ello utilicé una herramienta que codifiqué hace más o menos un año. La herramienta (una clase en C++) determina si un punto está dentro o fuera de un objeto cerrado. Esta herramienta se pensó para determinar el volumen de un objeto amén de utilizarse para obtener otras interesantes características como el tensor de inercia del sólido rígido que representaría. Para determinar el volumen, normalmente se eligen puntos aleatorios acotados dentro de una superfice que engloba el objeto y se haya una relación entre los que están dentro y los totales. Si esta relación se multiplica por el volumen acotado de la superficie englobante tenemos una aproximación del volumen. Estas técnicas de integración numérica son muy útiles cuando es muy complicado o imposible obtener una función analítica que represente la función de superficie que se desea integrar.

Para realizar este modelo simplemente hay seleccionar puntos equiespaciados en los tres ejes espaciales y almacenar los que están dentro del objeto a analizar. Analizando la vecindad de los nodos (ver si tiene vecinos en los tres ejes y sus dos direcciones) se pueden añadir empalmes que parejas de éstos. Es necesario elegir cautelosamente los tamaños de los nodos y de los empalmes para que el armazón no englobe todo el espacio.

Dejo por aquí algunos renders. Una vista interior:

Otras exteriores...



Y una exterior más de cerca:

Brócoli con suelo liso

Dejo por aquí otros dos renders del brócoli de Romanesco. He quitado el fondo de ajedrez como comentó Mamen.

En este render el suelo es simplemente gris. El color azulado se debe a la radiancia que emite la cúpula celeste (si nos fijamos cuidadosamente veremos que en el mundo real pasa algo similar, las sombras diurnas son ligeramente azuladas).


En este otro render he cambiado la BRDF del suelo de difusa a una de phong (con un exponente de 1024). El efecto conseguido es un suelo reflectante que dispersa parcialmente los rayos de luz que llegan. Los reflejos más distantes se vuelven más difusos. Obviamente el color azulado es debido al color del cielo.

El brócoli de Romanesco

Recursividad y autosimilaridad, dos características propias de los fractales. La autosimilaridad es propia de la naturaleza y la recursividad de las computadoras. Está por lo tanto la naturaleza, ¿computada?. No lo creo, es más probable que simplemente sea el resultado de una compresión de datos a nivel genético y una optimización de los recursos desde un punto de vista evolutivo. En cualquier caso es fascinante.

Las plantas son los seres vivos que mas relacionados están con la geometría fractal. El ejemplo clásico es el helecho (Fern) representado en otro 'post' mediante una técnica de IFS. Una técnica sorprendente dado que une el caos, la autosimilaridad y el orden en un único elemento. Representando puntos aleatorios y transformandolos usando una función iterada nace la autosimilaridad. Entrada aleatoria, mundo real; iteraciones, evolución. Personalmente no sé si la naturaleza funciona así, pero sus resultados son sorprendentes.

Uno de los ejemplos que más me ha impresionado del mundo vegetal es el brocoli de Romanesco. Conos organizados en espiral con otros conos dentro de los primeros y así sucesivamente, de tal suerte que se organizan de forma esferoide maximizando el volumen, minimizando los huecos, siendo una figura óptima.

Para representar por computadora este brócoli he utilizado simplemente un mecanismo recursivo. Siguiendo el concepto básico de función iterativa he partido de una matriz de transformación (identidad) que he ido rotando y escalando en cada iteración. Siendo el resultado de una iteración la fuente de la siguiente. Representando una esfera (o cualquier otro elemento) en el punto que determina la transformación de cualquier punto del espacio (constante en todo el proceso, por ejemplo (1,0,0) ) con dicha matriz se puede representar una forma. En este caso una espiral. Si se toma, para cada uno de esos puntos medidos en la primera pasada, su matriz de transformación asociada y se usa como matriz original de una nueva serie de transformaciones obtenemos el fenómeno de la autosimilaridad.

Esta técnica no se puede llevar hasta niveles elevados (más de 3) porque el número de elementos crece rápidamente. En el ejemplo hay dos niveles de recursividad. Nótese, a modo de comparación con la naturaleza, el detalle que tiene la forma real y cómo la computación (¡tan solo visual!) de su homólogo virtual puede llegar a ser impracticable.

Un cojín

Dejo por aquí una primera prueba de un cojín. El cojín está modelado a mano. Sinceramente hubiera estado bien haber tenido algún programa de simulación física para realizar este tipo de modelos, pero por ahora a mano.

Para el efecto de iluminación he usado una BRDF de Minnaert. Esta BRDF se caracteriza por aumentar la reflectancia en ángulos alejados a la normal, justo al contrario de la Lambertiana.

Se pueden conseguir efectos similares al terciopelo. Os paso un pequeño render.

Fractal Flame

Hoy he decidido revisar un módulo de fractales en C++ que empecé hace tiempo y lo he dejado bastante olvidado. Modificando ligeramente una función que calcula un fractal de tipo IFS se pueden conseguir curiosos efectos. Si se realizan principalmente dos transformaciones: Una espacial y otra de ajuste de tono, se pueden conseguir un tipo de fractales denominados Fractal Flames (creados originalmente por Scott Draves).
Este es el resultado de un programa que se puede desarrollar fácilmente (de media a una hora) para representar Fractal Flames.

Obviamente, mejorando la paleta de colores (el ejemplo tiene dos colores) se pueden llegar a obtener mejores resultados.
Si realmente os interesa explorar el mundo fractal de los IFS os recomiendo el software Apophysis. Para finalizar, os dejo un IFS bastante clásico, el del helecho.

Simulación de PinArt

El otro día me acordé de aquellos juguetes con los que podías hacer una réplica de un objeto con agujas. Podéis echarle un vistazo a lo que me refiero aquí. Después de verlo me dije, por qué no hacer algo similar en 3D. Y aquí está.


Para realizar esta imagen tuve que hacer lo siguiente. Se parte de un modelo 3D. Este se puede hacer desde cero o se puede utilizar un modelo ya prehecho de Daz3D y darle una pose utilizando Poser.

Una vez que se tiene el modelo 3D, como una malla tridimensional es necesario transformarla a un objeto del estilo PinArt. Para ello es necesario crear en 3D las agujas. Esto se puede realizar con casi cualquier programa de modelado 3D.

Ahora hay que dar una cierta altura a las agujas con respecto la información de altura del modelo. Aquí hay dos maneras de atacar el problema, a mano y a máquina. Se puede tomar un programa de modelado 3D e ir ajustando las alturas de los pines uno a uno. O como elegí yo, se puede codificar un pequeño programa que determina la altura del modelo para una posición dada. Esta elección es la correcta si se desean realizar renders de otros modelos 3D. Aparte, teniendo en cuenta el número de agujas, te puedes pegar un buen rato moviéndolas de arriba a abajo. Hay que tener en cuenta que el programa que calcula las alturas de las agujas debe componer un nuevo objeto para exportarlo.

Para realizar el render he utilizado un programa de iluminación global codificado en C++. Se pueden usar programas comerciales o gratuitos como Indigo, o en mi caso, uno de fabricación propia.