Contenidos con la etiqueta canvas

Experimentos con Google Chrome

Hace una temporada que sigo Chrome Experiments con cierto entusiasmo. Si seguís mis elementos compartidos de Google Reader es posible que también lo conozcáis. La propuesta del sitio es bastante sencilla:

[…] we created this site to showcase cool experiments for both JavaScript and web browsers. These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more.

Si todavía no conocéis esta colección de proyectos os recomiendo echarle un ojo, hay algunos que son realmente espectaculares. Ayer, en el blog de Google Chrome, destacaban uno de estos experimentos, The Wilderness Downtown:

The Wilderness Downtown

Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment has them all. “The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and was built entirely with the latest open web technologies, including HTML5 video, audio, and canvas.

El resultado es, como poco, muy curioso. Es una lástima que los caminos de diseño y desarrollo que abren las nuevas funcionalidades de los navegadores se vean perjudicados por el uso de otros navegadores totalmente desfasados.

Notación musical con JavaScript y Canvas

Veo en Ajaxian:

Mohit Muthanna has implemented music notion in Canvas. He has the beginnings of it right now, and still needs to tie in a nice DSL to write it out.

La demo que se señala en el blog del autor muestra resultados como este:

Más JavaScript y música

Music Visualization
Hace unos días señalaban en Ajaxian un experimento que se apoya en SoundManager 2 para, al ritmo de una música, producir un efecto visual. La parte gráfica está “inspirada” en Dynamic hypnoglow, un trozo de código JavaScript de 20 líneas que tengo pendiente de diseccionar (no por obligación, si no por mera curiosidad) hace ya tiempo.

Nunca estuve muy metido en la Demoscene pero estaré atento a los experimentos de este tipo que puedan surgir.

Música y JavaScript

Mi relación con JavaScript es de amor/odio, variando dicho ratio según me salgan las cosas que quiero hacer o no. Para recordarme que con imaginación y talento se pueden hacer cosas bastante llamativas, tengo la costumbre de seguir el blog de Jacob Seidelin, un danés con cierto gusto por Radiohead.

Thom Yorke Juicydrop Screenshot Dancing Scrollbars

Las imágenes muestran tres capturas de pantalla de otros tantos inventos del caballero mencionado. El primero utiliza SoundManager2 y el objeto canvas, mientras que el segundo añade Milkdrop a la mezcla. El último es una pequeña prueba que utiliza las barras de desplazamiento verticales del navegador de una manera ingeniosa.

Los tres son bastante entretenidos y, si estáis metidos en la programación web, quizás os den algunas ideas interesantes.

Radiohead según Nihilogic: House of Canvas

Como la mayoría sabrá, Radiohead grabó el vídeo de “House of Cards” [04m32s] con láseres en vez de cámaras convencionales. Si alguien no se había enterado, en Gizmodo dieron un adelanto con una pequeña explicación, repetida en Boing Boing:

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Además, salvo la música, el material usado en el vídeo tiene licencia Creative Commons (concretamente la Creative Commons Attribution-Noncommercial-Share Alike 3.0 License).

Todo esta información está en Google Code (el vídeo se ve algo mejor aquí), donde se pueden encontrar los CSV con los datos correspondientes a las nubes de puntos y el código de procesado utilizados para hacer el vídeo (concretamente aquí), como señalaban en MAKE.

Si todo esto no os parece suficientemente friki, atentos a la siguiente jugada a cargo de Nihilogic:

I figured it would be a nice little experiment to try visualizing this data using JavaScript and Canvas so I went and did just that.

La demostración funcional – la razón por la que escribí este post – se puede ver aquí y resulta muy curiosa. Por cierto: “Note that since it uses the Canvas element, it won’t work in Internet Explorer!”.

Nihilogic: House of Canvas

1443 entradas
1330 comentarios