
Land Lines - colinprince
https://lines.chromeexperiments.com/
======
johnfn
I was playing around with this, but I was thinking "this is dumb - I can
barely draw any sort of lengthy line at all."

Then I switched from the gaming mouse my sister bought for my birthday to my
trackpad, and I could suddenly draw really long lines.

My hypothesis is that my gaming mouse has really high precision, so it was
sending tons of mousemove events (or whatever) to Chrome. JS was using the
aggregate _number_ of such events, rather than the aggregate distance between
them, as a cutoff. Therefore, people with really precise input devices can
barely draw a line at all, while people without such devices can use the app
just fine.

~~~
kuschku
Yes, same happens for me.

Also, if you move the mouse faster, you can get longer lines. It’s a very bad
and stupid measurement, and I’m surprised Google would actually choose this.

~~~
thesystemis
sorry! this is a bug based on how many events the mouse is firing and I've
open an issue for it -- I will take a look at the app with a gaming mouse and
work on a fix.

~~~
LeifCarrotson
You don't even need a gaming mouse.

My utterly ordinary "Microsoft Optical Mouse V2.0" draws lines about 1"/100
pixels long when moving at normal speeds. I've been trying to draw Michigan,
but utterly unable to get a thumb on the lump.

The spec sheet [1] describes a resolution of 3000 FPS/800 DPI.

[1]:
[http://download.microsoft.com/download/A/E/B/AEB70318-6FE3-4...](http://download.microsoft.com/download/A/E/B/AEB70318-6FE3-48C7-863B-5BFB3BED1FD4/TDS_BasicOpticalMouseUSBV2.0.pdf)

~~~
thesystemis
I'll take a look - thanks! note that we do limit the line somewhat since the
best matches are curves, lines, etc and self intersecting lines don't match
very well.. The best kinds of lines are like the ones in this video
([https://www.youtube.com/watch?v=w6-LK9BOVTA](https://www.youtube.com/watch?v=w6-LK9BOVTA))

------
thesystemis
I helped make this (with the google data arts team), happy to answer any
questions about it.

~~~
thesystemis
also if it's helpful, there's a technical write up here:
[https://medium.com/@zachlieberman/land-
lines-e1f88c745847#.k...](https://medium.com/@zachlieberman/land-
lines-e1f88c745847#.kmh2kh2zd)

and overview video:
[https://www.youtube.com/watch?v=w6-LK9BOVTA](https://www.youtube.com/watch?v=w6-LK9BOVTA)

~~~
rawnlq
Can you explain how you use the vantage tree? What are you storing/searching
for? What error metric are you using for matching?

I think you briefly talked about using heading change and distance for
encoding your polyline. So if I understand correctly, something like:

[forwardDistance1, angleDelta1, forwardDistance2, angleDelta2, ...]

Then are you using it kinda like a kd-tree (filter everything within a
threshold of forwardDistance1, then angleDelta1, then next dimension and so
on)? But then how do you handle the initial scaling? What about cumulative
error in heading or distance?

Congrats on the amazing work by the way!

~~~
thesystemis
thanks! I am using a metric from the dollar gesture recognizer

[http://depts.washington.edu/madlab/proj/dollar/index.html](http://depts.washington.edu/madlab/proj/dollar/index.html)

which gives a value for how close to polylines are (it normalizes them and
does some distance calculations)

the way the vp tree works is you provide a set of data and a metric for
distance (in my case, the data was the polylines and the metric was from
dollar) and it computes the structure. As long as the metric observes some
basic principles (I think it's called triangle inequality) the spatial
division will work and you can do a fast search for nearest neighbors.

------
rdw
For folks seeing this for the first time, start with Drag mode instead of Draw
mode. I think it feels much more playful and exploratory.

~~~
thesystemis
also another tip -- you can click on the city name in the left corner to load
the same view in google earth (if you are curious about what you are looking
at!)

------
TheSpiceIsLife
I tried to draw a section of coast line I'm familiar with but it doesn't seem
to allow you to draw a line more than a certain length before the end of the
line disappears.

Can that be changed?

~~~
thesystemis
the line is limited to a certain lengths since simpler lines (curves, etc)
provide better matches

------
cm2012
My wife and I just played pretending we were teleporters trying to get back
home with a broken machine. We eventually got to JFK!

~~~
Kiro
How do you play?

~~~
cm2012
Go to draw mode. Take turns drawing lines or shapes. The place that appears is
where you teleport to. Keep trying until you get to your home state :)

------
micaeked
I would love to have the "drag" portion as a screensaver, or just something
pretty to leave on the tv.

~~~
thesystemis
I think that's a great idea... I will take a look at that. here's a hack in
the meantime someone put together for doing that:

[https://gist.github.com/spite/90e3dbf8e117660f6788a5748ae06c...](https://gist.github.com/spite/90e3dbf8e117660f6788a5748ae06cad)

~~~
Piskvorrr
Now available as a userscript, so the effect auto-starts when loading the
page. Nice to have as a screensaver ;)

[https://gist.github.com/Piskvor/41df1f68b44b43100552126c76e2...](https://gist.github.com/Piskvor/41df1f68b44b43100552126c76e2f609/raw/experiments_lines_drag.user.js)

------
nickthemagicman
Trying to draw a penis like the rest of us, but you can't get any detail at
all with such short lines.

I mean it's still a pretty stunning software otherwise.

~~~
karmacoda
There your result:
[https://www.google.com/maps/@50.8132986,-2.4755472,263m/data...](https://www.google.com/maps/@50.8132986,-2.4755472,263m/data=!3m1!1e3?hl=en)

~~~
nickthemagicman
Forgot to thank you for this! Not all heros wear capes!

------
epalmer
I tried this and got back images really fast that have matching features. The
first thing that came to mind was what "he who shall not be named" said in the
first Harry Potter book, Harry Potter and the Philosopher's Stone: _What is
this magic?_ "

Edit: format change

------
kibwen
Despite the site name, I'm happy to discover that this works in Firefox as
well!

------
bowersbros
I'm using google chrome, but it doesn't work for me. Suggests using Google
Chrome, because webGL. Chrome 55

~~~
thesystemis
sorry to hear that! can you provide more info about your platform? this app
uses webgl and we check for webgl support when the page loads.

~~~
stevula
I am seeing the same issue. I am running Chrome on Mac. Works fine in Safari
though.

Chrome Version 55.0.2883.95 (64-bit) macOS Sierra 10.12.2

~~~
thesystemis
thanks -- do you know what graphics card that is? also you can try enabling
"Override software rendering list" in chrome://flags/ \-- I don't have a great
handle on what gpus are blacklisted, but I know there are some that are.

putting this in the address bar can give you a lot of info as well
"chrome://gpu"

------
logicallee
how is this possible? The instant I release a line it has a perfect match - I
would be impressed if it got one after working for 1000 ms, but how can it be
instant? what's the back-end setup here?

~~~
thesystemis
there's actually no backend! the matching is done client side.

here's a technical write up:

[https://developers.google.com/web/showcase/2016/land-
lines](https://developers.google.com/web/showcase/2016/land-lines)

the trick for making it fast is vantage point trees
([https://en.wikipedia.org/wiki/Vantage-
point_tree](https://en.wikipedia.org/wiki/Vantage-point_tree)) which help with
nearest neighbor searching through extremely large data sets.

~~~
logicallee
are there natural limits to what kinds of lines are supported? For example
drawing a Z doesn't work at all (whereas a C works well)

When drawing a Z the top bar of the Z is consistently ignored (I draw from the
top down) and doesn't match anything in the picture, just randomly cuts into
whatever is there. Whereas the remaining two strokes line up nicely. I think I
don't need to screenshot it as it's quite consistent and you should see this
yourself too. I wonder why this is...

~~~
thesystemis
the matching is based on the input (lines from the line detection) and we do
some tricks to try to get better matches if the results aren't great. One
trick is for matches that aren't super great, we start to trim the line slight
from the start so if the first pass is a bad match, we try 95% of the line
(ie, the last 95%) then trim is some more, etc.

another thing to note is that the app progressively loads data in the
background so you get better results after the first minute or so once all the
data is loaded -- the app launches with only 20% of the overall data.

~~~
logicallee
But how can it be that you have extremely detailed photos matching all sorts
of lines of all shapes (great job by the way! for normal curves I'm super
impressed), but you don't have any with a natural Z in them? Zigzags aren't
that uncommon - I can see some visually but your algorithm ignores them. I
think it's not just due to the fact that you ignore the beginning of my line -
it's that you somehow don't detect zigzags in the photos... Try drawing some
capital Z's to see what I mean :)

I want to make sure to be positive, this is a super amazing result for almost
all the curves I drew :) Just curious about that one.

~~~
thesystemis
no it's a really good question! I think this just has to do with the line
detection algorithm and it tending to find more curves than sharp angle lines
-- this is what the matches look like when you draw a Z:

[http://imgur.com/a/YErmM](http://imgur.com/a/YErmM)

they are not as good as when you draw a curve and I think it's just trimming
based on general poor matches. I've found if I round the Z or make the angle
less extreme I can get better results.

~~~
dorianm
Your link to the image doesn't work.

Great work BTW

~~~
thesystemis
fixed! thanks!

