Databases
StackOverflow2013
Postsdbo
POWhy are my particles drifting? ( aka Is Math.random() broken or is it my algorithm? )
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy are my particles drifting? ( aka Is Math.random() broken or is it my algorithm? )
    primarykey
    data
    text
    <p>Using Javascript I'm crudely simulating Brownian motion of particles, but for some reason I don't understand my particles are drifting up and to the left.</p> <p>The algorithm is pretty straight forward. Each particle is a <code>div</code> and I simply add or subtract a random number from each <code>div</code>'s <code>top</code> and <code>left</code> position each round.</p> <p>I read up on <code>Math.random()</code> a little, and I've tried to use a function that returns a random number from <code>min</code> to <code>max</code> inclussive:</p> <pre><code>// Returns a random integer between min and max // Using Math.round() will give you a non-uniform distribution! function ran(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } </code></pre> <p>Here is the function for the movement of the particles:</p> <pre><code>var x, y, $elie, pos, nowX, nowY, i, $that; function moveIt() { $("div.spec").each(function(i, v) { x = ran(-5, 5); y = ran(-5, 5); $elie = $(v); pos = $elie.position(); nowX = pos.left; nowY = pos.top; // The min and abs are to keep the particles within a box // The drift occurs even if I remove min and abs $elie.css("left", Math.min(Math.abs(nowX + x), 515)); $elie.css("top", Math.min(Math.abs(nowY + y), 515)); }); } </code></pre> <p>And here is how the particles are initially set up an the <code>setInterval</code> started.</p> <pre><code>$(function() { $("body").append("&lt;div/&gt;").attr("id","box"); $elie = $("&lt;div/&gt;").attr("class","spec"); // Note that math random is inclussive for 0 and exclussive for Max for (i = 0; i &lt; 25; ++i) { $that = $elie.clone(); $that.css("top", ran(0, 495)); $that.css("left", ran(0, 495)); $("#box").append($that); } timer = setInterval(moveIt, 60); $("input").toggle(function() { clearInterval(timer); this.value = " Start "; }, function() { timer = setInterval(moveIt, 60); this.value = " Stop "; }); }); </code></pre> <p>My problem is that using the <code>min</code> and <code>max</code> from above ( <code>-5, 5</code> ), all the particles drift up and to the left very fast. </p> <h2><strong><a href="http://jsfiddle.net/55MPu/" rel="noreferrer">jsFiddle example of drift (-5, 5)</a></strong></h2> <p><a href="http://jsfiddle.net/JVWAy/" rel="noreferrer">Example of drift even with the removal of <code>.min()</code> and <code>.abs()</code>.</a></p> <p>To counteract this, I have to use a <code>min</code> and <code>max</code> of <code>-1, 5</code>.</p> <h2><strong><a href="http://jsfiddle.net/qpzJY/" rel="noreferrer">jsFiddle example of no drift (-1, 5)</a></strong></h2> <p><br/></p> <p>Here is the CSS for the <code>div</code> all the particles are contained in:</p> <pre><code>#box { width:500px; height:500px; border:2px #000 solid; position: relative; } </code></pre> <p>Here is the default CSS for each particle:</p> <pre><code>div.spec { width:5px; height:5px; background-color:#00DDAA; position:absolute; } </code></pre> <p><strong>What is going on? Why does a min and max of <code>-5</code> and <code>5</code> cause an upward and leftward drift?</strong></p> <p>A test of the random function <code>ran()</code> doesn't seem to show such a persistent negative drift.</p> <h2><strong><a href="http://jsfiddle.net/4hhKp/" rel="noreferrer">jsFiddle example of testing ran()</a></strong></h2> <hr> <p><br/></p> <p>The <code>ran()</code> function was taken from <strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/random" rel="noreferrer">the MDC Math.random() page</a></strong>.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPeter Ajtai
    1. USPeter Ajtai
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy are my particles drifting? ( aka Is Math.random() broken or is it my algorithm? )
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhy are my particles drifting? ( aka Is Math.random() broken or is it my algorithm? )
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhy are my particles drifting? ( aka Is Math.random() broken or is it my algorithm? )
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload