Homer Simpson Drawn With Web 2.0-Style ASCII Art

boogi78 writes "Remember ASCII art? This is the Web 2.0 CSS version of ASCII art featuring Homer Simpson. Here is a CSS G.W. Bush. There's also an program that automatically converts jpegs into 'CSS images,' but it's a Windows executable. I found no sources for it, but I got it to work with WINE."

art?

"Remember ASCII art?"

If you're asking, you must be new here.

Original Thread

Original pouet thread which this spawned:
http://pouet.net/topic.php?which=5204&page=1 [pouet.net]

Nothing like having my portrait done in CSS

That's the most beautiful thing these eyes have ever seen....well except for Marge, when she wears that blue thing with the things.

Web 2.0?

So now using CSS and JavaScript is a criterion for "Web 2.0"? When will it end?

Re:Web 2.0?

So now using CSS and JavaScript is a criterion for "Web 2.0"? When will it end?

When "Web 3.0" hits

Re:

When "Web 3.0" hits

Ah. Can't wait.

Re:Web 2.0?

If we're really lucky, after that we'll get Web 3.1, Web 3.14, Web 3.141, ...
But don't hold your breath waiting...

Re:Web 2.0?

Are you sure that's the progression? I thought Web 3.1 would be followed by Web 3.11, and then by Web for Workgroups.

Re:Web 2.0?

Web 3.0 will be coming out with something truly fantastic... perhaps they'll introduce something called HTML?

I know that was a tongue-in-cheek rhetorical question but ... I'm hoping "web 3.0" will have wide use of SVG. When I can design webpages like I design the previews in a vector editor ... no hang on, that might put me out of a job - please stick to the current mess.

Carry on.

Re:Web 2.0?

Agree. Using CSS is NOT a Web 2.0 application. I would expect better from /.ers.

Recommend those curious read O'Reilly's definition here:
  http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html [oreillynet.com].
 
Since he coined it, he's probably pretty accurate. A lot of it generally includes user-generated content and the transition from single publisher sites (NYTimes) to community driven sites (blogs, Yelp!, etc.)

Here's a table he uses to explain the difference:
 

Web 1.0 -> Web 2.0
DoubleClick -> Google AdSense
Ofoto -> Flickr
Akamai -> BitTorrent
mp3.com -> Napster
Britannica Online -> Wikipedia
personal websites -> blogging
evite -> upcoming.org and EVDB
domain name speculation -> search engine optimization
page views -> cost per click
screen scraping -> web services
publishing -> participation
content management systems -> wikis
directories (taxonomy) -> tagging ("folksonomy")
stickiness -> syndication

Bored?

Clearly this is the result of having FAR too much free time.

Re:Bored?

Clearly this is the result of having FAR too much free time.

...says the guy reading and posting on Slashdot :)

Re:Bored?

Speaking as someone with far too much free time, I've never done anything /. worthy. I imagine the same is true of many of us, so lets give the guy some credit.

Looks like Prodigy art

Looks just like the block art from Prodigy [wikipedia.org] from back in 1990's. All this tech and we're back to the same place as 1995.

Slashdotted

And only after 25 comments. :O(

Great, now I'm gonna have nightmares.

If you think the blocky ASCII Dubya is bad, highlight his text. Holy crap.

Nothing to see here, move along

It needs Verdana from MS TrueType core fonts, so it doesn't work across multiple platforms. The link is slashdotted anyway. Here's a version that's still available: http://www.romancortes.com/blog/homer-css/ [romancortes.com]

Here's how i see it: http://img225.imageshack.us/img225/9183/homeraz4.png [imageshack.us]

But can I block it?

I fear that our advertising overlords will use this to display advertising that I'd otherwise block. The next step in fighting advertising on the web? Block all ASCII charaters from being displayed!!! That'll fix those advertisers.

Slashdot owes me the cost of two ibuprofen.

My head hurts whenever I read "Web 2.0".

Do the world a favor: smack anyone who uses the phrase "web two point oh" in a conversation. Smack them. Smack them hard.

Re:Seen this long ago for Mac OS X

Sameish idea: DeImg [thedailygrind.net] from The Daily Grind Network.

AKA how to turn a 30k image into a 6 meg browser killing table.

Seen it longer ago

pngtopnm | ppmtopgm | pgmnorm | pnmscale -width 80 | ppmtopgm | pgmtopbm | pbmtoascii

Re:Seen this long ago for Mac OS X

But of course! That's what Web 2.0 is all about: turning simple applications with a bit of necessary networking into unmanageably complex monstrosities requiring a full data-center and a plugged-up, memory-gobbling web browser to support one measly user and brought to life by the power of Great Cthulhu.

Re:Seen this long ago for Mac OS X

Sameish idea: DeImg [thedailygrind.net] from The Daily Grind Network.

Actually, this is a bit different - and much more unique and impressive, IMHO. I can't get to the first link (slashdotted already), but the Bush portrait and this Homer [romancortes.com] are both made using overlapping bits of various font characters, sized and colored using CSS, to make the curves and lines of the picture.

View source on that Homer "image" to see what I mean - the artist basically used font characters as a palette of vectors, and clipped out just the partial shape of each character that he wanted, using CSS properties.

As a result, instead of bloating to many MB, that Homer picture is only ~16KB. Bush is only ~32KB.

Translating pixels into an HTML table is not that interesting now.. I mean, I was excited when my brother wrote an app to do that about 8 years ago, and I even wrote a little companion app that parsed ANSI escape sequences and turned ANSI art into HTML tables too, but that was back then. :)

This, on the other hand, is really original and unique. I'm pretty impressed by it.

Scales up really well

The big advantage of this kind of graphic is that it scales up to a nice sharp anti-aliased image as the user increases the text size. Well, at least Homer did when I tried it.

But of course, properly implemented SVG would do that just as well. It just lacks the super-geekiness of using something in an unintended way to get a useful result. And, of course, this way might have better support in some browsers than SVG.

Re:heh, slashdotted already...

Google cache. [209.85.207.104] It doesn't animate, but the text-image is somewhat impressive.