EntradasJavascript Radial Blur
16 de Enero del 2010
(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.
impresionante
Alucinante el efecto… pero ojo como consume CPU el navegador!
El efecto es impresionante, pero mi Firefox (sobre Ubuntu) ha pasado de consumir 3% CPU/260MB RAM a 40% CPU/1,1GB de RAM.
Supongo que estos desarrollos serán mas útiles cuando llegue la aceleración por hardware para los navegadores.
En todo caso, ¡felicidades artista!
Impressive! i like this perspective of replacing flash with that beautiful and less CPU use.
Congratulations
Mi nivel de JavaScript es bastante simple por eso desconozco los problemas inherentes al uso de temporizadores, pero quiero comentar que en la linea 208 he cambiado el segundo parametro de setTimeout de 0 a 50, repercutiendo un poco en el refresco pero reduciendo un 17% el uso de procesador.
Impressionante y bonito el efecto. No noto ninguna diferencia entre las últimas versiones de Chromium y Firefox 3.6 tanto a nivel de fluidez (perfecta) como de consumo de CPU (ambos alrededor del 60% :) ).
awesome stuff…
… Is Awesome,
… … Congratulations,
… … … The Master Of CSS
… … … … … Very Good …
Hi there,
thats really beautiful, but there is a mouse location bug in chrome. The horizontal mouse value is shifted.
It is not very smooth under firefox. It feels like it eat a lot of CPU power when I move mouse. Nevertheless looks quite fine and intriguing.