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?

[the brown guy]

"Remember ASCII art?"

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

Re:

[Anonymous Coward]

if you're asciing, you must be old here.

Original Thread

[Anonymous Coward]

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

Seen this long ago for Mac OS X

[aarku]

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

Re:Seen this long ago for Mac OS X

[Anonymous Coward]

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

[mrmeval]

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

Re:

[mrmeval]

Ewwwww git that thar HTML thing OFF me! ;)

Those don't require fancy schmancy lyebraries nor nutin!

Re:Seen this long ago for Mac OS X

[Eli Gottlieb]

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:

[mrbluze]

And to make matters worse, they did a picture of George Bush to demonstrate their technology! Talk about a joke!

Re:

[Xzzy]

In its defense, I've seen stuff like this used to get around firewall or web filtering limitations. ;)

Gestapo blocking jpegs? Get someone to convert it to an ascii format and render it in the browser.

Re:Seen this long ago for Mac OS X

[jasonjacks0n]

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

[Mathinker]

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:

[maxume]

Watch him grow a character at a time:

http://nedbatchelder.com/blog/200805/css_homer_animated.html [nedbatchelder.com]

(apparently the site is down, someone must have already linked it from somewhere that drives traffic)

Re:

[jroysdon]

While it is nice that you can resise the page text and see it grow, it does take up more space to store the CSS version than the original JPG.

The software author's example [romancortes.com] with image.jpg goes from 13322 to 42564 as CSS output.

Less resolution, bigger size, doesn't make sense to me, other than a cool hack. It's a step above, but much like the mplayer + aalib [liquidweather.net] ascii output for video. It's really not that useful, unless you want to play videos on a 486 or something ;-p

Re:

[multipartmixed]

> While it is nice that you can resise the page text and see it grow, it does
> take up more space to store the CSS version than the original JPG.

How about an apples-to-apples comparo? That's probably not an uncompressed (dcam-style) JPG -- so let's compress the CSS. Pretty much any browser more recent than Netscape Navigator 2 will handle deflate.

Re:

[WasteOfAmmo]

So would this work for captcha images?

If so would it defeat the captcha breaking algorithms, after all you could not process it as an image and processing the source without it being rendered would be damn near impossible.

Thoughts?

 

Re:

[ramk13]

I think my browser (Firefox) cried while it was trying to render that table. And my computer isn't that slow (C2Q Q6600 @ 3.0 GhZ). That was ridiculous.

Nothing like having my portrait done in CSS

[HomerJ]

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?

[Chris Burkhardt]

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

Re:Web 2.0?

[brucifer]

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

When "Web 3.0" hits

Re:

[Chris Burkhardt]

When "Web 3.0" hits

Ah. Can't wait.

Re:Web 2.0?

[Mathinker]

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?

[osu-neko]

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:

[KinkyClown]

These are all obsolete when Web NT will come out...

Re:

[jrmcferren]

Don't forget Web 95, Web 98, Web 2000, Web ME, Web XP, and Web Vista.

Re:

[harry666t]

TeX has been written in Web, hasn't it? (:

Web 3.141 ...

[wsanders]

When you get to Web 3.141, you come full circle, and it's web 1.0 again.

Re:

[Anonymous Coward]

Ah, if Web 2.0 entails the use of CSS and JavaScript, that must mean Web 3.0 will be coming out with something truly fantastic... perhaps they'll introduce something called HTML? On a more serious note, people who use the terms "Web 2.0" and "AJAX"** should not have jobs. Nor should their bosses if they are actually impressed by "buzz words" that are anything but.

** Yes, "AJAX", not "Ajax". It's an acronym, and no amount of "omg let's make it sound more amazing than it really is by making it a normal-lookin

Re:Web 2.0?

[pbhj]

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:

[omeomi]

"Web 2.0" is clearly just a meaningless buzz-word, but "AJAX" has a relatively distinct and understandable meaning. The use of the XMLHttpRequest to alter portions of a page without reloading the whole page seems like it should have _some_ name, especially since we all remember a time when it was basically impossible to do. AJAX is as good a name as any other.

Re:

[encoderer]

"especially since we all remember a time when it was basically impossible to do"

Sure, if you mean specifically using the XMLHttpRequest object.

Personally, I've been using hidden iFrames (and/or <img> tags) and document.write (in the pre DOM 2.0 days) to accomplish the same thing since the late 90s.

I wrote a tiny framework (which I named Jespecial, a name I still like more than AJAX) in both PHP4 and ASP that would take a server-side array and create a JavaScript array out of it. The array would be pus

Re:

[omeomi]

I seem to remember iFrames not working in Netscape 4.7, back when our client's spec sheets would still include Netscape 4.7 (that browser took forever to die), so they were basically useless for me.

Re:Web 2.0?

[BBrown]

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

Re:

[Anonymous Coward]

Web 2.0 can't really be defined as anything, it's merely a buzzword. It just happens to be associated with ajax 99% of the time and someone made the link with javascript.

Re:

[Anonymous Coward]

I like how you think ajax and javascript are different

Re:

[infonography]

about half of these are right, not to knock your post. but napster was before mp3.com and then redux. so i guess napster is web 2.1

Re:

[ultranova]

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

However, if you add some XML in there somewhere, it should qualify.

Since he coined it, he's probably pretty accurate.

I find it unlikely that anyone counting BitTorrent as a Web application is particularly accurate. Unless, of course, he meant the BitTorrent sites, but how are those principally different from a forum where you could post links to ?

Re:

[NotBorg]

Recommend those curious read O'Reilly's definition

That definition is 5 pages long. No wonder no one knows what it is. Or perhaps "definition" is not really the word you're looking. "Description" would perhaps be a better word.

From the O'Reilly article:

"Like many important concepts, Web 2.0 doesn't have a hard boundary, but rather, a gravitational core."

Sounds kinda fuzzy to me. At any rate it's kind of like the words "gay" and "hacker." They don't mean what they used to mean and you can't really do mu

Re:

[Lennie]

Wiki's have existed for more than 10 years.

Re:

[Dan541]

I'm sick of the whole "Web 2.0" buzz word that those media asshats keep spreading all over the place.

It almost as bad as "Information super highway"

Re:

[Eli Gottlieb]

I'm sick of web-applications. Why can't someone just write a damned native program anymore?

On the plus side..

[Junta]

Many of these vendors would have just written Windows clients/apps. I too prefer native apps, but untill the consumer market is more heterogenous, the likely alternative to web apps is native apps for a platform I don't like.

Of course, in a heterogeneous environment, the developers won't touch native clients with a teen foot pole...

Re:

[tacocat]

It's an information tube...

Re:

[Dan541]

Or sewer clogged with garbage depends which way you look it it.

Re:

[Provocateur]

What was .0 the mid 90s web of sliced to hell images, frames, and animated gif based technologies.

mid-90s? I swear I saw all that in MySpace just the other day

Only one thing to say about this rubbish...

[Cryacin]

DOH!!!

Bored?

[frdmfghtr]

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

Re:Bored?

[Ardeaem]

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

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

Re:Bored?

[MooseMuffin]

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.

Re:

[Dersaidin]

You could spend some time reviewing what is or is not /. worthy.

Re:

[Skapare]

Maybe they should start employing computer people to keep them out of trouble.

Re:

[MobileTatsu-NJG]

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

Maybe. But it's far more respectable than the hordes of people trying to rehash a Balmer-throwing-chair joke, then the rush for people with mod points to mod it up.

Re:

[Mr Z]

To do that takes developers, developers, developers, Developers, Developers! DEVELOPERS! DEVELOPERS! DEVELOPERS!! DEVELOPERS!! DEVELOPERS!!


(don't use so many caps. It's like Steve Ballmer.)

Looks like Prodigy art

[jmauro]

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.

Re:

[Inner_Child]

I *liked* Prodigy! Mad Maze, the TI-85 programming board, the Metheglyn Writers' Society... (If anyone by any freak chance recognizes that last one, I would be very surprised).

NTCA38A... Sad that I remember that.

Re:

[Enderandrew]

I loved Prodigy. I do remember the Mad Maze specifically.

Re:

[CableModemSniper]

Mad Maze was awesome.

Re:

[Anonymous Coward]

Or like RIP [wikipedia.org].

Slashdotted

[Itninja]

And only after 25 comments. :O(

Re:

[Nalk]

Homer still available on the original author's site without the animation here: http://www.romancortes.com/blog/homer-css/ [romancortes.com]

Nothing to see...

[__aaclcg7560]

The site you are attempting to access is temporarily unavailable.
If you are the site owner please contact your system administrator.

Yeah, those are ASCII characters.

Coming Soon: Cmdr Taco's Son's Fingerpaintings

[STrinity]

It's a yellow blur that looks like something a five year old would make upon being first introduced to PaintShop.

But it's Web2.0, so it must be kewl.

Re:

[Culture20]

Agreed; this must only look correct in IE. FF2 on Linux has his eyes shifted, a hole in his head, a bulge on his neck, and his nose is split in two.

Re:

[Tacvek]

It looks fine on Windows with Firefox and Opera at the very least. However, it requires a specific font (Verdana) which may cause problems with some Linux systems that do not have that font installed.

Great, now I'm gonna have nightmares.

[Perseid]

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

Re:

[vsage3]

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

Just wow

I really expected teh bush one to be

[infonography]

goatse

and I would have felt it was a good likeness.

Remember the printer art?

[thewils]

Those line printers could be coaxed to kick out some interesting pictures. I found some on a cassette tape once while clearing out a cupboard, suitable for a Datapoint machine. I seem to remember I taught myself enough Datapoint assembler to be able to print them out.

I must have been desperate back then...

Can't get it to work

[mmortal03]

I tried it on a 512x512 black and white jpeg, and it stops before it completes the image. What gives?

Working Link

[TwilightSentry]

As the Homer link doesn't seem to work for me, try: http://www.romancortes.com/blog/homer-css/ [romancortes.com]

Nothing to see here, move along

[hee gozer]

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]

Re:

[osu-neko]

It needs Verdana from MS TrueType core fonts, so it doesn't work across multiple platforms.

o.O

It does work across multiple platforms. Any platform that supports TrueType fonts, which is more than one, hence "multiple".

Re:

[Nicolay77]

This is the first time I have ever seen the Homer rendered that bad.

What ugly browser do you use?

Homer

[commodoresloat]

See, you're using Web 1.0, so it's rendering Homer more like he was drawn in the early Simpsons cartoons.

Re:

[Kickasso]

It does work across multiple platforms. The problem (for me) is that it uses Verdana, which is broken w.r.t. Unicode combining accents. It's so bad I just remove Verdana from my Linux machines (I do install MS corefonts).

Re:

[hendridm]

It needs Verdana from MS TrueType core fonts, so it doesn't work across multiple platforms.

sudo apt-get install msttcorefonts

Re:

[cerelib]

The version I see is even worse than that. I am using Firefox 1.5 on RHEL 4. If someone didn't tell me the other one was George W Bush, I would have guessed it just to be some weird modern art of nobody specific.

The return of RIPscript?

[TheKnightShift]

It's a comfort to know that when the Internet collapses, old-fashioned bulletin board systems will be ready.

Front page perfection

[peipas]

Ahhh, posts about the Simpsons AND MacGyver on the front page at the same time. I can die now; order has been restored.

zooming - change text size in browser

[ayeco]

Interesting. In Firefox crtl+mouse wheel or ctrl++ to zoom text, as well as css image. Page zoom is different in IE7 (it has always zoomed an entire page, text and images).

Web 2.0?

[networkzombie]

I've been doing this in Web 1.0 for years.
http://www.dogmatix.com/dk.html [dogmatix.com]

But can I block it?

[DJ Manning]

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.

Re:

[mgblst]

Yes, I think you have strayed onto the wrong site. Maybe I can redirect you, do a google search on hollywood skinny people, that will set you right.

I think I know what Homer would say

[Haoie]

Woo hoo!!

ASCII art is still so great, especially on forums and such where it's too much hassle [or you aren't allowed] to post images.

SVG is dead!

[chrysalis]

If SVN was working in common browsers, that news would be boring.

Re:

[AdamWeeden]

What does SubVersion have to do with it?

Re:

[chrysalis]

SVG of course, stupid typo.

How can that be Web 2.0 and Windows?

[tacocat]

How is it possible for something that is WEB 2.0 be only available under Windows or WINE? Seems like a contradiction in terms. I thought Web 2.0 was a new thing that was even more platform independent than ever before.

ASCII Simpsons were my usenet crazelet!

[jms]

It's time once again for me to bask in my fleeting moment of USENET glory, when for a few brief shining months 18 years ago, it seemed like half the world was using my Simpsons ASCII art [google.com] for their signature file.

Control-a on the Bush Picture

[Rude Turnip]

If you go to the edit menu in your browser and choose "select all" on the George Bush picture, he ends up looking like a Quintesson from the Transformers...which probably explains the last 7 years.

Slashdot owes me the cost of two ibuprofen.

[urcreepyneighbor]

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:

[owlstead]

Web 2.0, web 2.0, web 2.0 (sorry, I'm in a mean mood lately).

Re:

[urcreepyneighbor]

You're the sort of person that would offer peanut brittle to a person with a mouthful of cavities, aren't you? ;)

Re:

[RockDoctor]

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

Is that before or after reminding them of the mantra "never use `point zero` versions of anything".

This tool is _so cool_

[multipartmixed]

I've been sending goatse pics to unsuspecting web-savvy friends all morning. I haven't pulled off an unsuspecting-goatse in _years_!

I attach them as HTML source inside text/plain MIME sections

Nerdy friends then get annoyed at my email-incompetence, save them as .html files and pop 'em open in the browser.

Whooo hoooo

Now... who else can I goatse?

How did Asciicam not get mentioned?

[quoll]

If we're discussing ASCII art, then how come the Amazing Instant Asciicam [krazydad.com] didn't get mentioned?

Re:

[squidinkcalligraphy]

I mean really, you'd think a little bit of css wouldn't create _that_ much bandwidth...

Re:heh, slashdotted already...

[Nullav]

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

Re:

[Nullav]

It works for me on the original site, but it still won't work on the cached page. (FF2.0.0.13)
Disappointing. I was expecting the picture to move, rather than fade in like that.

Re:

[harry666t]

It's funny, how the guy trolling at the windows users didn't get modded down.