jpeg2css
4 de Mayo del 2008(see English version below)
En un foro en el que se hablaba de Homer CSS y Bush CSS, se me retó a realizar una aplicación que generase arte CSS directamente de una imagen jpeg. He aquí la respuesta.
Se trata de una prueba de concepto, sólo genera imágenes en blanco y negro, sólo usa caracteres • y no tiene interfaz de usuario; toma el fichero “image.jpg” y de ahí genera “out.html”. El fichero “image.jpg” puede ser sustituido por cualquier otra imagen en formato jpeg. Podéis ver un ejemplo del resultado aquí.
El software funciona bajo Windows, y ha sido analizado con los siguientes antivirus: Karspersky, Nod32, Trend Micro y Windows Defender. En cualquier caso, se ofrece sin garantías de ningún tipo y asumiendo que el usuario se hace responsable de su descarga y uso. Descargar jpeg2css.
English
After doing Homer CSS I was challenged to do a JPG to CSS image conversion tool. It is a proof of concept really. It takes a black and white jpeg and returns an html copy of the image created with text and CSS, just like homer was. Enjoy!
This is a Windows only software. Since it has not a graphical user interface, in order to use your own image you have to rename it as ”image.jpg” and replace the example’s one.
It has been tested on Karspesky, Nod32, Trend Micro and Windows Defender antivirus and no viruses were found. But remember use it at your own risk. Download jpeg2css.
Thanks goes to:
Thomas Gilray for helping me in the translation of this post
Elías/elcinegratis for beta testing of the software
Zest for challenging me to do it
wow….. esto es simplemente fantástico!
gracias ^_^
la verdad no creí que fuera posible hacer semejante aplicación!
por cierto, la aplicación funciona perfectamente bajo wine :)
Imprecionante! muy buen trabajo. La verdad que me quede sorprendido por eso te queria preguntar si podrias liberar el codigo de fuente para ver como funciona de verdad.
De nuevo muy buen trabajo y gracias.
j0hn:
El código fuente ahora mismo es demasiado feo como para ser liberado como está. Lo que sí que puedo explicarte es cómo está hecho:
El problema es: ¿Cómo cubrir una superficie delimitada concreta con un número N de círculos de la mejor forma posible?
Lo primero que hay que definir es ¿qué significa “la mejor forma posible”? Se puede definir de muchas formas, yo he optado por cubrir la mayor cantidad de superficie posible permitiendo, dentro de un pequeño porcentaje umbral, que se puedan cubrir pixeles que están fuera de la superficie. Con esto ya se puede crear una función de evaluación dados un conjunto de círculos y la imagen original; cuentas qué area (cantidad de pixels) han sido cubiertos y qué area ha quedado fuera. Con estos datos devuelves un valor en forma de puntuación que representa la bondad del conjunto de círculos para cubrir el area dada por la imagen original.
Con esto ya es fácil realizar el algoritmo de forma teórica: simplemente pruebas con todas las posibilidades, es decir, envías a dicha función todos los posibles conjuntos de círculos y una imagen, y te quedas con el conjunto que mejor haya sido valorado.
El problema es que el tiempo de cómputo real de este algoritmo sería demasiado largo para casos reales como el del ejemplo (computacionalmente impracticable). Así que hay que buscar heurísticas que aceleren el proceso. Mediante el uso de heurísticas, no siempre se conseguirá el resultado óptimo, pero sí un buen resultado en un tiempo coherente.
La heurística que he usado se llama “greedy” (y no se cómo se traduce al castellano), y consiste en, en vez de probar con conjuntos completos de círculos, ir agregando cículos uno a uno, buscando qué círculo consigue que la valoración del conjunto mejore más.
Sólo con esto, el tiempo de ejecución ya pasa a ser practicable, aunque aún era un poco lento (necesitaba aproximadamente 30 segundos en mi ordenador por cada círculo; varias horas para el total).
La siguiente optimización era la siguiente: si al probar un círculo con centro en (x,y) y radio r superamos el umbral de píxeles fuera del area permitido, entonces ya no tiene sentido probar con radio r+1 en adelante; pasamos a la siguiente posición (x1, y1) a analizar.
Hay muchas optimizaciones similares a esa que mejoran la velocidad en gran medida. No he usado todas las posibles, sólo las suficientes como para que sea lo suficientemente rápido como para que el proceso esté terminado en pocos segundos pero no tan rápido como para que no se pueda ver qué está haciendo (es una prueba de concepto, era interesante que se pudiese ver).
Bueno… espero que te sea suficiente la explicación para hacerte una idea :)
Muchas gracias por responder! la idea quedó un poco mas clara espero que le sirva a los que pasen a ver tambien.
Te felicito por tu trabajo y espero que siga asi.
wow this is so cool! thanks for posting it.
can you make the program free software so that someone can lean how you did it and port it ?
erlehmann:
I’ve just explained in Spanish in the looong comment above how it works, and that the source code is just too ugly to publish… but if anybody wants to lead an open source project to continue developing this… I will give the code and explain how to follow and finish it… it is really easy, and there are lots of speed improvements that can be done over it yet (I didn’t optimized it so much because I like to see how the images are generated).
It would be really easy to add new characters and -not that easy but possible- to add colors also… With new characters, the output html size would be little than now, and some curves would be much better approximated…
In any case, just remember that, this should be treated only as art and nothing more else. Why? This kind of images 1) does not work in all browsers (even if they work in lots of them) 2) Are not accesible 3) CSS is not intended to generate graphics this way, if you want vector graphics there are better suited formats such as SVG and 4) if you want to learn about vectorization process, there are some open source vectorizers. So, if anybody is going to do the effort to continue this thing, remember: this is just entertainment.
[…] http://www.romancortes.com/blog/jpeg2css/ « elozo | tapir — 2008. 05. 05. […]
[…] Convierte tus imágenes en ASCII … ¡con CSS!www.romancortes.com/blog/jpeg2css/ por IOsobar hace pocos segundos […]
Oye, acabo de hacer una prueba con otra imagen y el resultado es realmente impresionante…
Felicitaciones…
Hi Roman,
is there a possibility to port this application to Unix/Linux?
Would you give the source to one, who’d like to port your
application?
Well, I’d love to do it.
greeting from Chemnitz,
Silas
[…] was featured on Slashdot this morning. It’s a program that does it…. Rom
“La heurística que he usado se llama “greedy” (y no se cómo se traduce al castellano)”
Yo un algoritmo “greedy” lo he estudiado como “voraz”.
De nada :D
Wow, muy impresionante.. me había sorprendido con el homero, pero esta aplicación nunca se me hubiese pasado por la cabeza. Muy buen trabajo, te felicito.
Te tiro la idea de hacer una versión online (en php u otro lenguaje), si te interesa encantado en ayudarte a programar.
Un saludo.
Hola. Me interesa el código para hacer un port para MacOSX. Me podrías decir en que lenguaje está hecho para ver si es factible portarlo.
Gracias
[…] uma aplicacao que transforma jpeg’s em html somente com css. Podem seguir ver neste link mais informacoes relativas ao autor desta […]
[…] Román Cortés » jpeg2css (tags: css design art image jpeg converter images) […]
[…] RomanCortes ha creado jpeg2css: “Se trata de una prueba de concepto, sólo genera imágenes en blanco y negro, sólo usa […]
[…] CSS, Curiosidades, Software Muchos recordarán que hace unos días traía por aquí el Homer realizado por Román Cortés enteramente en código CSS que estuvo dando vueltas por toda la Internet durante bastante tiempo. Ahora, gracias a Román nuevamente, podremos generar nuestras propias imágenes en css con la pequeña aplicación codeada por él mismo: jpeg2css. […]
[…] Nachtrag vom 06.05.2008: Für alle die das auch mal versuchen wollen, aber weder Know-How noch die dafür nötige Zeit haben, hat Román Cortés nun eine kleine Software Names jpeg2css geschrieben. -> Direkt zu jpeg2css […]
Wow! Post a post, te estas convietiendo en algo asi como un guru de CSS. Fuck Zeldman, go Roman!
Saludos.
Buenas!
El programa es increíble, muy conseguido. Te dejo un enlace a un PDF que habla de Búsquedas Locales, otro tipo de algoritmos parecido al voraz (traducción de greedy) que estás utilizando pero que en teoría van más rápidos ;)
http://www.lsi.upc.es/~bejar/ia/material/teoria/2-BH3-Busqueda_local.pdf
[…] jpeg2css (Roman Cortes), Homero, un Cookieface animado (Cookieface), Cris Johnson Ascii […]
[…] porém bastante interessante, ele criou um programinha bem simples para que qualquer pessoa possa converter uma imagem em jpg em CSS puro, o jpeg2css. Vale pela curiosidade que causa na gente, imaginando como este cara fez […]
Muy bueno, te felicito, muy buen trabajo.
Pero en firefox 3 beta4 no lo veo bien, será cuestion de actualizarme
Suerte
[…] Enlace: | jpeg2css […]
[…] jpeg2css […]
[…] jpeg2css ??????????,???????? JPG ????,?????,???????? HTML ????,???????????? JPG ????????? ASCII ????,????? CSS ?,?????? ASCII ??????????????? […]
[…] ACTUALIZACIÓN 1 (08-05-08): El autor de este genial arte, ha puesto a disposición una herramienta que permite convertir una imagen JPG a CSS. Con ustedes JPG2CSS por Román Cortez […]
[…] Koshashin Generator jpeg2css (non-mac only) compfight Open Office 3.0 Beta phonemyphone Writer: The Internet Typewriter DoGood […]
[…] Es gibt eine Menge Möglichkeiten, Bilder zu bearbeiten oder zu verfremden. Mit dem Programm “jpeg2css“ habe ich vor kurzem eine neue interessante Variante entdeckt: Ein JPG-Bild wird in eine […]
[…] is a really cool “proof of concept” (as the author puts it) program: jpeg2css. The program literally does exactly as you would expect: It takes a black and white jpeg and […]
interesting…
[…] a CSS, funciona con imagenes a color pero el resultado lo ofrece en balnco y negro, esta disponible aqui. solo tienes que pasar una imagen en formato JPG y renombrarla como […]
[…] http://www.romancortes.com/blog/jpeg2css/ […]
[…] Y hasta un software para convertir cualquier imágen a un archivo HTML + CSS […]
[…] maintenant qu’il nous sort un joli petit script permettant de réaliser ces montages soi même. Pour l’utiliser, rien de plus simple, il […]
Works fine with Wine on linux :)
[…] JPEG2CSS Download […]
[…] jpeg2css 是一个非常有趣的程序,你提供一副黑白的 JPG 图片给它,几秒种之内,可以为你生成一个 HTML 网页文件,你可以在该网页上看到和源 JPG 图片几乎一模一样的 ASCII 艺术图形,而且是基于 CSS 的,你不用担心该 ASCII 艺术在不同浏览器间的兼容问题。 […]