EntradasA Tribute to The Beatles
24 de Abril del 2010I’ve done this CSS/Javascript experiment as a tribute to The Beatles for its 50th anniversary.
Click on the lyrics!
It works on mostly all the browsers from IE5.5 and up. The best results will be shown if the system has Arial font installed on it and font-antialiasing is enabled. It will look good enough with Helvetica if Arial is not present, but probably not very good with other fonts.
Muy bueno, me gusta!! felicidades!
Another classic CSS ASCII art example. Well done! :)
Wow, you always make things look like magic in just a few lines of code, congrats!
Román, tienes un talento impresionante. Nunca dejas de sorprenderme.
Awesome! I really like that. Did you do the other guys?
Can u explain how u do it?:D i see nice work here :D i will visit soon ..good work dude ;)
Me encanta Javi!! un saludo
“Yesterday” - that’s McCartney’s song, not Lennon’s…
[…] plain old CSS and JavaScript Román has built a tribute to The Beatles for their 50th anniversary. I haven’t revealed the surprise in the screen shot, but if you […]
[…] ???????????? ????????? ?? CSS+HTML, Roman Cortes ??????? ????????? ?? ???? ?????? ??????? ??????? ?? ????? «Yesterday» ? […]
[…] http://www.romancortes.com/blog/a-tribute-to-the-beatles/ […]
Román - ingenioso!
Por favor, ¿puede explicarnos el Javascript?
Veo que se usa el function ani() para animar las letras, pero como se cambian los coordenadas?
¡Enseñanos, por favor!
Buen uso de las matemáticas, y admirable creatividad!
love The Beatles… great work :)
“Goofy” is correct; Yesterday was actually McCartney’s first solo hit. He wrote it and it was recorded by Paul alone, after the other Beatles had left the studio. Producer George Martin later added the strings. At the time, Lennon and McCartney were contractually required to list both names on each other’s songs, regardless how much either contributed.
None of this should detract from the fabulous work you’re doing with CSS, however. Mind-boggling what you’ve demonstrated at this site. Good work!
[…] A Tribute to The Beatles […]
Hola,
He encontrado tu pagina y me han gustado muchos trabajos, el de tener paciencia excelente y este también.
Felicitaciones,
Rosa María
Dear Mr.
Sooo great, really love this! Can you explain a bit how you do this!? Certainly the algorithm just move the characters a bit in each frame on a pre-defined path, but how can you get the “morphing path” between the text and the final ascii-art!?
Best
TKXuyen
OMG that’s really nicely done wow! :)
[…] A Tribute to the Beatles […]
[…] http://www.romancortes.com/blog/a-tribute-to-the-beatles/ […]
[…] 10. A Tribute to the Beatles […]
[…] A Tribute to the Beatles […]
[…] A Tribute to the Beatles […]
[…] A Tribute to the Beatles […]
[…] A Tribute to the Beatles […]
[…] A Tribute to the Beatles […]
[…] A Tribute to the Beatles […]
Muy Bueno, el único detalle es que la canción Yesterday no es de Lennnon, sino de McCartney……..asi que hubiera sido más congruente la letra de Strawberry Fields o Lucy in the Sky with Diamonds que si son de Lennon
That’s not Lennon’s song FYI
Muy ingenioso tu trabajo y muy pobre tu actitud, hay un monton de personas que estan alabandote y pidiendo por favor que expliques el codigo y tu en tu pauperrima pequeñez te haces olimpicamente el idiota y no les contestas el punto, con lo cual terminas dando pena ajena.
SUERTE EN TU POBRE ¿VIDA?
Tienes razón. Hace unos meses estuve trabajando en un post para explicar cómo funciona, pero apenas tengo tiempo y no me da tiempo ni de actualizar el blog.
Básicamente estuve experimentando con algoritmos de computer vision (¿visión computacional sería la traducción?), y el proceso es más o menos así:
1) Lanzo una letra en una posición aleatoria
2) Comparo si la imagen resultante es más similar o menos a la imagen de reference (la foto de Lennon)
3) Si es más similar, vuelvo al punto 1, pero esta vez muevo otra letra. Si es distinta, muevo la letra de nuevo a donde estaba antes, y vuelvo al punto 1
4) Espero suficiente tiempo y varios millones de ciclos en esto hasta que el resultado de letras posicionadas se parece bastante a la foto (esto lo hago a ojo, viendo el resultado en la pantalla).
Un detalle importante es el punto 2, “comparo la imagen”. Para esto en muchos casos se puede usar PSNR (viene explicado en Wikipedia), pero en el caso del ejemplo no es válido porque PSNR compara pixel a pixel los valores, y yo estoy creando la image con texto totalmente negro sobre fondo totalmente blanco, mientras que la image de referencia está en escala de grises. Así que para ello uso varias valoraciones de PSRN con convoluciones en distintos radios para el kernel. La idea es que, por ejemplo, una secuencia de puntos blancos intercalados con puntos negros creen un promedio visual de tono gris.
En fin… me gustaría tener tiempo para explicarlo mucho más a fondo y mejor, pero no dispongo de más tiempo.
Está increíble! Solo agradecería pudieras mencionar en qué codificación tenés la imagen para poder compararla, base64 no es, o si?
I think I got it. Thanks for the tips. :)
Now… I´m trying to make the animation of your other example.
Yesterday was written by McCartney ;)
Marvaless
Román, excelente y gracias por compartir!!. Respecto al comentario sobre tu actitud, es bastante obvio que esa “persona”, que por cierto ni un nombre se atreve a poner, es la que tiene una vida de paupérrima pequeñez. Mucha suerte
Verónica: gracias a ti por tu interés.
Respecto a los comentarios, siempre que se publique algo recibirá comentarios tanto positivos como negativos. De entre los comentarios negativos, hay un amplio rango: personas que sólo dan su opinión personal; si es que no les gusta o no les parece bien, hay comentarios que son críticas constructivas y son buenísimas para seguir aprendiendo y también hay críticas que no son tan constructivas.
Yo creo que de estas últimas también se puede aprender bastante en muchos casos. Si son más o menos agradables, no es importante en absoluto. Con la parte del mensaje que yo me quedo es con que en algún lugar del mundo una persona se ha tomado su tiempo en escribirme una crítica negativa y que algo habrá llevado a dicha persona a ello. ¿Qué podría aprender de dicha crítica? ¿Hay algo que pueda hacer o mejorar al respecto?
A veces no podrás sacar ninguna conclusión, pero en este caso concreto, la persona que escribió el comentario tiene razón (independientemente de cómo esté escrito). En el comentario hay un muy buen consejo; si en vez de sólo hacer experimentos raros (y bastante inútiles de por sí), además los explico, puedo mejorar mi blog como una fuente de información útil y además ser de utilidad a los lectores interesados. Es win-win, gana el blog, ganan los lectores.
Los comentarios positivos te dicen qué estás haciendo bien. Los negativos qué estás haciendo mal. Son información muy útil y muy de agradecer.
Nunca vi algo parecido esto en flash, y eso que es css =)
omg great baba