NoteMe
Search:
Blog tags:
Python:
- Formating time and date
- Regular expressions
- Range, in for loops
- Check if a file exists
- Find file size
- Simple use of lists
- Random filename or string
- Add digits to a file name
- Common string methods
- Notes on slicing
PHP:
Visitors:
- Online now: 5
- Most users online: 1394
- Total page views: 1853983
Transforming pictures into fantastic HTML (Source):
Tags: ProgrammingDate: 30.04.2006
Before you lose the interest, just take a look here . Look it is text. It is Linux code transformed to a picture. Cool isn`t it? Do you want to know how to make something like that. Or even better yet, you want a free application to make it for you? Keep on reading.
When I saw this, I showed it to Wossname and he was just as excited as I was. Since we are partners in crime when it comes to C# hacking, we decided to make an application to take pictures as input and output HTML code.
The concept is simple, but the output is fantastic eye candy. The final application has 3 optimization levels, and can both output our Doomsharp code, or just fill in with lots of # symbols. To show off the different methods here we have all of them tested with the picture from this article:
- No optimization what so ever with only # symbols.
- No optimization what so ever with DoomSharp code.
- Default optimization (no loss of quality) with only # symbols.
- Default optimization (no loss of quality) with DoomSharp code.
- Full optimization (websafe colours) with only # symbols.
- Full optimization (websafe colours) with DoomSharp code.
So there you go. Maybe not the most exiting picture, so take a look at other pictures I have converted.
And now you can make as many as you want too. All you need to do is to download the source (C# 2005) or this EXE , to start making your own web pages. And make sure you have the .NET 2.0 runtimes on your computer. Even if it is written in C# there might be code there that is not added to the Mono runtimes yet (untested), so I am not sure if it will work on any other platform then Windows. If there is a big interest for porting it to Linux then I might consider doing so. But for now, sorry.
PS: To make full optimization, you need to have this CSS file in the same folder as the HTML file this application creats for you (can also be found in the source download). If you have any questions on how to use the application, please add a comment to the blog.
Comments:
Date: 30.04.2006
Not even sure if I want that. I have read so much about homepages going down. I bet there is a million optimization things I should do first.
Well well, thanks anyway. And sure you can borrow as much code as you want. Just keep the comment in the top, then me and wossy will be happy..
- ØØ -
Date: 30.04.2006
what's the ratio of people clicking the Naked link to every other link. Please publish as a follow up and send me a link.
Date: 30.04.2006
Sure, I will send you a link tomorrow afternoon when I get the results..
I was thinking about leaving it out in case young people would enter. But the "picture" is more art then nudity, so I left it in.
Sorry for the slow loading time. Mirror here:
Mirror
Date: 30.04.2006
Is this related to the aa project at all? http://aa-project.sourceforge.net/ Fun either way.
Date: 30.04.2006
I have never heard about AA before. But thanks for pointing it out. Looks interesting. But sorry. Not anything to do with that at all. It was just a random thing we did when we saw the: http://www.100mb.nl/ page.
- ØØ -
Date: 30.04.2006
Just get Wossy on the cross-platform version of it for that request, he'd have it hooked up in minutes Nice work Note. (You know who i am... the Great 1)
You don't need to port it to linux, the GIMP has been doing this for a long time. Do it on a big image and watch browsers crash!
Now that I think about it, I had a python script that would take two image files and use javascript to allow you to wave the mouse over the page and pixels would change to the other image as you went. Now there was a page that would make almost any system cranky for images of any interesting size.
Date: 01.05.2006
You guys really should take the image size restriction off, that'd be great
Date: 01.05.2006
This is how we looked at porn on dumb terminals and mainframes back in the 70's. I'm not kidding.
Date: 01.05.2006
Great tool !!! I have tried and it works super-fine ... you can take a look at my face passed through you PicChar converter at :
http://www.nikotra.it/test/img2html/ thank you very much for this tool, greetings from Italy
Date: 01.05.2006
hi,
i've done something similar using php- and made a drawing pad/gallery using it...you can input an image using the "start with an image" function
http://pad.peoplesrepublicofflorida.com
Date: 01.05.2006
Even if there is still constantly 100 peopl that is reading this article, I find it safe to release the stats, and yes you where right "David Sterry". The naked link got more clicks. Didn't think about that before I posted it. Should remember that..
Norway - 5211
British - 3945
Eyes - 5226
Woman - 5667
Man - 2406
StarTrek - 4593
Naked - 7539
TomG - 3095
- ØØ -
Date: 01.05.2006
Hmm, lots of requests for a linux version. What do you think note? Should I or should I not?
Maybe.
Date: 01.05.2006
One of the days during the next days I can help you. It is not that much of a job. The only thing we are using that I don't think will work in Linux is partiall classes. That is .NET 2.0, and last time I checked that was not implemented in Mono. Mono kind of fell asleep didn't it...
So if we just move all that into one class, it should work in both VS 03 and Linux, and probably Mac and Solaris too....
- ØØ -
Date: 01.05.2006
LOLLLLLLL*****
glad U published the stats!
now i don't feel so Guilty bout clickin the Nekkid one*
)
that is very cool Art btw*
Bravo***********
Date: 01.05.2006
OMG don't you have enough nice ladies to look at? *looking at your Flickr pictures again*
- ØØ -
Date: 02.05.2006
Here something similar, but with PHP
http://elliottback.com/wp/archives/2005/04/25/convert-image-to-css/
saludos
Mario
Date: 02.05.2006
Linux already has lots of things like this, mainly based off the aalib someone posted earlier. Theres even programs that will convert movies on the fly so you can watch the ascii version in real time.
Date: 02.05.2006
I just tried your neat little tool which works like a charm. Too bad, those HTMLs grow damn large in size. Maybe you could automatically assign colors which are used more than two times per CSS? Would surely save some space.
Along from that, I did a few small modifications to the output: I replaced the span-tags with b-tags - counts six letters (bytes) on every displayed char and saves about 100k. A simple "font-weight: normal;" for the b-tag per CSS does the job. Plus, I added a simple JavaScript-Size-Changer, so you got the pic served in three sizes at the push of a button. If you like, feel free to check it out.
The other thing , of course, is the manual trackback. Hope nobody noticed. ;-)
Date: 02.05.2006
This comments section has a strange behaviour regarding anchored links. Well, anyway, the link to check out the size changer was:
http://erik.range-it.de/wp-content/pics/ascii-avatar.html
The manual trackback:
http://erik.range-it.de/2006/05/02/ascii-art-attack/
Date: 02.05.2006
Looking good. Never thought about using the B tag trick. the WebSafe colour trick, managed to shave off a bit of size too. But the result just looked plain ugly compared to the original.
Sorry for the really bad commenting system. It is one of those things that is on the ToDo list. This site will never go out of Beta.. Add functionality as you go..
- ØØ -
Date: 04.05.2006
Great work. I used your app to make a simple photoshopped header graphic for my blog. Took a screenshot of the HTML graphic, overlayed it on the original picture, and simple transparency mask...
Thanks!
Date: 04.05.2006
This was made by Ian Firth a few years ago. The archive copy I have on my laptop and just uploaded below dates to 7/11/2003 but I know it was created much earlier.
http://mywebpages.comcast.net/xterraguy/ASCII-XTERRA.htm
Date: 05.05.2006
You got a link to that Matt? Sounds cool.
@Brent.
We didn't say it was new. I even posted a link to a page that was made like that. And BTW, the version you have generates 2570 errors in a W3C test, wheras our version passes XHTML 1.0 Transitional easily.
- ØØ -
Date: 30.04.2006
This is fantastic. Love it. Can I "borrow" your source code a bit?
PS: You have been dugg.