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 ;)