(versión en castellano abajo)

This effect is a radial motion blur coded in Javascript. Since it uses the canvas element, it requires the latest browser versions and does not work in any current version of Internet Explorer.

The radial motion blur algorithm in this effect is a fast one that uses feedback for blur propagation. The most complex thing I did here was the speed optimization. Even if the effect is somewhat simple to code, it is not an easy task to make it fast enough to be realtime in Javascript for the current browsers and computers. It is working fast in the current versions of Safari and Chrome, not that fast, but enough in Firefox, and slow in Opera.

There are some interesting Javascript speed optimization methods on this. Please take a look of the source code if you are interested. If you want further explaination, please leave a comment and I will try to explain it in a new post.

Castellano

Este efecto es un difuminado radial de movimiento (me suena fatal esta traducción que he hecho, pero la verdad es que no estoy muy seguro de cómo podría llamarse en castellano) programado en Javascript. Usa el elemento canvas y por tanto requiere las últimas versiones de los navegadores. No funciona en Internet Explorer.

El algoritmo de difuminado que he usado para este efecto es uno rápido que usa realimentación para la propagación del difuminado. Lo más complejo fue la optimización de velocidad. Pese a que el efecto es relativamente simple, no es fácil conseguir que sea en tiempo real en Javascript en los ordenadores y browsers actuales. Está funcionando rápido en Safari y Chrome, suficiente en Firefox y lento en Opera.

Hay varias optimizaciones de velocidad para Javascript en esto. Si estáis interesados, por favor, mirad el código fuente. Si necesitáis que lo explique, dejad un comentario e intentaré explicarlo en un próximo post.

 CLICK HERE TO SEE THE EFFECT!

(versión en castellano abajo)

First of all: Merry Christmas and Happy New Year!

 Today I’ve done a 3D snowman in Javascript. I decided to do something Christmas-related and also to try the canvas element and the direct pixels color-value control with createImageData and putImageData.

So, just before the web gets truly 3D with standards like WebGL, I thought it would be cool to try the oldschool cpu software rendering in Javascript. Would it be possible? Could I even do some kind of lightning? The answer is yes: but it required a lot of tricks and even with those, a fast computer to render at a reasonable framerate. Javascript continues being very slow for things like this one.

 What I did: parallel sphere raycasting with some modifyed/simplified SSAO (screen space ambient occlussion).

Just a little note: This is a one-file effect, there are no textures or whatever, and everthing fits in only 4kb.

UPDATE: Thanks so much to p01 - an expert javascript coder and part of the Opera browser team - for suggesting the change from createImageData(widht, height) to getImageData(0, 0, width, height). Now it works in more versions of browsers.

Castellano

Ante todo: ¡Feliz Navidad y próspero año nuevo!

Hoy he hecho este muñeco de nieve en 3D con Javascript. Decidí hacer algo navideño y también probar el elemento canvas (aún no había hecho nada porque suelo inclinarme más por efectos totalmente crossbrowser) y el manejo de color de píxeles directo que proporcionan createImageData y putImageData.

Antes de que la web se vuelva totalmente 3D gracias a futuros estándares como WebGL, pensé que estaría bien intentar algo de renderizado a la antigua usanza, usando la cpu en Javascript. ¿Sería posible? ¿Podría agregar algún tipo de iluminación? La respuesta es sí: pero ha requerido bastantes trucos y aún así necesita un ordenador bastante potente para mostrar suficientes imágenes por segundo. Javascript sigue siendo un poco lento para estos fines.

Lo que hice: trazado de rayos no recursivo para esferas e iluminación SSAO (Oclusión ambiental aproximada basada en el buffer de profundidad), modificada/simplicada para mi efecto.

Una pequeña nota: este efecto está contenido al completo en un único fichero html, no hay texturas ni similar, y todo ocupa sólo 4kb.

(versión en castellano abajo)

Today I’ve done this little Javascript experiment that makes an Apple-style reflection on html text - without images. It is extremely simple: it just cuts the text in 1px horizontal lines and place these in inverse/reflected order.

The “Write here!” is an input field, so you can click on it, change the text and see how the effect dynamically changes the reflection.

It works in IE 8, 7, 6 and - magically - in 5.5. It have been tested and it is working also in Firefox 3.5, Firefox 2, Konqueror 3, Opera 9, Safari 3 and Chrome 4.

Note: please remember that this is just a fun experiment and not thought to be useful in any way. If you are going to use it in your website, think that it is probably going to cause accessibility problems on javascript enabled text-only, text-to-voice and text-to-braille browsers, so I can’t recommend its use on any serious/non-experimental websites.

Castellano

Hoy he realizado este pequeño experimento con Javascript que crea reflejo sobre texto html al estilo Apple (sin usar imágenes). El funcionamiento es muy simple: el texto se corta a líneas horizontales de 1 pixel y las pongo en orden inverso/reflejado.

Donde pone “Write here!” (traducido: ¡Escribe aquí!) hay realmente un campo de texto. Podéis pinchar, cambiar dicho texto y ver cómo el efecto de reflejo cambia dinámicamente mientras se escribe. El botón de “Shake it!” menea</e el texto reflejado.

Funciona en todos los navegadores que he podido probar, incluyendo asombrosamente (¿o mágicamente?) el Internet Explorer 5.5.

Nota: este efecto es sólo un experimento por diversión, y no se debería tomar como algo útil de ninguna forma. Si alguien se piensa usarlo en alguna página, que recuerde que puede causar problemas graves de accesibilidad para personas que usen navegadores con javascript en modo de sólo texto, lectores de voz de páginas web y lectores web braille. Por tanto, no puedo recomendar su uso en prácticamente ninguna web, a excepción de webs experimentales y poco más.

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? :)

La Cruz de Alineación es la primera de varias pequeñas utilidades javascript embebibles al navegador desde la barra de Vínculos/Marcadores (que llamaré microutilidades) para desarrolladores/diseñadores web que pienso crear e ir publicando en este blog.

En este caso se trata de una cruz que sigue el movimiento del ratón desde cualquier página web. Es de utilidad para comprobar la correcta alineación de los objetos en una web en desarrollo.

Para adaptarse a los diferentes colores de fondo, la cruz se muestra en 2 colores; al primer click en azul, al segundo click en gris claro. Por último, el tercer click oculta la cruz.

Puede agregar a Vínculos/Marcadores la Cruz de Alineación aquí: cruz

(si no sabe cómo hacerlo, lea las instrucciones de instalación para Internet Explorer 7. En el caso de Firefox, la instalación se realiza de manera similar)

*Nota: esta versión no funciona correctamente en Opera. Está comprobado su correcto funcionamiento en IE 5.5, 6, 7 y Firefox 2 para Windows.