CSS Pencils Updates
10 January 2004 · Last updated: 11 December 2006
I've made a few improvements to my CSS Pencils demo to make it quicker to load. I've also published the two earlier versions of the demo, as they're fascinating in their different approach. The first uses PHP, the second JavaScript. In the second version I found a way to edit the page live, and apply the colour filter effects directly to the pencils image. This means you can keep filtering it to build up a unique image - almost like a real paint program!
You can see the amount of work that's gone into this project. I wasn't satisfied with the first two attempts, hence the third version. But looking at the earlier versions again, they're still pretty impressive. In fact, the first version done with PHP beats the later versions for the number of browsers it works on - all the main Windows browsers. The problem with the later versions, especially the second one, is that they tend to succeed in certain browsers only.
Now you can play with each version and see where I was heading, what I was trying to achieve. Although the demos are brand new to this site and its visitors, I've lived with them for a couple of months. A lot of coding and testing certainly kept me busy, although the hardest part was producing the initial data for the pencils image. If I tell you how I did it you won't believe me. Only a few know the crazy secret!
I hope the demos inspire others to use similar techniques, or to explore new ways of using CSS, perhaps not in ways as extreme as my example! I saw using my method not to copy images, but to draw lines. (Where you could miss out a lot of the pixels which made up the background space.) Smooth curves and shapes would easily be possible. I mean, try that with regular borders.
In ten years time, when computers are way faster than now, and internet connections are super-fast, what we can achieve today will seem like nothing. Imagine a full-screen pixel image made from CSS! Or how about using CSS polygons to generate 3D images! Silly I know, but if it could be done - wouldn't it be great?
Comments (1)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- Chris Hester:
One thing I didn't think of until yesterday was that you can also combine filters in the PHP version. Simply add them to the link. Try this example:
http://www.designdetector.com/tips/phpcsspencils.php?zoom=5&ch=gb&brite=50
See how the values are passed to the page? I'm setting a zoom value of x5, a colour scheme of green and blue channels only, and making the whole thing brighter by 50.
(Play around with the link yourself - you can try much larger zooms this way - the code works for any value you give in the link!)
Here's a further example I just made with the Water filter - you could call it art.
http://www.designdetector.com/tips/phpcsspencils.php?water=y&zoom=4&inv=y
It should be possible to make a form on the page where you tick boxes next to the effects you want to apply, rather than using separate links. That way, as in my example above, filters can be combined.
I thought about using cookies to retain the filter effects, but the problem with filtering the image again is that you lose detail. Make it too bright and it's washed out. So it's nice to have the PHP version reset the image every time.
Posted on 10 January 2004 at 11:05 pm ¶
