CSS3 Traveling Through Space | Hacker News Reader

CSS3 Traveling Through Space

codepen.io

95 pointszhs22 comments

This demo is great, so I hate to be a party pooper, but this is not how it'll look if you are actually travelling near the speed of light at all!

For example, you'd see stars concentrate more near the direction you are heading with substantial blue shift, and not a whole lot on your side.

At the subjective speed in this demo, the blue shift would be so much and the light cone so narrow that you'll probably just see one dot in the center and pitch black everything else.

I think a physically accurate depiction of how it'll actually look if you are traveling near the speed of light would be very cool.

There are a bunch of cool simulations:

http://gamelab.mit.edu/games/a-slower-speed-of-light/

http://www.spacetimetravel.org/

http://realtimerelativity.org/

Source image that's used: http://s.cdpn.io/18515/PIA09959-1280x800.jpg It covers four rectangular walls and just shifts the Z closer and closer to you. And meanwhile does an opacity swap to a second set so it can do it infinitely.

Full unminified CSS: http://codepen.io/noahblon/pen/GKflw

Pretty simple.

Simple, but clever, love it. Reminds me of that old Trek debate: "If those were really stars in the warp effect you'd reach the other end of the galaxy in a couple of seconds".

Yep, Paul's got it. Only thing to add is that the perpective value on the stage is very small, making the box appear to be very long and the background image stretched out.

It took me a while to understand, it only works in Chromium, Firefox shows a few images, maybe just a part of the animation at less than 1 fps.

Works fine for me on Safari 6.0.4.

Doesn't work on Firefox.

It sort of works in my Firefox 20 (current stable release) if I zoom in all the way.

Outstanding.I felt as if I was warping through space in Eve Online! In all seriousness, amazing demo. Well done.

Off-topic but interested: It doesn't display correctly in Firefox (only renders a small segment of the space warp). Why is this?

It appears that the "wormhole" is off center. If you zoom the page, you'll notice that each step brings the tunnel closer to the center of the screen.

At zoom level 6 (counting from 100% as level zero) you are viewing from inside the tunnel, but only just. At zoom level 8 (maximum), the view is almost at the center of the tunnel.

If I had to take a guess, the page fails to calculate the center of the viewport, using (0,0) as its target coordinate; but (0,0) is top-left.

Thank you for the explanation.

There is an optical illusion happening as a by product of this demo! the "div" that separates the demo pane with the CSS, JS and HTML code pane looks slightly bent!

Same kinda concept to create a shelf 3D effect : http://codepen.io/chriscoyier/pen/gGiAE

You're essentially enlarging a background image while moving it at the same time right? very cool!

Try zooming in and out. It feels like it changes the FOV.

Probably the bes CSS3 demo I've ever seen. Good job.

Wow that's impressive. How was this done?

Hint (from the CSS): http://s.cdpn.io/18515/PIA09959-1280x800.jpg

Can you put up the link to the code?

Very good work! :)

WebKit only.

Reply on news.ycombinator.com