<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Interpolation &#8211; stoimen&#039;s web log</title>
	<atom:link href="/tag/interpolation/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>on web development</description>
	<lastBuildDate>Tue, 13 Feb 2018 08:18:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.0.3</generator>
	<item>
		<title>Computer Algorithms: Interpolation Search</title>
		<link>/2012/01/02/computer-algorithms-interpolation-search/</link>
		<comments>/2012/01/02/computer-algorithms-interpolation-search/#comments</comments>
		<pubDate>Mon, 02 Jan 2012 18:31:42 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[algorithms]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Algorithm]]></category>
		<category><![CDATA[binary search]]></category>
		<category><![CDATA[Binary search algorithm]]></category>
		<category><![CDATA[Binary search tree]]></category>
		<category><![CDATA[even binary search]]></category>
		<category><![CDATA[Interpolation]]></category>
		<category><![CDATA[Interpolation search]]></category>
		<category><![CDATA[interpolation search algorithm]]></category>
		<category><![CDATA[Jump search]]></category>
		<category><![CDATA[Logarithm]]></category>
		<category><![CDATA[search algorithm]]></category>
		<category><![CDATA[search algorithms]]></category>
		<category><![CDATA[searching algorithms]]></category>
		<category><![CDATA[Selection algorithm]]></category>
		<category><![CDATA[Technology/Internet]]></category>

		<guid isPermaLink="false">/?p=2560</guid>
		<description><![CDATA[Overview I wrote about binary search in my previous post, which is indeed one very fast searching algorithm, but in some cases we can achieve even faster results. Such an algorithm is the “interpolation search” &#8211; perhaps the most interesting of all searching algorithms. However we shouldn’t forget that the data must follow some limitations. &#8230; <a href="/2012/01/02/computer-algorithms-interpolation-search/" class="more-link">Continue reading <span class="screen-reader-text">Computer Algorithms: Interpolation Search</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2011/12/26/computer-algorithms-binary-search/" rel="bookmark" title="Computer Algorithms: Binary Search">Computer Algorithms: Binary Search </a></li>
<li><a href="/2011/12/12/computer-algorithms-jump-search/" rel="bookmark" title="Computer Algorithms: Jump Search">Computer Algorithms: Jump Search </a></li>
<li><a href="/2011/11/24/computer-algorithms-sequential-search/" rel="bookmark" title="Computer Algorithms: Sequential Search">Computer Algorithms: Sequential Search </a></li>
<li><a href="/2011/12/02/computer-algorithms-linear-search-in-sorted-lists/" rel="bookmark" title="Computer Algorithms: Linear Search in Sorted Lists">Computer Algorithms: Linear Search in Sorted Lists </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<h2>Overview</h2>
<p>I wrote about <a title="Computer Algorithms: Binary Search" href="/2011/12/26/computer-algorithms-binary-search/">binary search</a> in my previous post, which is indeed one very fast searching algorithm, but in some cases we can achieve even faster results. Such an algorithm is the “interpolation search” &#8211; perhaps the most interesting of all searching algorithms. However we shouldn’t forget that the data must follow some limitations. In first place the array must be sorted. Also we must know the bounds of the interval.</p>
<p>Why is that? Well, this algorithm tries to follow the way we search a name in a phone book, or a word in the dictionary. We, humans, know in advance that in case the name we’re searching starts with a &#8220;B&#8221;, like &#8220;Bond&#8221; for instance, we should start searching near the beginning of the phone book. Thus if we&#8217;re searching the word “algorithm” in the dictionary, you know that it should be placed somewhere at the beginning. This is because we know the order of the letters, we know the interval (a-z), and somehow we intuitively know that the words are dispersed equally. These facts are enough to realize that the binary search can be a bad choice. Indeed the binary search algorithm divides the list in two equal sub-lists, which is useless if we know in advance that the searched item is somewhere in the beginning or the end of the list. Yes, we can use also <a href="/2011/12/12/computer-algorithms-jump-search/" title="Computer Algorithms: Jump Search">jump search</a> if the item is at the beginning, but not if it is at the end, in that case this algorithm is not so effective.</p>
<p>So the interpolation search is based on some simple facts. The binary search divides the interval on two equal sub-lists, as shown on the image bellow.</p>
<figure id="attachment_2580" style="width: 620px" class="wp-caption alignnone"><a href="/wp-content/uploads/2012/01/InterpolationSearchfig.1.png"><img class="size-full wp-image-2580" title="Interpolation Search fig. 1" src="/wp-content/uploads/2012/01/InterpolationSearchfig.1.png" alt="Binary search basic approach" width="620" srcset="/wp-content/uploads/2012/01/InterpolationSearchfig.1.png 959w, /wp-content/uploads/2012/01/InterpolationSearchfig.1-300x79.png 300w" sizes="(max-width: 959px) 100vw, 959px" /></a><figcaption class="wp-caption-text">The binary search algorithm divides the list in two equal sub-lists!</figcaption></figure>
<p>What will happen if we don&#8217;t use the constant ½, but another more accurate constant &#8220;C&#8221;, that can lead us closer to the searched item.</p>
<figure id="attachment_2579" style="width: 620px" class="wp-caption alignnone"><a href="/wp-content/uploads/2012/01/InterpolationSearchfig.2.png"><img class="size-full wp-image-2579" title="Interpolation Search fig. 2" src="/wp-content/uploads/2012/01/InterpolationSearchfig.2.png" alt="Interpolation search" width="620" srcset="/wp-content/uploads/2012/01/InterpolationSearchfig.2.png 959w, /wp-content/uploads/2012/01/InterpolationSearchfig.2-300x80.png 300w" sizes="(max-width: 959px) 100vw, 959px" /></a><figcaption class="wp-caption-text">The interpolation search algorithm tries to improve the binary search!</figcaption></figure>
<p><span id="more-2560"></span></p>
<p>The question is how to find this value? Well, we know bounds of the interval and looking closer to the image above we can define the following formula.</p>
<pre lang="PHP">C = (x-L)/(R-L)</pre>
<p>Now we can be sure that we&#8217;re closer to the searched value.</p>
<h2>Implementation</h2>
<p>Here&#8217;s an implementation of interpolation search in PHP.</p>
<pre lang="PHP">$list = array(201, 209, 232, 233, 332, 399, 400);
$x = 332;

function interpolation_search($list, $x)
{
	$l = 0;
	$r = count($list) - 1;

	while ($l <= $r) {
		if ($list[$l] == $list[$r]) {
			if ($list[$l] == $x) {
				return $l;
			} else {
				// not found
				return -1;
			}
		}
		
		$k = ($x - $list[$l])/($list[$r] - $list[$l]);
		
		// not found
		if ($k < 0 || $k > 1) {
			return -1;
		}
		
		$mid = round($l + $k*($r - $l));
		
		if ($x < $list[$mid]) {
			$r = $mid - 1;
		} else if ($x > $list[$mid]) {
			$l = $mid + 1;
		} else {
			// success!
			return $mid;
		}
		
		// not found
		return -1;
	}
}

echo interpolation_search($list, $x);
</pre>
<h2>Complexity</h2>
<p>The complexity of this algorithm is log<sub>2</sub>(log<sub>2</sub>(n)) + 1. While I wont cover its proof, I’ll say that this is very slowly growing function as you can see on the following chart.</p>
<p><a href="/wp-content/uploads/2012/01/logntologlogn.png"><img class="alignnone size-full wp-image-2578" title="log(n) compared to log(log(n))" src="/wp-content/uploads/2012/01/logntologlogn.png" alt="log(n) compared to log(log(n))" width="600" height="371" srcset="/wp-content/uploads/2012/01/logntologlogn.png 600w, /wp-content/uploads/2012/01/logntologlogn-300x185.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>Indeed when the values are equally dispersed into the interval this search algorithm can be extremely useful &#8211; way faster than the binary search. As you can see log<sub>2</sub>(log<sub>2</sub>(100 M)) ≈ 4.73 !!!</p>
<h2>Application</h2>
<p>As I said already this algorithm is extremely interesting and very appropriate in many use cases. Here’s an example where interpolation search can be used. Let’s say there’s an array with user data, sorted by their year of birth. We know in advance that all users are born in the 80’s. In this case sequential or even binary search can be slower than interpolation search.</p>
<pre lang="PHP">$list = array(
	0 => array('year' => 1980, 'name' => 'John Smith', 'username' => 'John'),
	1 => array('year' => 1980, ...),
	...
	10394 => array('year' => 1981, 'name' => 'Tomas M.', ...),
	...
	348489 => array('year' => '1985', 'name' => 'James Bond', ...),
	...
	2808008 => array('year' => '1990', 'name' => 'W.A. Mozart', ...)
);</pre>
<p>Now if we search for somebody born in 1981 a good approach is to use interpolation search.</p>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2011/12/26/computer-algorithms-binary-search/" rel="bookmark" title="Computer Algorithms: Binary Search">Computer Algorithms: Binary Search </a></li>
<li><a href="/2011/12/12/computer-algorithms-jump-search/" rel="bookmark" title="Computer Algorithms: Jump Search">Computer Algorithms: Jump Search </a></li>
<li><a href="/2011/11/24/computer-algorithms-sequential-search/" rel="bookmark" title="Computer Algorithms: Sequential Search">Computer Algorithms: Sequential Search </a></li>
<li><a href="/2011/12/02/computer-algorithms-linear-search-in-sorted-lists/" rel="bookmark" title="Computer Algorithms: Linear Search in Sorted Lists">Computer Algorithms: Linear Search in Sorted Lists </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2012/01/02/computer-algorithms-interpolation-search/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>From SVG to Geo Coordinates &#8211; A Complete Guide</title>
		<link>/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/</link>
		<comments>/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/#comments</comments>
		<pubDate>Fri, 11 Feb 2011 08:30:11 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[micro tutorial]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[Algebraic curves]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[approaching algorithm]]></category>
		<category><![CDATA[Bézier curve]]></category>
		<category><![CDATA[Coordinates]]></category>
		<category><![CDATA[Cubic plane curve]]></category>
		<category><![CDATA[Curves]]></category>
		<category><![CDATA[Differential geometry of curves]]></category>
		<category><![CDATA[Geometry]]></category>
		<category><![CDATA[Graphic design]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[Interpolation]]></category>
		<category><![CDATA[Mathematics]]></category>
		<category><![CDATA[Splines]]></category>
		<category><![CDATA[text editor]]></category>

		<guid isPermaLink="false">/?p=2174</guid>
		<description><![CDATA[Why This Task Is Not Trivial? First of all what do we have? There is a vector shape, which may represent a map, which we&#8217;d like to convert into a GEO map. In other words there is a SVG file containing the source shape, that you&#8217;d like to convert in geoJSON or whatever collection of &#8230; <a href="/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/" class="more-link">Continue reading <span class="screen-reader-text">From SVG to Geo Coordinates &#8211; A Complete Guide</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2009/04/14/you-should-not-insert-an-tag-in-another-tag-ie-breaks/" rel="bookmark" title="You should not insert an &#8220;a&#8221; tag in another &#8220;a&#8221; tag! &#8230;">You should not insert an &#8220;a&#8221; tag in another &#8220;a&#8221; tag! &#8230; </a></li>
<li><a href="/2012/01/30/computer-algorithms-data-compression-with-relative-encoding/" rel="bookmark" title="Computer Algorithms: Data Compression with Relative Encoding">Computer Algorithms: Data Compression with Relative Encoding </a></li>
<li><a href="/2011/03/29/scroll-an-iframe-content-to-a-predefined-position/" rel="bookmark" title="Scroll an IFRAME Content to a Predefined Position">Scroll an IFRAME Content to a Predefined Position </a></li>
<li><a href="/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/" rel="bookmark" title="How to Collect the Images and Meta Tags from a Webpage with PHP">How to Collect the Images and Meta Tags from a Webpage with PHP </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<h2>Why This Task Is Not Trivial?</h2>
<p>First of all what do we have? There is a vector shape, which may represent a map, which we&#8217;d like to convert into a GEO map. In other words there is a SVG file containing the source shape, that you&#8217;d like to convert in geoJSON or whatever collection of geo points. This is not trivial, of course, first of all because there&#8217;s no an algorithm or automation that can do this, and because everybody knows that the resulting map will be only approached, but will never be so accurate as the vector shape. This is because in a vector shape you may contain <a title="Bézier curve" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" target="_blank">Bézier Curves</a>, which I&#8217;ll show a little bit later in this post, that are difficult to represent in geo coordinates.</p>
<p>So the first task will be to find an approaching algorithm. However there are two things that are optimistic:</p>
<ol>
<li>You can&#8217;t effectively represent Bézier curves in geo coordinates, but even if you could do it there&#8217;s no practical need, because the collection of geo coordinates will be huge and this will slow down you&#8217;re application. Remember that geoJSON is yet again possibly used by your browser and the amount of geo points will be proportionally slowing down the app.</li>
<li>As you may know Google&#8217;s visualization map is representing the World&#8217;s countries again with quite approached maps. Take a look at the following image &#8211; the country borders are quite sharpened:</li>
</ol>
<p style="text-align: center;"><a href="/wp-content/uploads/2011/02/Google_visualization_map.png"><img class="size-full wp-image-2183 aligncenter" title="Google_visualization_map" src="/wp-content/uploads/2011/02/Google_visualization_map.png" alt="Google Visualization Map" width="562" height="351" srcset="/wp-content/uploads/2011/02/Google_visualization_map.png 562w, /wp-content/uploads/2011/02/Google_visualization_map-300x187.png 300w" sizes="(max-width: 562px) 100vw, 562px" /></a></p>
<p>So far we know that we need an approaching algorithm that will convert vector lines and possibly curves in geo coordinates, but before we proceed we&#8217;ve to understand the SVG format.<span id="more-2174"></span></p>
<h2>SVG Format and Possible Approaches</h2>
<p>Let me give you an example of a SVG file. By opening such file with a text editor you can see the file format:</p>
<pre lang="svg">
M76.484,153.703c-0.86-0.27-3.816,0.199-4.002-1.055
	c-0.049-0.328-1.109-1.799-1.512-1.824c-0.647-0.04-5.182,1.896-5.219,2.013c-0.051,0.161,0.928,0.627,0.319,0.832
	c-0.028-0.003-0.716-0.36-0.816-0.334c-0.13,0.034-0.262,0.834-0.363,0.771c-0.176-0.24-0.179-0.48-0.007-0.719
	c-0.986-0.764-0.345,0.764-0.526,0.764c-0.771,0,0.184-0.849-0.675,0.037c-2.13-0.433-2.267-0.756-4.129-2.754
	c-1.329-1.42,0.383-8.158-1.571-8.535c-2.223-3.153-6.413-3.037-8.806-5.037c0.107-0.278,0.201-0.563,0.282-0.853
	c0.369,0.372-4.136-0.768-4.373-0.862c-1.498-0.604-3.574-0.133-4.656,0.355c-0.028-1.22,0.171-2.329-0.593-3.027
	c0.588-2.548-0.652-4.752-2.98-4.199c-0.443-1.354,0.142-0.868-1.171-1.483c-0.154-2.069,2.703-7.729-2.239-8.185
	c2.009-3.137-6.201-0.985-6.627-3.125c-0.14-0.703-5.574,1.563-5.752,0.192c-0.39-2.987-4.411-2.185-5.371-3.372
	c0.518,0.641-6.067,1.078-5.645,0.85c-0.118,0.063-1.38,5.328-1.307,4.994c-0.457,2.076,3.774,9.01,2.893,9.625
	c-0.495,0.347-3.159,6.972-1.295,8.588c-0.59-0.512,2.894-0.209,3.163-0.129c1.333,0.396,3.091,1.66,3.469,3.176
	c0.52,2.486-0.793,2.359-2.357,3.013c-0.658,0.274-2.289,6.779-2.368,7.461c-0.319,2.747-1.413,4.468-1.264,7.483
	c0.098,1.984-0.368,2.326,0.891,4.287c1.933,3.004,2.018,2.57,2.178,5.813c-0.127,1.556-1.742,3.565-1.568,5.388
	c0.074,0.77,0.485,2.028,0.235,2.795c-0.286,0.875-1.936,1.557-1.573,2.627c3.253-2.051,4.522,3.092,8.168,2.83
	c0.958-0.069,3.996,1.508,4.536,1.938c1.437,1.12,2.39-1.618,3.232-1.618c-1.037,0,3.461,2.315,2.95,1.774
	c0.828,0.873,3.852-0.123,5.026,0.304c2.416,0.881,6.011-1.386,7.227-2.174c1.616-1.048,3.15-1.38,4.396-2.816
	c0.639-0.737,2.375-4.448,3.254-4.366c0.354,0.032,0.59,1.01,1.06,0.652c0.163-0.126-1.075-2.664,0.689-2.664
	c0.935,0,4.283-2.113,3.799-3.344c-1.384-3.521,4.799-1.365,6.683-1.926c0.335-0.1,7.816-8.23,7.865-8.641
	C70.216,157.721,77.5,154.025,76.484,153.703C76.247,153.629,76.721,153.777,76.484,153.703z
</pre>
<p>This text represent this shape:</p>
<p><a href="/wp-content/uploads/2011/02/svg_map.png"><img class="aligncenter size-full wp-image-2190" title="svg_map" src="/wp-content/uploads/2011/02/svg_map.png" alt="SVG Map" width="84" height="92" /></a></p>
<p>First thing to notice is there are things quite different from the HTML markup. Of course this things are noticeable. There is a M, c and z where the first two are followed by some numbers. What are these characters? Well lets see at <a title="W3.org SVG" href="http://www.w3.org/TR/SVG/" target="_blank">W3.org</a>. There are lots of SVG specific commands, but we need to understand only few of them.</p>
<p>1.<strong> M</strong> (absolute) <strong>m</strong> (relative) &#8211; moveto</p>
<blockquote><p>Start a new sub-path at the given (x,y) coordinate.           <strong>M</strong> (uppercase) indicates that absolute           coordinates will follow; <strong>m</strong> (lowercase)           indicates that relative coordinates will follow. If a moveto  is           followed by multiple pairs of coordinates, the subsequent  pairs           are treated as implicit lineto commands. Hence, implicit  lineto           commands will be relative if the moveto is relative, and           absolute if the moveto is absolute. If a relative moveto           (<strong>m</strong>) appears as the first element of the path,           then it is treated as a pair of absolute coordinates. In this           case, subsequent pairs of coordinates are treated as relative           even though the initial moveto is interpreted as an absolute  moveto.</p></blockquote>
<p>2. <strong>Z</strong> or <strong>z</strong> &#8211; closepath</p>
<blockquote><p>Close the current subpath by drawing a straight line from the         current point to current subpath&#8217;s initial point. Since the Z  and z         commands take no parameters, they have an identical effect.</p></blockquote>
<p>3. <strong>C</strong> (absolute) <strong>c</strong> (relative) &#8211; curveto (x1 y1 x2 y2 x y)+</p>
<blockquote><p>Draws a cubic Bézier curve from the current         point to (x,y) using (x1,y1) as the control point at the         beginning of the curve and (x2,y2) as the control point at         the end of the curve. <strong>C</strong> (uppercase)         indicates that absolute coordinates will follow;         <strong>c</strong> (lowercase) indicates that relative         coordinates will follow. Multiple sets of coordinates may         be specified to draw a polybézier. At the end of the         command, the new current point becomes the final (x,y)         coordinate pair used in the polybézier.</p></blockquote>
<p>4. <strong>L</strong> (absolute) <strong>l</strong> (relative) &#8211; lineto (x y)+</p>
<blockquote><p>Draw a line from the current point to the given (x,y)         coordinate which becomes the new current point.         <strong>L</strong> (uppercase) indicates that absolute         coordinates will follow; <strong>l</strong> (lowercase)         indicates that relative coordinates will follow. A number         of coordinates pairs may be specified to draw a polyline.         At the end of the command, the new current point is set to         the final set of coordinates provided.</p></blockquote>
<h3>1. Bézier Curves</h3>
<p>So far we know that the especially the c command draws a curve &#8211; a Bézier curve. But what is a Bézier curve anyway? Here&#8217;s a little explanation you can find at <a title="Bézier curve" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" target="_blank">Wikipedia</a>. Here&#8217;s an example of a cubic Bézier curve:</p>
<p><a href="/wp-content/uploads/2011/02/Cubic_Bezier_Curve.png"><img class="aligncenter size-full wp-image-2192" title="Cubic_Bezier_Curve" src="/wp-content/uploads/2011/02/Cubic_Bezier_Curve.png" alt="Cubic Bezier Curve" width="300" height="192" /></a>First thing we see is that here there are four points &#8211; p0, p1, p2, p3. The curve between p0 and p3 is defined by them and the two control points &#8211; p1 and p2. To be more precise let me show you an animation of how this curve is constructed:</p>
<p><a href="/wp-content/uploads/2011/02/Bezier_3_big.gif"><img class="aligncenter size-full wp-image-2193" title="Bezier_3_big" src="/wp-content/uploads/2011/02/Bezier_3_big.gif" alt="Cubic Bezier Curve" width="360" height="150" srcset="/wp-content/uploads/2011/02/Bezier_3_big.gif 360w, /wp-content/uploads/2011/02/Bezier_3_big-300x125.gif 300w" sizes="(max-width: 360px) 100vw, 360px" /></a></p>
<p>This is the way the red line is constructed with the help of the green and blue lines, and of course the points p1 and p2. The result is a smooth line that&#8217;s often used in animation and shapes. This is our case. As you&#8217;ve seen the example above is constructed only with curves.</p>
<p>Before we proceed let me say that there are lots of types of Bézier curves not only cubic. Here they are:</p>
<h4>1.1. Linear Bézier curve</h4>
<p><a href="/wp-content/uploads/2011/02/Bezier_1_big.gif"><img class="aligncenter size-full wp-image-2194" title="Bezier_1_big" src="/wp-content/uploads/2011/02/Bezier_1_big.gif" alt="Linear Bezier Curve" width="360" height="150" srcset="/wp-content/uploads/2011/02/Bezier_1_big.gif 360w, /wp-content/uploads/2011/02/Bezier_1_big-300x125.gif 300w" sizes="(max-width: 360px) 100vw, 360px" /></a></p>
<h4>1.2. Quadratic Bézier curve</h4>
<h4><a href="/wp-content/uploads/2011/02/Bezier_2_big.gif"><img class="aligncenter size-full wp-image-2195" title="Bezier_2_big" src="/wp-content/uploads/2011/02/Bezier_2_big.gif" alt="Quadratic Bezier Curve" width="360" height="150" srcset="/wp-content/uploads/2011/02/Bezier_2_big.gif 360w, /wp-content/uploads/2011/02/Bezier_2_big-300x125.gif 300w" sizes="(max-width: 360px) 100vw, 360px" /></a>1.3. And event Higher-order  curves:</h4>
<p><a href="/wp-content/uploads/2011/02/Bezier_4_big.gif"><img class="aligncenter size-full wp-image-2196" title="Bezier_4_big" src="/wp-content/uploads/2011/02/Bezier_4_big.gif" alt="Bezier Curves" width="360" height="150" srcset="/wp-content/uploads/2011/02/Bezier_4_big.gif 360w, /wp-content/uploads/2011/02/Bezier_4_big-300x125.gif 300w" sizes="(max-width: 360px) 100vw, 360px" /></a></p>
<h3>2. What You Need To Know About The SVG Format</h3>
<p>However the most important thing to know is the heart of SVG curve format. First you MOVE to a point with the <strong>M</strong> command. Lets see how does it look in our case:</p>
<p><strong>M76.484,153.703</strong> &#8211; This simply means: move to the point with coordinates (76.484, 153.703)</p>
<p>The next step is to draw a curve. We&#8217;ve seen that a cubic curve is defined by four points &#8211; p0, p1, p2 and p3, but what we have in the SVG format:</p>
<p><strong>c-0.86-0.27-3.816,0.199-4.002-1.055</strong></p>
<p>Here there are only three points (-0.86, -0.27), (-3.816, 0.199), (-4.002, -1.055) &#8211; not four. Well these are only the last three points, the first one is the one defined by the <strong>M</strong> command. Next thing to know is that the <strong>M</strong> command defines an absolute point in the canvas of the SVG file, while the <strong>c</strong> (shouldn&#8217;t be mistaken with <strong>C</strong>) is a relative curve. This means that if the p0 is the point (76.484, 153.703), the p1 point is relative to it with small difference in coordinates &#8211; (-0.86, -0.27).</p>
<p>However the most <em><strong>important</strong></em> thing to know is that after drawing the curve:</p>
<p><em>At the end of the         command, the new current point becomes the final (x,y)         coordinate pair used in the polybézier.</em></p>
<p>This is extremely important! This means that the last point of this curve becomes the p0 of the next curve, and the three points of the second curve, in our case:</p>
<p><strong>c-0.049-0.328-1.109-1.799-1.512-1.824</strong></p>
<p>are relative to the last (x, y) of the previous curve &#8211; (-4.002, -1.055). Without this you cannot convert any SVG shape into geo coordinates.</p>
<h3>3. Lines Instead of Curves</h3>
<p>OK, I said about an approaching algorithm, that is only approaching the curved vector shape. This means that I can simply replace the curves with lines. Thus I&#8217;ve to change to SVG file format from using the <strong>c</strong> command to the <strong>l</strong> command, as<strong> l</strong> is also relative. The curve:</p>
<p><strong>M76.484,153.703 c-0.86-0.27-3.816,0.199-4.002-1.055</strong></p>
<p>will become</p>
<p><strong>M76.484,153.703 l-4.002-1.055</strong></p>
<p>and so forth. This will result into the more sharpened shape:<a href="/wp-content/uploads/2011/02/SVG_Line_Map.png"><img class="aligncenter size-full wp-image-2199" title="SVG_Line_Map" src="/wp-content/uploads/2011/02/SVG_Line_Map.png" alt="SVG Line Map" width="86" height="90" /></a></p>
<p>However this is again a SVG file and no Geo coordinates are present. To end up with this there&#8217;s a tiny PHP script that collects all the last pairs from the c commands and converts them to Geo Coordinates relative to the World&#8217;s center &#8211; (Lat, Lon) = (0, 0).</p>
<pre lang="php">
<?php

$str = '-0.86-0.27-3.816,0.199-4.002-1.055
c-0.049-0.328-1.109-1.799-1.512-1.824c-0.647-0.04-5.182,1.896-5.219,2.013
c-0.051,0.161,0.928,0.627,0.319,0.832c-0.028-0.003-0.716-0.36-0.816-0.334
c-0.13,0.034-0.262,0.834-0.363,0.771c-0.176-0.24-0.179-0.48-0.007-0.719
c-0.986-0.764-0.345,0.764-0.526,0.764c-0.771,0,0.184-0.849-0.675,0.037
c-2.13-0.433-2.267-0.756-4.129-2.754c-1.329-1.42,0.383-8.158-1.571-8.535
c-2.223-3.153-6.413-3.037-8.806-5.037c0.107-0.278,0.201-0.563,0.282-0.853
c0.369,0.372-4.136-0.768-4.373-0.862c-1.498-0.604-3.574-0.133-4.656,0.355
c-0.028-1.22,0.171-2.329-0.593-3.027c0.588-2.548-0.652-4.752-2.98-4.199
c-0.443-1.354,0.142-0.868-1.171-1.483c-0.154-2.069,2.703-7.729-2.239-8.185
c2.009-3.137-6.201-0.985-6.627-3.125c-0.14-0.703-5.574,1.563-5.752,0.192
c-0.39-2.987-4.411-2.185-5.371-3.372c0.518,0.641-6.067,1.078-5.645,0.85
c-0.118,0.063-1.38,5.328-1.307,4.994c-0.457,2.076,3.774,9.01,2.893,9.625
c-0.495,0.347-3.159,6.972-1.295,8.588c-0.59-0.512,2.894-0.209,3.163-0.129
c1.333,0.396,3.091,1.66,3.469,3.176c0.52,2.486-0.793,2.359-2.357,3.013
c-0.658,0.274-2.289,6.779-2.368,7.461c-0.319,2.747-1.413,4.468-1.264,7.483
c0.098,1.984-0.368,2.326,0.891,4.287c1.933,3.004,2.018,2.57,2.178,5.813
c-0.127,1.556-1.742,3.565-1.568,5.388c0.074,0.77,0.485,2.028,0.235,2.795
c-0.286,0.875-1.936,1.557-1.573,2.627c3.253-2.051,4.522,3.092,8.168,2.83
c0.958-0.069,3.996,1.508,4.536,1.938c1.437,1.12,2.39-1.618,3.232-1.618
c-1.037,0,3.461,2.315,2.95,1.774c0.828,0.873,3.852-0.123,5.026,0.304
c2.416,0.881,6.011-1.386,7.227-2.174c1.616-1.048,3.15-1.38,4.396-2.816
c0.639-0.737,2.375-4.448,3.254-4.366c0.354,0.032,0.59,1.01,1.06,0.652
c0.163-0.126-1.075-2.664,0.689-2.664c0.935,0,4.283-2.113,3.799-3.344
c-1.384-3.521,4.799-1.365,6.683-1.926c0.335-0.1,7.816-8.23,7.865-8.641';


$matches = explode('c', $str);

$temp = array();
foreach ($matches as $k => $v) {
    // get the new relative point
    $s = $v;

    // a really dummy regex to find the last pair
    preg_match('/(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?/', $s, $m);


    // if the array is not empty
    if (!empty($temp)) {
        $m[5] = $temp[0]+$m[5];
        $m[6] = $temp[1]+$m[6];
    }

    echo '[', ($m[5]), ', ', ($m[6]), '],<br />';

    // save the last point
    $temp = array($m[5], $m[6]);
}
</pre>
<h2>Final Adjustments</h2>
<p>I guess you don&#8217;t need any shape in the World&#8217;s center as you may not need it in the same scale. There are two things to do. First you can scale the map by multiplying by a factor every point:</p>
<pre lang="php">
// a really dummy regex to find the last pair
    preg_match('/(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?(-?\d{1,2}\.?\d{0,3}),?/', $s, $m);

    // multiply by some factor
    $m[5] *= 0.05;
    $m[6] *= -0.05;

    // if the array is not empty
    if (!empty($temp)) {
        $m[5] = $temp[0]+$m[5];
        $m[6] = $temp[1]+$m[6];
    }
</pre>
<p>and than you can move the shape all over the world by adding some offset to the resulting point:</p>
<pre lang="php">
echo '[', ($m[5]-38.9), ', ', ($m[6]+10.7), '],<br />';
</pre>
<h2>Further Researches</h2>
<p>Here we just substitute the curves with lines, which is the most primitive approach. What about substituting each curve with corresponding two lines, or three lines. The resulting shape will be far more accurate in compare with the source &#8220;curved&#8221; shape. So there are still lots of things to be done. However this may help you do the job.</p>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2009/04/14/you-should-not-insert-an-tag-in-another-tag-ie-breaks/" rel="bookmark" title="You should not insert an &#8220;a&#8221; tag in another &#8220;a&#8221; tag! &#8230;">You should not insert an &#8220;a&#8221; tag in another &#8220;a&#8221; tag! &#8230; </a></li>
<li><a href="/2012/01/30/computer-algorithms-data-compression-with-relative-encoding/" rel="bookmark" title="Computer Algorithms: Data Compression with Relative Encoding">Computer Algorithms: Data Compression with Relative Encoding </a></li>
<li><a href="/2011/03/29/scroll-an-iframe-content-to-a-predefined-position/" rel="bookmark" title="Scroll an IFRAME Content to a Predefined Position">Scroll an IFRAME Content to a Predefined Position </a></li>
<li><a href="/2011/02/25/how-to-collect-the-images-and-meta-tags-from-a-webpage-with-php/" rel="bookmark" title="How to Collect the Images and Meta Tags from a Webpage with PHP">How to Collect the Images and Meta Tags from a Webpage with PHP </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2011/02/11/from-svg-to-geo-coordinates-a-complete-guide/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
