Thumbs up for the Big Lebowski mouse mat in the last image!

It really pulls the desk together.

Hey I just got that today too :D

This is a great idea and use of css, mixing multiple technology sources, very creative.

This is excellent!! Would love to learn this some time.

That's really great! I left ~10 years television broadcast design behind to move to web development in 2005. This is a wonderful and creative mix of the two techs. Congrats and well-done!

Cool, I'm featured in this article!

How did you identify the lane dividers and communicate that information to the web page?

It doesn't. It's just a straight on overlay, so everything was calibrated prior to the race. The camera itself never moves, so there's no need to do complicated CV.

Ah, that was my next question. There's no panning? So it's a fixed camera?

Brilliant solution. Kudos.

awesome stuff - next up, the world record line!

This is great. Do you have a finished video that shows the lane graphics integrated? Curious how you cut them off when the swimmers dived in.

Oop, I found one linked via a previous comment. http://vimeo.com/58831734 So cool!

fyi this seems to work in IE10

Removed ---

The screen cap looks great, very professional. Is there any moving footage?

There are some recorded races here: http://vimeo.com/search/sor...

Wow, I don't really know anything about programming but the work you've put into this site is incredible and contains extremely informative ideas. The way you lay out your ideas is also really clear and concise, harnessing high levels of professionalism I hope you continue to make more of these! They're phenomenally inspirational and helpful to all the people in the world that take matters of interest in technology. After I start to learn some basic essentials in programming I will definitely visit this site all day and take in your wonderful ideas!

Demo works fine with IE10.

liked the mouse pad

This is amazing. Awesome stuff. I wonder if the next step would be to do some kind of sophisticated <canvas> diff to overlay video objects on top of the CSS overlays. For example, the “first down” line on football fields is shown underneath the players. Just an idea :)

the nfl software is super intense, and there are 2 guys dedicated to update the keying colors in real time as the game progresses, so that shadows/rain/snow/dirt can be accounted for when calculating the placement of the yellow/red/blue lines drawn on the field. really impressive stuff and the hardware in each camera is great

How do you know these facts? Is there some more info on how this keying is done?

Thanks. We're actually hosting a soccer meet in October, so i'll probably be doing something similar to that with camera tracking.

Unrelated: do you have an RSS feed somewhere? I was looking to subscribe

New information for me, thanks...

This is awesome. Great job thinking outside the box to maximize production value. Super job!

cool beans

very large and beautiful pool

This is interesting, if you have time I would have done it.

Use CSS3 for this, I found very interesting and creative. This is good for making things of the world more and better technology.

This is a lot of good quality information. Thank you.

I really like following your blog as the articles are so simple to read and follow.

They were all stored in csv files prior to the race. Not exactly the best format, but it worked fine.

Like your mouse pad :)

super cool

Nice article, thanks.

Nice work.

Next up: real visual speed-o-meter (e.g. matching world record time) on the bottom of the pool ?
http://www.slideshare.net/M...

For people with OCD: I fixed the skew in the demo http://rapedinheaven.com/wi...

Really cool use of CSS3 technologies, big thumbs up!

beautiful, thank you!

This is amazing man!