Illustrator's gradient mesh tool lets you create a grid of points where you can choose a colour for each point. I overlayed the grid onto the sprite and estimated the distance at each point.
He didn't have to color in every single pixel. The gradient mesh lets you create a loose grid of Bezier curves, with a color set at each intersection; Illustrator will interpolate between them.
Yeah I came here to ask how you did the faux-3d cat. It's very subtle, but effective as hell. I thought you were using some kind of fancy parallax shader, but I can see how a displacement map can approximate the same thing. Awesome!
It's not pointless. Demos like these help others discover libraries and frameworks. I did not know of pixiejs and it's something I need for work. Having the cat and pickles render in my cheap android device was proof enough to try it out. Thanks for posting!
OP, you should make a silly site where people can combine faces (with depth map) and a floating object. Let the internet hordes run with it from there.
For everyone wondering "What's the music in the background?" It's here: https://www.youtube.com/watch?v=UsMewmMTA_c cleverly linked to via an autoplaying, hidden embedded iframe in the page.
104 comments
[ 2.6 ms ] story [ 171 ms ] threadSomething I'm really happy with is the psuedo-3d effect on the cat using a displacement map.
I took the cat sprite (http://dn.ht/picklecat/mesmercat.png) and made a "depth map" (http://dn.ht/picklecat/mesmercatdisplacement.jpg) where white is closest and black is furthest. This information is used to determine how far to move the underlying pixels. It's enough to give a subtle illusion of depth.
I created it in Adobe Illustrator using a gradient mesh: http://i.imgur.com/kuuFVO2.png
Illustrator's gradient mesh tool lets you create a grid of points where you can choose a colour for each point. I overlayed the grid onto the sprite and estimated the distance at each point.
http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients
http://www.shmoggo.com/inkscape-tutorials/how-to-unlock-the-...
http://wiki.inkscape.org/wiki/index.php/Mesh_Gradients
1. Doesn't crash video card driver. 2. Doesn't crash browser. 3. Doesn't show empty tab. 4. Doesn't cause 100% CPU usage. 5. Doesn't hang browser forever.
Works.
(if it wasn't obvious, playing around with pixijs!)
PS. Perhaps it was intentional, but this is quite topical given the recent story of "cucumbers scaring cats". (https://www.youtube.com/watch?v=sc0mi0Ei1CQ)
Renders fine in Chrome 46 on OSX 10.10
The canvas element is added to page by JavaScript.
http://pixijs.github.io/docs/index.html
I may have to rethink my life.
If you like this style of thing, check out the rest of TJs work at his website: http://www.tjfullerswebsite.com
I'm really curious how they made it in the first place.