(versión en castellano abajo)

Have you ever wonder how a Van Gogh’s paint would look animated? To ask the question, I’ve developed a new 2d effect I call liquid paint and you can try it here.

The usage is simple: draw lines with your mouse over the image following the paths created by the paint’s strokes.

This is the ActionScript 3 port of the liquid paint effect. Due the heavy speed optimizations done to make the effect work smooth enough, the source code is a mess, but if you want to take a look here it is. I have to thank again Mr. Doob for his support and for teaching me the basis of AS3 coding.

Castellano

¿Has pensado alguna vez cómo sería un cuadro de Van Gogh en movimiento? Para responder a la pregunta, he desarrollado un nuevo efecto 2d al que llamo pintura líquida y puedes probarlo aquí.

Su funcionamiento es simple: dibuja líneas con el ratón sobre la imagen, siguiendo los trazos creados por las pinceladas del cuadro.

Esta es la versión en ActionScript 3 del efecto. Debido a la optimización en velocidad requerida para que funcione a una velocidad razonable, el código es desordenado y confuso, pero si te interesa puedes echarle un vistazo aquí. Agradezco de nuevo a Mr. Doob su apoyo y el enseñarme la base de AS3 para poder realizar este tipo de efectos.

(versión en castellano abajo)

Mr. Doob, a Flash expert and a great graphic designer shown me some days ago some voxel experiments he was doing with Actionscript 3. I have very few idea (nothing at all) of Flash, but I remembered some voxel head renderer I did years ago as a Windows executable and thought it could be done with a reasonable speed in Flash too. So, I asked Mr. Doob if he wanted to help me with the port, and here it is.

It is medical data, a CT scan I got here. It was resampled to 512×512x512 and then coloured with radiosity. It looks a bit creepy in the mouth; these spikes are interferences caused by the tooth.

You can see the source code here.
Read the article Mr. Doob wrote about our creation.

Español

Mr. Doob, experto en Flash y genial diseñador gráfico, me mostró hace unos días unos experimentos de voxels con Actionscript 3 en los que estaba trabajando. Yo apenas se nada de Flash, pero recordé un renderizador de voxels que hice como ejecutable Windows hace años, y pensé que se podría portar y conseguir una velocidad razonable. Se lo comenté a Mr. Doob, y aquí lo tenéis.

Los datos son médicos, un tac que encontré aquí. Lo redimensioné a 512×512x512 y lo coloreé con un algoritmo de radiosity para voxels. Se que da un poco de miedo, pero los agujeros y salientes cercanos a la boca son sólo distorsiones producidas por los dientes en el tac.

El código fuente está disponible aquí.

I am still designing free logos for interesting projects (see other free logo designs -only in Spanish). This time I will show you the logo I’ve created for the open source project DotNetOpenId.

The idea of the logo was to give the openid logo a touch of .net, to make it clear at a glance what the project is about: OpenID on the .NET platform.

About OpenID

OpenID is an open authentication mechanism designed to free users of having to memorize unique usernames and passwords for every web site they want to sign into.  A single web site (the OpenID Provider) hosts a user’s ‘identity’, and that web site authenticates the user whenever the user wants to log into an OpenID-supporting web site (an OpenID Relying Party).  The protocol is designed so that anyone can be a Provider or a Relying Party without having to pay royalties or fees.  There is no central identity hub that anyone must register with.

DotNetOpenId makes adding OpenID support to an existing ASP.NET web site as easy as dropping a control onto the designer.  An API also exists for those who want more control, flexibility or who are using ASP.NET MVC.

Free logos

I’m interested in collaboration with open source projects, creating logos for free. If you have a nice open source project I can collaborate with, please write to my contact form. Unfortunately I have limited free time, but I try to maintain 2-3 free logos done per week.

Debido a nuevos proyectos en los que estoy trabajando, hace ya varias semanas que no he podido publicar en el blog. Tengo un importante mensaje que daros, y dado que dos de mis aficiones son la criptografía y los juegos de lógica, aquí os lo dejo cifrado:

1111100100111110000011111101011
0001000000000001111100000111100
0001111110000111110000011111101
0110001000001111110000100000000
1111110000100000111111000111111

¿Quién se atreve a descifrarlo? ;)

Webcam input to mosaic of favicons software for Windows. Download it here.

Programa para ver las imágenes de tu webcam como un mosaico de faviconos. Puedes descargarlo aquí.

(versión en castellano abajo)

I found an interesting article by Ask the CSS Guy about one pixel notched corners CSS trick used by Google. In this article, the CSS Guy show us how Google did it, using <li><a><b><b><b>Option</b></b></b></a></li>. The CSS guy was able to do it with only 2 nested <b>. I just thought that even if it was a better way than Google did, two <b>s doesn’t look good enough… so I had to try to do it better.

I’ve done it with just one <b>:  <li><a><b>Option</b></a></li>, so the semantic meaning remains intact. It is crossbrowser (tested and pixel perfect in 12 browsers, IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), and also the same code could be used as quirks or strict mode without changes. Of course, the xhtml strict version pass the W3C validation.

Quirks mode version
Xhtml stric mode version

Castellano

En un interesante artículo de Ask the CSS Guy se explicaba cómo Google Analytics crea bordes redondeados de un pixel sin imágenes y sólo CSS. Para ello Google usa una estructura <li><a><b><b><b>Option</b></b></b></a></li>. El Chico CSS fue capaz de mejorar dicha estructura reduciendo el número de <b>s a sólo 2. Pensé que se podía hacer aún mejor, y me puse a intentarlo.

Finalmente he conseguido que sólo tenga una <b>; <li><a><b>Option</b></a></li>, de esta forma se mantiene la semántica. Es crossbrowser (probado y renderizando con resultados totalmente idénticos en 12 navegadores: IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), y el mismo código se puede usar tanto en modo quirks como strict sin cambios. Por supuesto, la versión xhtml estricta valida según la W3C.

Ie7+ FF2+ Opera9 Safari3 …

Realmente no se qué decir sobre esto… pero… ¿a que es bonito? :)
I don’t have an idea to write about this but… it is beatiful, isn’t it? :)

(texto en castellano abajo)

After drawing in CSS (see Homer CSS and Bush CSS), a generator software for CSS Art (jpeg2css) and animated CSS art (CSS-Cola), what to do next?

Pacman CSS uses no images, only pure vectorial and rescalable CSS art composed of hundreds of Verdana font characters, and javascript code for animation and game. It is less than 9kb uncompressed -less than 3 with zip compression-.

It requires a browser with javascript enabled and the Verdana font installed. It has been tested in 11 different browsers, Internet Explorer 5.5 to 8, Firefox 2 and 3, Opera 9, Safari 3, Maxthon 1.6 and 2 and Flock, working on all. To IE 8 beta users: use IE7 emulation to run it (without the emulation it works, but too slow, it takes several seconds to start and generates very few images per second -I assume it is a problem with the beta IE  version-)

Push the START GAME button to play it!

Castellano

Tras dibujar en CSS (ver Homer CSS y Bush CSS), un software generador de arte CSS (jpeg2css) y arte CSS animado (CSS-Cola), ¿qué sería lo siguiente?

Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana, y código javascript para la animación y el juego. Ocupa menos de 9kb descomprimido (y menos de 3kb con zip).

Requiere un navegador con javascript y la fuente Verdana instalada. Ha sido probado en 11 navegadores distintos; Internet Explorer de 5.5 a 8, Firefox 2 y 3, Opera 9, Safari 3, Maxthon 1.6 y 2 y Flock, funcionando en todos. A los usuarios de IE 8 beta: jugad con la emulación de IE7 activa (sin la emulación funciona, pero demasiado lento; tarda varios segundos en empezar y genera muy pocas imágenes por segundo… supongo que es un problema de la beta de IE)

¡Pulsad el botón START GAME para jugar!

Agradecimientos a Xero por su apoyo moral durante la realización del juego y el beta-testing.

Varias personas se han interesado por cuáles son mis fuentes de inspiración. Además de consumir arte de todo tipo y mantenerme informado sobre novedades tecnológicas, hay varios “truquitos” que uso habitualmente y he creido conveniente publicarlos en forma de consejos:

1) Anota todas las ideas que tengas. No te preocupes de si la idea es o no realizable, de si sería o no rentable o de si es absurda; simplemente anótalas todas. Ten siempre a mano material para realizar las anotaciones.

2) Revisa las ideas anotadas de vez en cuando. Muchas veces la gran idea surge de mezclar varias ideas existentes o de modificar alguna de ellas.

3) Pide opinión y escucha a tus personas cercanas. No es necesario que la persona a la que pides opinión sea entendida del tema. A veces te ofrecerán buenas ideas, otras la simple charla sobre el tema te servirá de inspiración.

4) Ante la sensación de mente en blanco: da un paseo. Yo suelo salir a caminar alrededor de media hora. Cuando regreso estoy más despejado y con nuevas ideas. Supongo que cualquier actividad similar, que implique ejercicio leve/moderado y poca actividad mental consciente debería ofrecer resultados similares.

5) Crea borradores rápidos. A la hora de realizar alguna idea concreta, hacer un boceto rápido, que tome pocos segundos o minutos y que incluya la estructura básica de la idea ayuda enormemente a su posterior definición detallada y realización. En mi caso uso una pizarra; dispone de bastante espacio y se puede borrar con facilidad.

6) Distribuye el trabajo entre varias sesiones. Por regla general, si realizamos un trabajo en tres sesiones de dos horas en días diferentes en vez de en sólo una sesión de seis horas el mismo día, los resultados serán mejores. Concretamente, en trabajos visuales existe el problema de que, cuando llevamos varias horas seguidas trabajando, “el ojo se acostumbra a lo que ve”, y dejamos de percibir errores con facilidad. Parando y retomándolo unas horas o un día más tarde, cambia la forma de percepción por completo.

Creo que eso es todo… ¡Ánimo y suerte con vuestros proyectos!