~/piMakers/presentations/javaScript/code/random.html.html

<html>
<head></head>
<body>
<canvas id="canvas" style="border: 1px solid" width="900" height="300"></canvas>

<script>
var canvas = document.getElementById('canvas');
var ct  = canvas.getContext('2d');
var raf;
var count = 0;
var dps = []; // dataPoints
//var dpsIndex = 0;
var width = 900;
var height = 300;
var xInterval = 3;

// Fill the data array
for (let i = 0; i < 300; i++) {
    dps[i] = Math.floor(Math.random() * height);
}

// Define and draw the Graph
var graph = {
    color: 'orange',
    width: 1,

    // Draw the graph   
    draw: function() {      
        ct.strokeStyle = this.color;
        ct.lineWidth = this.width;      
        // Set the graph points
        for (let i=0; i < 300; i++){
            ct.lineTo(i*3, height - dps[i]);
        }
        ct.stroke();
        
        // remove the first element and add a new last element
        dps.shift();
        dps.push(Math.floor(Math.random() * height));   
    }
};

function draw() {
    ct.clearRect(0, 0, width, height);  
    ct.beginPath();
    ct.moveTo(0,0);

    // Execute the graph draw function
    graph.draw();

    // Redraw ...
    raf = window.requestAnimationFrame(draw);
}

// Start the animation when the mouse is over
canvas.addEventListener('mouseover', function(e) {
    raf = window.requestAnimationFrame(draw);
});

// Stop the animation when the mouse is out
canvas.addEventListener('mouseout', function(e) {
    window.cancelAnimationFrame(raf);
});
// Draw the graph
graph.draw();
</script>

</body>
</html>