Show HN: Something pointless I made
1–10 of 105 posts
Re: Show HN: Something pointless I made
#2I 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 a subtle illusion of depth.
Re: Show HN: Something pointless I made
#3Love it. Made me laugh.
Re: Show HN: Something pointless I made
#4I 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…
How did you create the depth map?
Re: Show HN: Something pointless I made
#5It'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!
Re: Show HN: Something pointless I made
#6I 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…
Would love to hear more about how you generated the depth map - that's super cool.
Re: Show HN: Something pointless I made
#7I 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…
I was wondering how you did that, actually - well done!
Re: Show HN: Something pointless I made
#8I 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…
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.
Re: Show HN: Something pointless I made
#9Earlier 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.
That's a really clever solution!
Re: Show HN: Something pointless I made
#10I 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…
How did you create the depth map?
He did it in Illustrator. I find his work fascinating.