Making Images with HTML Code
While looking through Youtube the other day, I stumbled upon is crazy video of making images with HTML code.
Making images with HT-WHAT?!
(Song used is video is Overdrive from the Touhou Tsuki Tourou album. Search for 02 – Iosys – 患部で止まってすぐ溶ける ～ 狂気の優曇華院.mp3)
Yes, making images with HTML code. I was pretty shocked and amazed at how the image was created. It was basically a lot of of copy and pasting of repeated codes. This is however, easier said than done.
I decided to try a hand at making an image using HTML code. Of course, it was using the easier method.Running the image through a program which automatically scripts and creates the image for you ^^;
I used an online Image to HTML table converter <Link>. There is another site, Text-Image.com which Image to HTML table/ ASCII / Matrix code like Converter <Link>. Didn’t use that one as the output wasn’t as desirable as the former.
Here’s the original picture (Input picture).
Output picture
1013 X 2085 (1.86MB)
<Large Picture> 3375 X 6951 (11.6MB) Original </Large Picture>
(Right-click and save as)
.png){kind=link}
I believe you will notice that the output picture is slightly different from the original. This being the table cells aren’t perfect squares, which make the image slightly larger in length. It is recommended to work with a smaller image though, preferably 200 x 200 as recommended by the site. I have uploaded the original output image so you guys can have a look at it.
There is also an offline program which you can use as well to do your conversions. It is known as ‘Img2Html’ (Generic name lol) but the site <Link> and the program is in German so you have to fiddle around with the settings till you figure it out.
To download the program, click on ‘Produkte’ on the sidebar and look for ‘Img2Html’.
If you want to capture your output file, you can use a program known as ‘HyperSnap‘ (For Windows). It can capture the whole long screenshot of the website page and has many other uses as well. For OS X users, try ‘Paparazzi‘. Got to know of these 2 programs through Dannychoo’s Mac OS X Paparazzi post ^^;
So what are you waiting for? Go forth and convert those images!
Picture Information:
Top Picture -
Artist – The Last Bullet <Link>
Series – None
Middle Picture –
Artist: Sentarou Dasoku <Link>
Series: None
The pictures are used without the permission from the various artists. ^^;
Loading ...Other posts that might interest you
Rube Goldberg Machine
A Rube Goldberg machine or device is any exceedingly complex apparatus that performs a very simple task in a very indirect and convoluted way. Rube devised such pataphysical devices. The best examples of his machines have an anticipation factor: the fact that something so wacky is happening can only be topped by it happening in a suspenseful manner. A Rube Goldberg machine usually has at least ten steps. One story about Rube Goldberg holds that, while sleep-walking barefoot in a cactus field, he screamed out an idea about a self-operating napkin.
Source: Wikipedia
Rube Goldberg’s Machines uses complex apparatus to complete a simple task. Many of these machinese have been used in the media and games.
One fine example would be the 1990 film Home Alone and its three sequels include many scenes where the protagonist, Kevin (Macaulay Culkin), employs Goldberg-esque devices to trap and/or slow down the progress of burglars attempting to ransack his home.
Another would be Hapland <Link> , the picture above is a screenshot of Hapland 1. It is a game involving steps to light up the torch. Effect and Consequence as I like to call it.
Rube Goldberg <Link>
Rube Goldberg Machine Contest <Link>
The best of Pitagora Suicchi <Link>
Hapland 2 <Link>
Hapland 3 <Link>
Resin/Garage Kits
The interest in assembling and painting resin/garage kits sparked again.
I found this guide <Link> on painting resin/garage kits on google.
Tools Needed:
Primer
Citadel Paints/Enamels/Japanese Hobby Paints
Brushes
Super Glue
Cutting Blades
Sanding Paper
Detailing Markers
Dremel Tool
Seems that a airbrush + compressor isn’t necessary, but recommanded. I do not have a dremel tool as well. Currently, I don’t have the resources to get a airbursh + compressor (Approx: 280SGD). Seems that I’ll have to stick to conventional means of painting with a brush.
A resin/garage kit is needed obviously.
^ Source: Hobby Stock Japan <Link>
The アスカ (Asuka) kit looks good. Unfortunately, it’s at 4,689円 (Approx: 63SGD). My budget’s about 3000円.
Anyone has any recommandations?
Amazing. ;o
ppl have wayyyyy too much time to waste. preserve mankind! contribute to society!!!!!!
Makes sense when you think about it. It’s just a really convoluted way of creating a bitmap. You’re regenerating the image essentially one pixel at a time. And then resizing it.
I’m sure there could be a program to trim that extra height “per cell” so it comes to equal dimensions again.
But then again, this is likely just something fun to do. ^^; Not an efficient way of copying a picture. But a clever way to use HTML to avoid IMG where IMG is banned?
its a clever method…but unbearably tedious
So,how long did it take to do that picture?
It seems to be quite a tedious process.
@jay: How is this not contributing to the community? XD
@Crisu: Definitely not a efficient way of copying picture but something fun to do.
@double: I just feed the image to the program and let it do its thing. Took just a few seconds.
Cool video but I rather draw… Winbell where do you get your images from which image board do you go to?
Lol,good thing there’s the program. I wonder how long it would take to code everything manually.
wow this is simply amazing stuffs.
Both girls in this post are cute – names please!
@Akiraman: Will get to doing that post in a while ^^;
@double: At least a week I guess.
@Danny Choo: Couldn’t find the names of the girls on their website ^^; Guess they don’t like naming their girls. There’s the megane (spectacles) version of the girl on top.
http://homepage3.nifty.com/lastbullet/cg/2007_005b.jpg