<?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/"
	>

<channel>
	<title>Pims Labs &#187; ActionScript</title>
	<atom:link href="http://labs.pimsworld.org/category/langages/actionscript-langages/feed/" rel="self" type="application/rss+xml" />
	<link>http://labs.pimsworld.org</link>
	<description>Les labs de Pims World</description>
	<pubDate>Thu, 28 May 2009 08:15:39 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Petite histoire d&#8217;une formule mathématique discrète</title>
		<link>http://labs.pimsworld.org/2009/02/petite-histoire-dune-formule-mathematique-discrete/</link>
		<comments>http://labs.pimsworld.org/2009/02/petite-histoire-dune-formule-mathematique-discrete/#comments</comments>
		<pubDate>Mon, 02 Feb 2009 15:40:58 +0000</pubDate>
		<dc:creator>Stéphane Roucheray</dc:creator>
		
		<category><![CDATA[ActionScript]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Open Source]]></category>

		<category><![CDATA[AS3]]></category>

		<category><![CDATA[Maths]]></category>

		<guid isPermaLink="false">http://labs.pimsworld.org/?p=273</guid>
		<description><![CDATA[Lors de deux projets récents, j&#8217;ai été confronté à des problématiques similaires. J&#8217;ai d&#8217;abord eu à construire une réglette en ActionScript 3, puis un navigateur de produits, semblable à celui du site de Apple, en JavaScript.
Dans les deux cas, il fallait pouvoir récupérer, depuis la position du curseur sur sa réglette, des valeurs par paliers. [...]]]></description>
			<content:encoded><![CDATA[<p>Lors de deux projets récents, j&#8217;ai été confronté à des problématiques similaires. J&#8217;ai d&#8217;abord eu à construire une réglette en ActionScript 3, puis un navigateur de produits, semblable à celui du site de <a href="http://www.apple.com/fr/mac/">Apple</a>, en <a href="http://labs.pimsworld.org/tag/javascript/">JavaScript</a>.</p>
<p>Dans les deux cas, il fallait pouvoir récupérer, depuis la position du curseur sur sa réglette, des valeurs par paliers. La question était donc celle-ci : <strong>Comment récupérer une valeur discrète sur une échelle continue ?</strong> </p>
<h2>Valeurs continues</h2>
<p>Tout d&#8217;abord pour récupérer une valeur continue sur une réglette, une simple règle de trois suffit : </p>
<p><strong>AS3 : récupération d&#8217;une valeur continue sur une réglette arbitraire</strong></p>
<div class="codecolorer-container actionscript3 " style="overflow:auto;white-space:nowrap;width:540px"><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="coMULTI">/**<br />
&nbsp;* min :&nbsp; &nbsp; &nbsp; &nbsp; valeur minimum de la réglette<br />
&nbsp;* max :&nbsp; &nbsp; &nbsp; &nbsp; valeur maximum de la réglette<br />
&nbsp;* width :&nbsp; &nbsp; &nbsp; largeur de la réglette<br />
&nbsp;* position : &nbsp; position du curseur sur la réglette<br />
&nbsp;*/</span><br />
<span class="kw2">var</span> continuous = <span class="kw7">min</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="kw7">max</span> <span class="sy0">-</span> <span class="kw7">min</span><span class="br0">&#41;</span> <span class="sy0">*</span> <span class="kw7">position</span> <span class="sy0">/</span> <span class="kw7">width</span></div></div>
<h2>Arrondi au multiple le plus proche</h2>
<p>Supposons maintenant que je décide d&#8217;ajouter la notion de <strong>pas</strong> sur ma réglette. Je ne souhaite alors récupérer que les valeurs multiples de ce pas. Par exemple, si mon pas est de 3 j&#8217;obtiendrais la série suivante :</p>
<div class="codecolorer-container text " style="overflow:auto;white-space:nowrap;width:540px"><div class="text codecolorer" style="font-family:Monaco,Lucida Console,monospace">0, 3, 6, 9, 12...</div></div>
<p>Voici la formule qui me permet d&#8217;obtenir ce résultat.</p>
<p><strong>AS3 : formule retournant une valeur discrète à partir d&#8217;une échelle continue</strong></p>
<div class="codecolorer-container actionscript3 " style="overflow:auto;white-space:nowrap;width:540px"><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="coMULTI">/**<br />
&nbsp;* step : &nbsp; &nbsp; &nbsp; pas de mon échelle<br />
&nbsp;* continuous : valeur continue sur mon échelle<br />
&nbsp;*/</span><br />
<span class="kw2">var</span> discrete = step <span class="sy0">*</span> <a href="http://www.google.com/search?q=math%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:math.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Math</span></a>.<span class="kw7">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>continuous <span class="sy0">+</span> step <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="sy0">/</span> step <span class="br0">&#41;</span>;</div></div>
<p>Cette formule, renvoie donc une valeur discrète (arrondie) quand on lui fournit le <strong>pas</strong> à respecter (<em>step</em>) et une <strong>valeur continue</strong> (<em>value</em>).</p>
<p>Il subsiste encore un problème, la formule précédente ne prend pas en compte la valeur minimum de ma réglette. En reprenant l&#8217;exemple précédent, lorsque je récupère des valeurs avec un <strong>pas</strong> de 3 mais ne commençant pas à 0&#8230; disons à 2,  je souhaiterais obtenir la série suivante  :</p>
<div class="codecolorer-container text " style="overflow:auto;white-space:nowrap;width:540px"><div class="text codecolorer" style="font-family:Monaco,Lucida Console,monospace">2, 5, 8, 11, 14...</div></div>
<p>Or avec la formule précédente, je n&#8217;obtiens que des arrondis de multiples du pas mais 2, 5, 8, 11, 14 ne sont pas des multiples de 3.</p>
<h2>Valeurs discrètes et minimum d&#8217;échelle</h2>
<p>Pour résoudre le problème, il faut donc modifier les 2 formules précédentes en décalant l&#8217;échelle de la valeur minimum avant d&#8217;utiliser la fonction d&#8217;arrondi  puis en la corrigeant à nouveau après.<br />
En plus clair : </p>
<ol>
<li>Retrancher la valeur minimum à la valeur continue (pour que l&#8217;échelle de la réglette parte de 0 et pas de la valeur minimum)</li>
<li>Puis ajouter cette même valeur minimum à la valeur arrondie pour corriger le décalage introduit précédemment</li>
</ol>
<p><strong>AS3 : Comparaison des formules</strong></p>
<div class="codecolorer-container actionscript3 " style="overflow:auto;white-space:nowrap;width:540px"><div class="actionscript3 codecolorer" style="font-family:Monaco,Lucida Console,monospace"><span class="co1">// Formules précédentes</span><br />
<span class="kw2">var</span> continuous = &nbsp;<span class="kw7">min</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="kw7">max</span> <span class="sy0">-</span> <span class="kw7">min</span><span class="br0">&#41;</span> <span class="sy0">*</span> <span class="kw7">position</span> <span class="sy0">/</span> <span class="kw7">width</span>;<br />
<span class="kw2">var</span> discrete = step <span class="sy0">*</span> <a href="http://www.google.com/search?q=math%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:math.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Math</span></a>.<span class="kw7">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>continuous <span class="sy0">+</span> step <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="sy0">/</span> step<span class="br0">&#41;</span>;<br />
<br />
<span class="co1">// Formules corrigées</span><br />
<span class="kw2">var</span> continuous = &nbsp;<span class="br0">&#40;</span><span class="kw7">max</span> <span class="sy0">-</span> <span class="kw7">min</span><span class="br0">&#41;</span> <span class="sy0">*</span> <span class="kw7">position</span> <span class="sy0">/</span> <span class="kw7">width</span>;<br />
<span class="kw2">var</span> discrete = <br />
&nbsp; &nbsp; step <span class="sy0">*</span> <a href="http://www.google.com/search?q=math%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:math.html&amp;filter=0&amp;num=100&amp;btnI=lucky"><span class="kw5">Math</span></a>.<span class="kw7">floor</span><span class="br0">&#40;</span><span class="br0">&#40;</span>continuous <span class="sy0">+</span> step <span class="sy0">/</span> <span class="nu0">2</span><span class="br0">&#41;</span> <span class="sy0">/</span> step<span class="br0">&#41;</span> <span class="sy0">+</span> mini;</div></div>
<p>Pour tester la formule, voici un exemple des réglettes faites en AS3. L&#8217;une retourne des valeurs continues l&#8217;autre des valeurs par paliers. Les valeurs minimum et maximum ainsi que le pas de la deuxième réglette sont paramétrables.</p>
<div style="width:230px; margin: 0 auto;">

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_0" width="230" height="250">
      <param name="movie" value="http://labs.pimsworld.org/wp-content/uploads/2009/02/curseur.swf" />
      <param name="wmode" value="transparent" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://labs.pimsworld.org/wp-content/uploads/2009/02/curseur.swf" width="230" height="250" wmode="transparent">
      <!--<![endif]-->
        <p>Le plugin Flash est requis pour visualiser cet objet.</p>
      <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>

</div>
]]></content:encoded>
			<wfw:commentRss>http://labs.pimsworld.org/2009/02/petite-histoire-dune-formule-mathematique-discrete/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
