Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

The 20 Line Challenge / DBPro - Image to HTML!

Author
Message
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 18th Apr 2006 20:43 Edited at: 18th Apr 2006 20:48
Hi, all!

This 18-liner reads an image, and generates an HTML file in which every pixel of the image is replaced with a character from a string, with the appropriate color. Doesn't sound that exciting, does it? Then why not check out the file it generates at http://games2live.com/martin/ff.html. Cool, huh? Well, it's even better if you put your own image/string! Go on, check it out. You'll have to download the attachment for it to work. No worries though, it's 27 kb. *Note: I have not tested out what the HTML looks like in IE. I view it in FireFox, and I suggest you get it!*

The 18-liner version:


The neater version, with comments:
You'll be surprised to find out that without comments and blank lines, in only around 25 lines of code!

Suggestions and criticism welcome.

Martin

Attachments

Login to view attachments
code master
20
Years of Service
User Offline
Joined: 4th Dec 2003
Location: Illinois
Posted: 18th Apr 2006 21:56
Thats awsome!

"I don't bite her, i just slobber on her" "I remember things as well as a retarded goldfish, who just swam through the chicago river"

Richard Davey
Retired Moderator
21
Years of Service
User Offline
Joined: 30th Apr 2002
Location: On the Jupiter Probe
Posted: 19th Apr 2006 00:56
Heh, cute. I made something like this back in DB (in around 2001) but it created tables, with each cell being the pixel colour. Worked quite nicely at the time, because you could use col and rowspans for repeated colours and save on space!

Bite my shiny metal ass
EddieB
19
Years of Service
User Offline
Joined: 29th Sep 2004
Location: United Kingdom
Posted: 19th Apr 2006 03:18
Ive done this sort of thing in C++ Nice one.
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 19th Apr 2006 07:32
Thanks for the comments! Have any of you put get up your own image? I'd love to see the results!

Martin

Jess T
Retired Moderator
20
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 19th Apr 2006 11:43 Edited at: 19th Apr 2006 11:46
Ok, by making classes, and put them in instead of continual spans, you can 'compress' the file down quite a bit.

Also, you could get more speed out of using MemBlocks rather than the Point command.

Here's what I came up with based on your code.

This makes a Memblock, then makes a palette of colours, then assignes each to a class. The classes are then put into spans as needed.

This way, you save space, and also allow the browser to render the file MUCH quicker.

It's slower than your code as it needs to do palette checks ( and I provide some feedback to the user ), but it's bareable



Enjoy

Attatched is an example output file.

Jess.

[EDIT]
Also, if you restricted it to a 256 colour palette, then you'd get alot more compression out, with hardly any quality loss ( since the quality is barely anything anyway as it's all just coloured text ).

Oh, and you'll notice that the example doesn't render right in IE, I beleive this is because it can't handle the sheer number of classes ( colours ) that the image outputted, so again, a 256 palette would benefit here.
[/EDIT]

Team EOD :: All-Round Nice Guy
Want Better dbHelp Files?

Attachments

Login to view attachments
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 19th Apr 2006 14:50 Edited at: 19th Apr 2006 14:53
I agree that could be good, but if you get my sreenshot, you'll see it actually looks "wavy" around the edges. It's odd, but it's probably because of the font and spacing, eh? *Note: It's a jpeg, so sorry it's such bad quality.*

EDIT: And I'd have a hard time squasing that into 20 lines.

Attachments

Login to view attachments
Jess T
Retired Moderator
20
Years of Service
User Offline
Joined: 20th Sep 2003
Location: Over There... Kablam!
Posted: 19th Apr 2006 15:41
That 'wavey' effect is simply due to the letter's you selected to display it with. Because the I seems to be repeating in a diagonal fashion.

Change the string so that it's ONLY an I, then it'll all be the same.

Also, I got the code down to 7 lines with the Advanced 20 Line Compresser



Team EOD :: All-Round Nice Guy
Want Better dbHelp Files?
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 19th Apr 2006 16:17
Quote: "i got the code down to 7 lines"


Nice.

But I think "FIREFOX" is better than "III". (If you know what I mean! )

Martin

musty
17
Years of Service
User Offline
Joined: 6th Apr 2006
Location: Istanbul
Posted: 24th Apr 2006 21:07
Great! This is the kind of code we need to see in this section of the forum. Thanx. I have uploaded an image ( html indeed) of my son with shrek ears.

"Ignorance is bliss." Cypher from the movie The Matrix

Attachments

Login to view attachments
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 25th Apr 2006 21:12
Groovy.

Sven B
19
Years of Service
User Offline
Joined: 5th Jan 2005
Location: Belgium
Posted: 25th Apr 2006 22:22
Try some javascript.

maybe you can make a function or 2 that passes the color and character and draws it to the screen with the for next. In JS ofcourse

It's the programmer's life:
Have a problem, solve the problem, and have a new problem to solve.
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 25th Apr 2006 22:52
Sounds cool... but what's wrong with plain old HTML? And I suck at js.

Martin

dapaintballer 331
18
Years of Service
User Offline
Joined: 20th Dec 2005
Location: USA
Posted: 10th May 2006 13:52
the table version sounds cool, see if you can find it.

nice job tho, pretty createive.

~`Gamerssoft.com'~
MartinS
18
Years of Service
User Offline
Joined: 15th Dec 2005
Location: Rochester, NY
Posted: 10th May 2006 14:21
Thanks! Try using your own images with it. Please post the results!

Login to post a reply

Server time is: 2024-03-29 05:14:34
Your offset time is: 2024-03-29 05:14:34