-2

I am starting to learn JavaScript and I found this article: http://michalbe.blogspot.ro/2011/02/javascript-random-numbers-with-custom.html

I liked the idea of a custom seed number generator but I for the love of Thor cannot figure it out, I really need a practical example done with pure javascript or a library like jQuery if it's easier.

Here we go:

So what I want is to generate 10 different numbers sepparated by "-" (minus), each number with the range of 1-50 and I would like the seed for each number to be made up by multiplying 2 things:

  1. the current time in as much as a bigger number sequence as you can get it (with a delay of 1 second for each number so the time will be different)
  2. your birth date (from 3 select inputs)

[!] Also I want to know how we can animate the generation of these 10 numbers in different ways, like... for example the animation of old train station Arival/Departures mechanical displays, or like different HTML5 canvas particle techniques or CSS3 or anything really. - This can be done in another question if you think it's too much.

If you are able to help me out with this I will be so very forever grateful!

Thank you!

var CustomRandom = function(nseed) {    
  
  var seed,    
    constant = Math.pow(2, 13)+1,    
    prime = 1987,    
//any prime number, needed for calculations, 1987 is my favorite:)  
    maximum = 50;    
//maximum number needed for calculation the float precision of the numbers (10^n where n is number of digits after dot)  
    if (nseed) {    
      seed = nseed;    
    }    
    
    if (seed == null) {    
//before you will correct me in this comparison, read Andrea Giammarchi's text about coercion http://goo.gl/N4jCB  
      
      seed = (new Date()).getTime();   
//if there is no seed, use timestamp     
    }     
    
    return {    
      next : function(min, max) {    
        seed *= constant;    
        seed += prime;    
           
      
        return min && max ? min+seed%maximum/maximum*(max-min) : seed%maximum/maximum;  
// if 'min' and 'max' are not provided, return random number between 0 & 1  
      }    
    }    
}

var rng = CustomRandom(09031887);
//use '09031887' as a seed ?
    rng.next();
    rng.next();
});
<b>Your birth date:</b><br>
Day: 
<select id="day">
<option selected="selected">01</option>
<option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
</select>
Month:
<select id="month">
<option selected="selected">01</option>
<option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option>
</select>
Year: 
<select id="year">
<option selected="selected">1998</option>
<option>1997</option><option>1996</option><option>1995</option><option>1994</option><option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option><option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option><option>1983</option><option>1982</option><option>1981</option><option>1980</option><option>1979</option><option>1978</option><option>1977</option><option>1976</option><option>1975</option><option>1976</option><option>1975</option><option>1976</option>
</select>
<br><br>

<span id="nr1"></span> - 
<span id="nr2"></span> - 
<span id="nr3"></span> - 
<span id="nr4"></span> - 
<span id="nr5"></span> - 
<span id="nr6"></span> - 
<span id="nr7"></span> - 
<span id="nr8"></span> - 
<span id="nr9"></span> - 
<span id="nr10"></span>
<br><br>

<button>Generate</button>
Xotic750
  • 22,914
  • 8
  • 57
  • 79
Lucian
  • 24
  • 2
  • 9
  • 1
    where exactly is the problem? what did you try so far? post a jsfiddle – roeb Jun 10 '15 at 08:22
  • Creating a random integer in a range is simple [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random), but as you can see there is no way of controlling the `seed` with this built in function. This is also true for the modern [Crypto.getRandomValues](https://developer.mozilla.org/en-US/docs/Web/API/RandomSource/getRandomValues) If a `seed` is a must then you will have to look at a 3rd party library (or write it yourself). – Xotic750 Jun 10 '15 at 08:25
  • I have not yet managed to make the one in the article work, so I don't have anything really, all I have is some HTML for the output. This is why I asked for a practical example :( – Lucian Jun 10 '15 at 08:49
  • Show us your code that you were unable to get to work, and what appeared to be going wrong, then we can give you advice on how to correct it. – Xotic750 Jun 10 '15 at 08:59
  • Here is what I have: https://jsfiddle.net/cunuqq7h/ – Lucian Jun 10 '15 at 09:18
  • I've also found this: https://github.com/davidbau/seedrandom but I don't know how to apply it. – Lucian Jun 10 '15 at 09:21
  • The first thing that I notice with the code that you have provided is, in the [console](https://developer.mozilla.org/en/docs/Web/API/console) it shows `Uncaught SyntaxError: Unexpected token }` You also have no [event handling](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for the supplied HTML. – Xotic750 Jun 10 '15 at 09:24
  • The project https://github.com/davidbau/seedrandom gives examples of how to implement the library, they seems concise and reasonable. – Xotic750 Jun 10 '15 at 09:29
  • Well as long as the script works even without event handlers, I would be happy. I can provide values from the select inputs and change the value of variables later on. – Lucian Jun 10 '15 at 09:30
  • I would not like to use a whole library for this, but if I can see a practical example of implementing that library I would consider it of course. – Lucian Jun 10 '15 at 09:34

2 Answers2

0

If you fix the SyntaxError in your supplied code, then the Javascript code actually works. You don't have any event handlers to control it with your supplied HTML though.

var CustomRandom = function (nseed) {
    var seed,
        constant = Math.pow(2, 13) + 1,
        prime = 1987,
        //any prime number, needed for calculations, 1987 is my favorite:)  
        maximum = 50;
        //maximum number needed for calculation the float precision of the numbers (10^n where n is number of digits after dot)  
    
    if (nseed) {
        seed = nseed;
    }

    if (seed == null) {
        //before you will correct me in this comparison, read Andrea Giammarchi's text about coercion http://goo.gl/N4jCB  
        seed = (new Date()).getTime();
        //if there is no seed, use timestamp     
    }

    return {
        next: function (min, max) {
            seed *= constant;
            seed += prime;

            return min && max ? min + seed % maximum / maximum * (max - min) : seed % maximum / maximum;
            // if 'min' and 'max' are not provided, return random number between 0 & 1  
        }
    }
}

var rng = CustomRandom(09031887),
    //use '09031887' as a seed ?
    pre = document.getElementById('out');

pre.textContent += rng.next() + '\n';
pre.textContent += rng.next();
<pre id="out"></pre>

A further example of using the library that you linked to.

Math.seedrandom(09031887);
//use '09031887' as a seed ?

var pre = document.getElementById('out');

pre.textContent += Math.random() + '\n'; // output always 0.21968861683194144
pre.textContent += Math.random(); // output always 0.9079655673042485
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
<pre id="out"></pre>
Xotic750
  • 22,914
  • 8
  • 57
  • 79
  • Very nice Xotic, I really appreaciate fixing the code, this changes a lot but I still need to change a couple of things. 1. The first one is to include the current-time and multiply it with the seed, not to use it as an "if". 2. The second one is to delay each following number by 1 second so the current-time will be different. – Lucian Jun 10 '15 at 09:44
  • Also, the value for CustomRandom of 09031887 is my birth date and I am not sure if that is where it should go. And I need the numbers to be whole numbers from 1 to 50. – Lucian Jun 10 '15 at 09:46
  • I tried the first answer where you fixed the code but it just generates the number 0.56 over and over. – Lucian Jun 10 '15 at 10:00
  • It will if you use the same `seed` upon each generation. – Xotic750 Jun 10 '15 at 10:02
  • Yes, correct, but what I want to do is to get a different number based on the seed which we obtain like this (current time * birth date) for example: 13:05:34 * 9/3/1987 which we write like this: 130534 * 931987. This is an example. And if we delay running the script for each different number by 1 second we get different results. – Lucian Jun 10 '15 at 10:07
  • Then you will need to modify the code to do exactly that. Show us your modified code. – Xotic750 Jun 10 '15 at 10:12
  • This is what I have done so far: https://jsfiddle.net/cunuqq7h/3/ but it doesn't work and I don't know why. – Lucian Jun 10 '15 at 11:50
  • You still don't have any [event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to handle your user interface. – Xotic750 Jun 10 '15 at 11:59
  • I am aware of that, I can add that later, I know how to do it :D – Lucian Jun 10 '15 at 12:00
  • Do I even need this part?: "if 'min' and 'max' are not provided, return random number between 0 & 1" - Maybe I could remove this return safely? – Lucian Jun 10 '15 at 12:07
  • I have came to an alternative using David Bau's seedrandom javascript: https://jsfiddle.net/cunuqq7h/5/ - I am not sure if the birth date is set in the right place but now the only thing I would need with this alternative is a way to convert each number to a whole number from 1 to 50 (min max) or something. – Lucian Jun 10 '15 at 14:25
0

This is as close as I got using David Bau's script (seedrandom.js):

<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js">
</script>
<b>Your birth date:</b><br>
Day: 
<select id="day">
<option selected="selected">day</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
</select>
Month:
<select id="month">
<option selected="selected">month</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option>10</option><option>11</option><option>12</option>
</select>
Year: 
<select id="year">
<option selected="selected">year</option><option>2015</option><option>2014</option><option>2013</option><option>2012</option><option>2011</option><option>2010</option><option>2009</option><option>2008</option><option>2007</option><option>2006</option><option>2005</option><option>2004</option><option>2003</option><option>2002</option><option>2001</option><option>2000</option><option>1999</option><option>1998</option><option>1997</option><option>1996</option><option>1995</option><option>1994</option><option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option><option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option><option>1983</option><option>1982</option><option>1981</option><option>1980</option><option>1979</option><option>1978</option><option>1977</option><option>1976</option><option>1975</option><option>1976</option><option>1975</option><option>1976</option><option>1975</option><option>1974</option><option>1973</option><option>1972</option><option>1971</option><option>1970</option><option>1969</option><option>1968</option><option>1967</option><option>1966</option><option>1965</option><option>1964</option><option>1963</option><option>1962</option><option>1961</option><option>1960</option>
</select>

<br><br>

<span id="nr1"></span> / 
<span id="nr2"></span> / 
<span id="nr3"></span> / 
<span id="nr4"></span> / 
<span id="nr5"></span> / 
<span id="nr6"></span> / 
<span id="nr7"></span> / 
<span id="nr8"></span> / 
<span id="nr9"></span> / 
<span id="nr10"></span>
<br><br>

<button onclick="generate()">Generate</button>

<script type="text/javascript">
function generate() {
    // get user's birth date as a number
    var day = (document.getElementById("day").value);
    var month = (document.getElementById("month").value);
    var year = (document.getElementById("year").value);
    var dob = (day+month+year);

    //check if user specified dob
    if(isNaN(day) || isNaN(month) || isNaN(year))
   {
    alert("Check your birth date!");
   }
    else {
    // Sets Math.random to an ARC4-based PRNG that is autoseeded using the
    // current time, dom state, and other accumulated local entropy.
    // The generated seed string is returned.
    Math.seedrandom();

    //the custom seed is the user's dob
    nr1.textContent = (Math.random(dob));
    nr2.textContent = (Math.random(dob));
    nr3.textContent = (Math.random(dob));
    nr4.textContent = (Math.random(dob));
    nr5.textContent = (Math.random(dob));
    nr6.textContent = (Math.random(dob));
    nr7.textContent = (Math.random(dob));
    nr8.textContent = (Math.random(dob));
    nr9.textContent = (Math.random(dob));
    nr10.textContent = (Math.random(dob));
   }
}
</script>

All I need now is to convert all the numbers into whole numbers ranging from 1 to 50 (something like min max). Anyone knows how to? > Feel free to use this: https://jsfiddle.net/cunuqq7h/9/

Lucian
  • 24
  • 2
  • 9