One thing that's obviously missing is a way to link to the image you've just created. I have a nice looking photo sitting there, but seemingly the only way to share it is to view source, copy, paste into a new HTML file and upload it to a server somewhere.
Have it start each new session at a random URL that you can share, and this will get very popular very fast.
Fatal error: main(): Failed opening required 'server/util.php'
(include_path='.:/hsphere/shared/apache/libexec/php4ext/php/') in
/hsphere/local/home/hakim/hakim.se/experiments/html5/textify/index.php on line 3
Best way to do updates is to deploy new versions to separate directories and just change a symlink. Bonus is you can quickly revert to the older version if you find an issue.
That's awesome. It's amazing how much we could actually do back in the days of Netscape and IE version 4 and below.
Performance on the machines of the day was actually better than modern HTML5 stuff on modern hardware because the DOM was so much simpler and tuned toward performance. I could actually watch the little games I made using DIVs/LAYERs and pixel art images slow down during the 2000s as new browsers came out. It's only now, with quad core processors that they're back up to the speed they used to run on a Pentium.
I had a similarly amusing moment years back when I saw a bit-blit demo in the browser. All this excitement about something that was state of the art on Commodore 64s.
(And yes, I do understand how the ubiquitous nature of the web actually makes this important... but I still find it funny!)
I added an option for rendering on a canvas element instead of adding elements to the DOM. It performs a lot better this way since there's no DOM reflow/layout to worry about.
worked great for me. awesome!
i've been wanting to learn Processing so i could create public apps like this that do fun things to photos.. has anyone done that?
This is cool! If you could use characters with different font sizes it may look better. Also kinda slow. You wanna explain a bit what you do? Is it just image -> choose a random point set -> draw? Is this based on Canvas or CSS?
http://textify.it/js/hakim.textify.min.js:
"Recreates bitmap images using HTML text. Images are
drawn onto a canvas element so that the pixels can
be read. Letters, with colors matching the image pixels,
are then placed at random locations on the screen."
I love the quality of the image when you set the character quantity to max, but I notice the speed of the rendering gets progressively slower with each pass.
And now I start pondering the scalability of the algorithm.
We released an App for Android/iPhone/iPad/iWhatever a few weeks ago with the same concept, but using artwork elements to recreate the photo, instead of text. It's called Pixeroid :) http://pixeroid.com
Update coming soon
37 comments
[ 0.23 ms ] story [ 94.8 ms ] threadOne thing that's obviously missing is a way to link to the image you've just created. I have a nice looking photo sitting there, but seemingly the only way to share it is to view source, copy, paste into a new HTML file and upload it to a server somewhere.
Have it start each new session at a random URL that you can share, and this will get very popular very fast.
The submission needs a lot of characters, though.
Performance on the machines of the day was actually better than modern HTML5 stuff on modern hardware because the DOM was so much simpler and tuned toward performance. I could actually watch the little games I made using DIVs/LAYERs and pixel art images slow down during the 2000s as new browsers came out. It's only now, with quad core processors that they're back up to the speed they used to run on a Pentium.
(And yes, I do understand how the ubiquitous nature of the web actually makes this important... but I still find it funny!)
Ubuntu 11.04 - Chrome 11
Also, it would be great, if someone implements figlet[1] using html5.
[1] www.figlet.org
(Be prepared to crank it up to something like 50000 characters if you don't want half the image to be background color, though.)
Looks like it also uses dat.gui for drawing.
And now I start pondering the scalability of the algorithm.