Heart Rate Monitor

Question

Okay, so I followed a previous post on creating a hear rate monitor and tweaked it a bit to fit my web design. Instead of setting Var Data how would I randomize the numbers between 1 and 300 over and over again until it reaches 200 random numbers total and draws them? Thanks for your time. This is my code but I took out most of the Var Data as it's 200 numbers long!

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#dbbd7a";
        ctx.fill();

        var fps = 60;
        var n = 1;


        var data = [
             110, 149, 89, 150, 117, 150, 143, 82, 12, 92, 144, 73, 82, 200,
            177, 149, 199, 116, 88, 105, 123, 12, 82, 72, 66, 15, 177, 182,
            199, 116, 159, 150, 100, 10, ];


        drawWave();

        function drawWave() {
            setTimeout(function() {
                requestAnimationFrame(drawWave);
                ctx.lineWidth = "1";
                ctx.strokeStyle = 'green';

                n += 1;
            if (n >= data.length) {
                n = 1;
            }
            ctx.beginPath();
            ctx.moveTo(n - 1, data[n - 1 ]);
            ctx.lineTo(n, data[n]);
            ctx.stroke();

            ctx.clearRect(n+1, 0, 10, canvas.height);
    }, 1000 / fps);
        }

    </script>

luanped · Answer 1 · 2015-12-03T23:04:59.593

1

The essence would be something like this: an array of size 200, since you want 200 values, and using a loop randomly populate the values.

Math.random will generate a number between 0 (inclusive) and 1 (non-inclusive), multiplying by 300 will give you anything between 0 and 299.99... Math.floor() removes the decimal places (range becomes 0 and 299); so we add 1 in the end to get the 1 to 300 range you wanted.

Hope this helps

var data = [];
for(var i = 0; i < 200; ++i) {
   data[i] = Math.floor(Math.random() * 300) + 1;
}

edited Dec 03 '15 at 23:04

answered Dec 03 '15 at 19:32

luanped

3,178
2
26
40

you can avoid instantiating with `new Array` by using array literal and just pushing the new values in. I myself think it's cleaner.. also, It is a moot argument, but it should be faster. – rlemon Dec 03 '15 at 20:45
@rlemon yes I agree it's cleaner, initially I thought to be a bit more explicit with the 200 values, but i agree that is not necessary at all – luanped Dec 03 '15 at 23:05
Yea, I wasn't so much complaining as I was just adding some notes for OP. The answer still works well as is. – rlemon Dec 03 '15 at 23:08
@luanped or just `Math.ceil(Math.random() * 3)` because it reads better. so `Array.apply(null, Array(200)).map(function(){ return Math.ceil(Math.random() * 300)})` – Dimitar Christoff Dec 04 '15 at 16:17

score 0 · Answer 2 · edited May 23 '17 at 11:44

One easy way to do this is the following:

// creating a new Array with a length of 20 (obviously
// adjust the '20' to '200' for your own use-case):
var arr = new Array(20);

// using Array.prototype.fill() to assign a value (an
// empty String) to each array element, in order that
// Array.prototype.forEach() can iterate over each array
// element:
arr.fill('').forEach(function(needle, i, haystack){
  // the arguments are automagically available to the
  // the anonymous function;
  // needle: the current array-element of the Array,
  // i: the index of the current array-element,
  // haystack: the Array itself.

  // here we set the array value using bracket notation:
  haystack[i] = Math.floor(Math.random() * (300 - 1) + 1);
});

// outputting the array to the console:
console.log( arr );

var arr = new Array(20);

arr.fill('').forEach(function(needle, i, haystack) {
  haystack[i] = Math.floor(Math.random() * (300 - 1) + 1);
});

// Setting the array as the text of the <body> element,
// given the lack of a Snippet console:
document.body.textContent = arr.join(', ') + '.';

JS Fiddle demo.

The portion of the posted solution that generates the random numbers within a range:

Math.floor(Math.random() * (300 - 1) + 1)

was effectively borrowed from an answer elsewhere on the site (https://stackoverflow.com/a/1527820/82548, written by Ionut G. Stan), and is explained in that answer.

However, briefly, it generates a random number between 0 and 1; multiplies that by 299 (300 - 1), so that the integer portion becomes a number between 0 and 299; and then 1 is added to ensure the integer is now between 1 and 300.

Afterwards we apply Math.float() to round that random number to the integer portion of the number. The answer I've linked to, above, explains it far more completely.

References:

JavaScript:
Stack Overflow:
- Generating random whole numbers in JavaScript in a specific range?

I believe you have a bug. Since Math random() is never 1, therefore floor(anything * 299) will maximum get you 298 + 1 = 299. — luanped, Dec 03 '15 at 20:02
Sorry if this is irrelevant.. but just offering another 'look' at it (still es6) `Array.from(Array(200)).map(()=>Math.floor(Math.random()*300))` this avoids 'new' and is a little more compact while maintaining readability. A good answer regardless. — rlemon, Dec 03 '15 at 20:13
What variable would I use if I wanted to display the data array? And can I just output it with
? — Jeff S, Dec 12 '15 at 00:25

Dimitar Christoff · Accepted Answer · 2015-12-04T16:33:33.730

0

with an elegant one-liner:

var data = Array.apply(null, Array(200)).map(function(){ 
    return Math.floor(Math.random() * 299) + 1;
});

the above will work with the sparse / falsy val els in the array.

edited Dec 04 '15 at 16:33

answered Dec 04 '15 at 16:20

Dimitar Christoff

26,147
8
50
69

Heart Rate Monitor

3 Answers3