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!
He already has a market cap of around $6M. They're talking to Andreesen and Kleiner. The biggest issue right now is lack of adoption: Growing at 137% a day just isn't fast enough.
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.
Is the cat supposed to shoot lasers? Feels like it should but does not for me. Hitting the mouse and space, as well as other keys, doesn't do anything.
My, where history's path takes us. I'm not really sure how to describe this feeling; a clever hacker put a boggled cat and pickles on a star field and it's clearly missing lasers.
Like, I get there's a source GIF that inspired it, and lazoring pickles with a cat has that sort of pseudo randomness like 'purple monkey dishwasher'. But I still think it's strange that it stands out as an omission over, say, talking wrenches. (I think the awestruck cat is fine just how it is; just flummoxed over how legitimate your quip was.)
I think you're on to something here. I hadn't seen the cat/laser/cucumber gif prior to reading this thread (after visiting the demo), and after I noticed the cat following my mouse I tried clicking pickles with the expectation that they would be attacked by laser vision.
It's odd that I can say straight-faced "of course you would expect lasers to shoot from that cat's eyes and destroy the pickle," but that I can't describe why that assumption is so obvious.
I was going to leave a comment like "why isn't it shooting lasers at the pickles", but then I did a search in the page and found this comment thread. So... yeah. Our brains are all warped in the same way.
Seemed silly at first (well, still does, but in a good way). But from the comments in this thread, I realized this is actually a pretty cool demo.
Completely unrelated to WebGL, but you might want to have the music loop forever or use a long playlist. That'd be neat - I have it open in background because the music is really sweet.
> Finally, evidence is mounting that points to a "lost decade"
> between what we now remember as the 1970s and 1980s, a time
> whose full cultural trauma and resulting suppression from
> memory was so complete as to effect itself even on the living.
Big NO ! I can't say it is pointless, appreciate your effort. Didn't know pixijs has such great power, I've looked at the documentation, it is awesome :)
just seeing this lightened up my day slightly, so it really isn't a waste if you ask me. prompted me to want to check out something new, and it was just awesome to look out. Very interesting back story to it too
Gee, thanks a lot! The audio autoplay almost woke up everyone in the effing house! Seriously, I like the cat, but is this 1998?! Jesus, give us a dang warning at least!
I'm using Chrome on an older rMBP with Intel 4400 graphics, and it took a little while for the rendering to start for me. Once it got going it was nice and smooth, however.
Something 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.