Show HN: Something pointless I made

Post by Pitarou » Mon, Nov 30, 2015, 2:01 AM UTC

Post by rl3 » Mon, Nov 30, 2015, 2:11 AM UTC

dhotson wrote: post #2

I made this demo using http://www.pixijs.com/ 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…

Post by dhotson » Mon, Nov 30, 2015, 2:22 AM UTC

jashmenn wrote: post #32

Fwiw this appears to be an awesome remix of (my cofounder) TJ Fuller's laser eyes cat shooting cucumbers gif, which can be found here: http://giphy.com/gifs/cat-lasers-cucumber-3oEduQAsYcJKQH2XsI If you like this style of thing, check out the rest of TJs work at his website: http://www.tjfullerswebsite.com

Post by dhotson » Mon, Nov 30, 2015, 2:31 AM UTC

beeboop wrote: post #23

dhotson wrote: post #14

Earlier quoted context omitted.

Ah bummer, WebGL is pretty widely supported but still not quite 100% -- http://caniuse.com/#feat=webgl

I thought PixiJS was supposed to fall back to canvas if WebGL isn't enabled?

Post by ekianjo » Mon, Nov 30, 2015, 2:58 AM UTC

dhotson wrote: post #8

prezjordan wrote: post #6

Earlier quoted context omitted.

Would love to hear more about how you generated the depth map - that's super cool.

I'm glad you asked! :) 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.