Monday, February 8th, 2010
We have been long term fans of Román and the fantastic demos and samples that he puts together, usually involving CSS goodness. We messed up the other week though when we linked to his work on a scrolling coke can. I do these postings as a labor of love, and since Ajaxian isn’t my day job, that means that the labor often happens at 2am. In this case I made the rookie mistake of grabbing an iframe to his demo so it would run inline. Román then looked up to see his servers getting pummeled and a bill is associated with that traffic. He quickly rick rolled us (thank you for not going for something much worse ;) and Christian Heilman (who is in Europe along with Román) saw it and kindly switched in an image of the code can effect.
I woke up the next morning to learn about this all and see a post that Román did talking about our hot linking. I immediately responded saying how sorry I am. I aim to highlight the great work that is done, not cause an issue.
Román is a great guy and kindly offered to collaborate and show friendship with Ajaxian (and myself) by putting together more amazing demos to share on the blog. Inline. Not hot-linking. :)
Here they are
They are all based on the CSS 2D displacement map technique that Román Cortés discovered when he created the infamous CSS Coke Can effect. Since displacement maps are very versatile, Román Cortés wanted to show us more and different applications of these.
This is simple displacement map usage to distort the borders of the prism, with a transparent .png image on top to add the shadows, orange semi-transparent bg and the Ajaxian’s “a” logo. The background painting is an original artwork by Román Cortés. Move the area around to see the effect the prism has on the underlying painting.
Van Gogh’s Starry Night separated in 3 layers and displacement map sinusoidal distortions applied to two of them.
A really simple displacement map + rearranged image makes this effect possible. Watch the window blinds do their thing as you move the scollbar.
There some comments in the original code can posting that the spinning direction was unnatural. So, here he did spin as the commenters wanted it. To make it possible, he had to mirror the label texture and adapt the source code.
By using several cylindrical displacement map layers with a growing radius and png transparent textures, it is possible to do voxel surface rotations like this one.
Thanks for Román for being so reasonable, and for creating such fun examples for us all. We hope to go deeper on the implementation of some of these examples in the future.
Posted by Dion Almaer at 6:52 am