
Virtual lane graphics for swimming with CSS3 - CWIZO
http://xy-kao.com/projects/virtual-graphics-for-swimming/
======
randall
This is great! We (Vidpresso) think this sort of thing is the future of TV,
and that's why we're building it. Currently, our first product is a way for TV
stations to take Facebook and Twitter, and show it using their own graphical
look on-air. We have some big broadcasters, like Anderson Cooper's show
Anderson Live, as well as some interantional stations in Germany (QVC!),
Panama, and Lebanon. In the US we have more than a dozen US TV stations, and
Univision uses us for their network programming.

Here's some samples: <http://www.youtube.com/user/randallvpp>

All we use is Google Chrome on the output side to make it simple to display
the graphics.

All three of us have video & TV backgrounds, but we all turned into coders
somehow. We're always looking to meet more interesting folks who are
interested in the intersection of video and the web. I have info in my
profile, plus you can check out our website: <http://www.vidpresso.com/>

~~~
TazeTSchnitzel
Just a suggestion, but perhaps you should put one of the videos from that
YouTube channel on the homepage? It would perhaps made a better statement
about what your technology can do because you'll be able to "see it in action"
without having to find the link to your YouTube channel.

EDIT: Your YouTube link on your homepage under "On the Web" points to your
Twitter account!

~~~
randall
Yeah... we're updating our site literally as we speak. Hopefully will have it
launched in about 30 min.

~~~
TazeTSchnitzel
I see, it looks nice! I still think some "screenshots" or a video somewhere on
the homepage might look good, but it's your site, not mine!

~~~
randall
Try again... not sure what you saw, but yeah there's video as you scroll
down... our old site was kind of a "need it up!" kind of thing... and most of
our sales are direct sales, so we haven't yet optimized marketing funnels as
well as we could.

Which is a way of saying if you want to help us fix our marketing woes,
contact me. :)

~~~
TazeTSchnitzel
Ah, I see it now :)

------
ck2
I suspect with this ability the star wars opening credits in pure css3 is
coming soon (or maybe already done).

added: ah of course:
[http://blogs.sitepointstatic.com/examples/tech/css3-starwars...](http://blogs.sitepointstatic.com/examples/tech/css3-starwars/index.html)

~~~
ErikRogneby
Nice. "Also by mentioning 'Star Wars' everyone will understand what I mean.
And I'll receive several thousand more visits."

------
dsl
For anyone who is interested on how this works in the real world, the system
is called First and Ten, and is built by Sportvision. (I'm pretty sure they
have also patented the hell out of it)

<http://en.wikipedia.org/wiki/1st_%26_Ten_(graphics_system)>
<http://www.sportvision.com/>

EDIT: The demo reel is pretty good nerdporn too
<http://www.sportvision.com/media/sportvision-reel-2012>

------
jezfromfuture
Yeah there are countless programs to do this outside web browsers some of my
favorites of the last 20 years <http://en.wikipedia.org/wiki/Scala,_Inc>
(Amiga tool , see we did stuff too before the web !)
<http://en.wikipedia.org/wiki/Video_Toaster> (another awesome amiga based h/w
)

The point is it doesn't take any messing about with web technologies , the
people doign this sort of titling professionaly for Sky/Fox BBC are using a
combination of broadcast hardware & occasionally Apple Shake in the case of
sky sports though i may be out of touch now since shake is not avail much
longer.

~~~
Samuel_Michon
Right, Apple Shake is no more, but a lot of its features found their way to
Apple Motion (which, at $50, is a steal) [1]. Apart from Sportvision for live
sports broadcasting, the tools of the trade are still Adobe After Effects,
Avid Motion Graphics, and Autodesk Flame.

[1] <http://www.apple.com/finalcutpro/motion/>

------
bsimpson
I'm not sure I understand why CSS was chosen for this project. It looks to me
like he's creating a static image, transforming it, and feeding it as a green
screen overlay into a video mixer. Since everything is static, wouldn't it
have been simpler to just make a PNG in PhotoShop and use that?

~~~
mintplant
The names of the swimmers have to be updated dynamically. Easier to update via
HTML and CSS, and since he's piping through his laptop's VGA output as the
keyed overlay, it can be modified in realtime.

------
kayoone
Thats pretty neat, i was always wondering how they really do this in big
football(soccer) machtes or olympics where its done realtime and with no
control over camera images. This explains in nicely! Also well done on the
project, i bet it really added value for spectators!

~~~
chili_powder
First, let me say that this is a very neat project for a high schooler before
what I say next because I'm not trying to downplay what he did. He figured out
how to overlay an image in realtime over video, which is neat.

However, this is only a small part of what is actually done to present the
final image. The more complicated part is the computer vision which allows for
things like composing the image so that the swimmers are always above the
labels (i.e. the superimposed labels appear to be at the bottom of the pool).
They also are using computer vision to recognize where the labels should go,
rather than some kind of positional mount on the camera as he suggests. The
image is processed through a computer which is capable of recognizing the lane
lines, the boundaries of the pool, and the bottom of the pool. This way, when
the camera moves the image is updated automatically.

Again, I'm not trying to downplay what was done here, it is a very nice hack.

~~~
Zimahl
The NFL strictly uses positional cameras. The first down markers, ads, and
other on-field graphics are only available from specific views. It's actually
a very low-tech approach.

College and NFL football typically has 3 to 4 stationed cameras up at ~30
degree angle. These cameras are bolted down and do not move from their
positions. They are able to transmit their zoom, angle, and pitch very
precisely which allows the production team to know exactly where they are
pointing at all time. During the transmission they can choose the exact
location for the first down markers, etc., and all the high-angle cameras will
add it in. To do the overlay they choose a swatch on the field to use as a
green-screen. They only trouble that arises is when a teams uniforms is very
close to the field color.

~~~
dsl
They don't use green screen. Before the game with the field empty they do a
pan and scan of the entire field from every camera. That gives the system a
baseline for change detection that works regardless of team colors.

~~~
Zimahl
By 'green-screen' I meant that they take a small snapshot of the field and use
those colors as a replacement. A scan before the game would do them very
little good, especially in open-air stadiums where game conditions can change
immediately.

~~~
dsl
Well apparently it does them a lot of good, because that is what they do.
Check out the Wikipedia article on First and Ten I posted further up in the
thread.

~~~
Zimahl
You could also watch a Youtube[1] video explaining (near the end) what happens
when field conditions change - fog, mud, etc.

[1] <https://www.youtube.com/watch?v=Vh9af_gXxlM>

------
EEGuy
Nice work. The pro company that does this for broadcast is Sportvision,
www.sportvision.com/

------
shabble
There was a Wired article[1] I saw here a while back about some of the tech
being developed to do this (and much much more) dynamically for sailboat
racing, filmed live from helicopter(s).

The technical challenges, as well as potential for live info-graphics in sport
make this a pretty interesting area, and it's nice to see relatively modest
setups capable of producing what were, until recently, digustingly complex and
expensive video effects/compositing tasks.

[1]
[http://www.wired.com/playbook/2012/08/ff_americascup_ellison...](http://www.wired.com/playbook/2012/08/ff_americascup_ellison/all/)

------
danso
This reminds me of a humorous blog post by the New York Times interactive
graphics desk, in which they debated several options for overlaying flags for
swimmers...not for live TV but for their 3D renders:

[http://chartsnthings.tumblr.com/post/29133053109/the-
olympic...](http://chartsnthings.tumblr.com/post/29133053109/the-olympics-are-
almost-over)

------
jaseflow
This is very cool! Things like this are what's going to allow CSS to become
the design language of future UI.

I can see this being used in a car where an interface is displayed over the
top corner of a screen.

------
rtexal
there are quite a few videos i see out there that place augmented objects in a
video which moves accordingly to the shift of the camera. However that is not
live. Combined with AR algorithms, I am pretty sure that this could be a
kickass overlay for web live videos in the future.

------
jQueryIsAwesome
My (nonexistent) OCD was kicking in and I had to fix the skew in demo.html:
<http://rapedinheaven.com/with_skew.html> (5deg, 0deg)

