Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Something pointless I made (dn.ht)
747 points by dhotson on Nov 29, 2015 | hide | past | favorite | 102 comments

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 a subtle illusion of depth.

I'd like to congratulate you for the fact that this has higher production values than the majority of WebGL applications out there.

> I'd like to congratulate you for the fact that this has higher production values than the majority of WebGL applications out there.

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.

I am on mobile with a 3 year old iphone 5.


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.

Is that something one can do with Inkscape as well ?

They have been building it, AFAICT looks like it's in the dev builds.


Nope, wonder how much it would cost to get it implemented?

Evidently not! Nice find.

That's a really clever solution!

You mean each point?That's really tough work.

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.

Great work, silly but ingenious. For some reason I find the "depth map" creepy to look at on its own.

It looks like a ghost, or a 'soul'--that which brings life to an object. :)

Well, I know what I'm doing for the rest of the day.

(if it wasn't obvious, playing around with pixijs!)

I'll spend my day looking at pickles, thank you very much.

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!

+1 for Pixi.js. Pixi.js is awesome.

I was wondering how you did that, actually - well done!

really great. Please write blog about this

How did you create the depth map?

He did it in Illustrator. I find his work fascinating.

I wasn't sure HN was gonna deliver this year. But, now I know to continue reading for another year.

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!

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

Yup! Credit where credit is due—that is the gif that inspired this thing. Love it!

I'm really curious how they made it in the first place.

Interesting. How do you plan on monetizing this? Are you accepting investors at this point?

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.

That's an interesting way to get background music. Wastes bandwidth on the video though. <iframe src="https://www.youtube.com/embed/UsMewmMTA_c?autoplay=1"></ifra...

But lets you sidestep all of the hosting costs and probably the majority of copyright issues.

I used something similar on http://AnthonyDavidAdams.com/memescope

Not really, a youtube video with a static image is VERY close to an MP3's size.

I'm seeing 3.9 MB for audio and 7.8 MB for the video.

Heh, sourced the music from youtube. That's a slick strategy.

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)

That's the greatest cat video I've seen so far

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.

users should be able to paint a depth map

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.

The whole album is pretty fantastic: https://lazerhawk.bandcamp.com/album/redline

(Also in Spotify)

Autoplaying music really should be avoided, though.

I just spent somewhere around five-ten minutes staring at this.

I may have to rethink my life.

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.

Yes my brain is totally warped. That said I do really like it.

The documentation for this project (pixi.js) is excellent. I look forward to working with pixijs and I hadn't heard of it before.


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.

> the music is really sweet

Have an album :) https://lazerhawk.bandcamp.com/album/redline

I was going to request the music loop as well, it's pretty good background audio.

I did not know my weekend hadn't completed until I saw this.

Uncaught Error: This browser does not support webGL. Try using the canvas renderer :( :( :( :( :(

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?

It does if you specify the `autoDetectRenderer`, rather than `WebGLRenderer` or `CanvasRenderer`.

Yep, pixijs can fall back to a canvas renderer. I have a feeling it would be too slow unless I disabled all the effects.

Hey, I made something pointless too! http://mrucci.github.io/dumb-cat/

@dhotson - please be sure to auction this site for art basel :)

Amazing. I just looked at it for about 5 seconds and was scared and freezed at the same time. What an Art!!!

This looks like something from the 19A0's


  > 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 :)

Is it just me, or is the HTML file incomplete? I didn't see anything, so I looked at the source and there's no canvas tag and the file abruptly ends after the GA script tag: https://web.archive.org/web/20151130010039/http://i.imgur.co...

<html> and <body> end tags are explicitly optional in HTML5 -- as are the start tags. http://www.w3.org/TR/html5/sections.html#the-body-element

The canvas element is added to page by JavaScript.

Browsers will parse all kinds of edge cases. What browser are you using?

Renders fine in Chrome 46 on OSX 10.10

My 1 year old daughter loves it. I think you have a meme!

It'd be really cool to hack into an existing "3d-ish" capture tool, e.g. seene[1]

[1]: http://seene.co/a/popular/

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

Inbrowser demos like this should be a new category for the https://en.wikipedia.org/wiki/Demoscene!

This is now one of the best things on the internet. Second only to http://www.omfgdogs.com/

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!

Love it. Made me laugh.

How much does it cost to own a two letter domain name...?

I got it for $129

Try this list: https://catechgory.com/2-letter-domain-names/

I was pretty lucky to get one that matches my name. :)

I read the domain as: DoN't HaTe

Ok, so it's awesome and stuff, but for me the most important thing is the discovery of the NewRetroWave music!

Really cool, you could even make the cat sought of dance to the song by moving your cursor

My 11 year old likes it, so I think you have succeeded in creating the next meme :-)

Well, this is just plain silly.

I registered pickle.cat and redirected it to you. Contact me if you want it.

For when your pickle cat needs that special extra something: analogue synths

You, Sir, have done well.


This is not rendering for me in Chrome on OSX. Is this a known issue?

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.

Worked for me.

10/10 will print each frame and hang in fridge

Getting a white page on Chrome 46, Fedora box.

Add a "fullscreen" button please

What's the music from? Cool site.

Lazerhawk and tripping cat - perfect.

That cat is definitely on something

Looks great, congrats!

this isn't pointless. this is really great.

Pointless? Hardly.

Great soundtrack!

I am... yes.


Was hoping to see Ryan Gosling in a scorpion jacket make an appearance.

Was hoping to see Ryan Gosling in a Scorpion jacket make an appearance.

Scrubbing my eyes with my toothbrush ... please don't down vote me ... the sting from close-up is painful enough.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact