**Creating a Dynamic Graph on Javascript**

So I'm trying to calculate the value of pi (using the Monte Carlo method) and plot a live graph next to the simulation. However, due to a finite number of pixels, my graph would go off of the screen, for which I would have to scroll horizontally.

Thus, I made an array that keeps the most recent 600 values (y-coordinates). However, I am struggling to display just these newest 600 values on a set of the same non-changing 600 x-coordinates, to create a graph where only the most recent 600 values are shown, and the entire graph seems to shift leftwards when a new data point is added.

Here is my code:

` var circleX; var circleY; var r; var inCircle = 0; var inSquare = 0; var pi = []; function setup() { createCanvas(1280, 500); background(100); frameRate(50); line(0, 360, 360, 360); line(360, 0, 360, 360); line(600, 300, 1200, 300); // x = 3.14 line(600, 345, 1200, 345); // x = 3 line(600, 25, 1200, 25); // x = 4 } function draw() { stroke(255); fill(100); ellipse(180, 180, 360, 360); circleX = random(360); circleY = random(360); ellipse(circleX, circleY, 10, 10); r = (circleX-180)*(circleX-180) + (180-circleY)*(180-circleY); if (r < 32400) { inCircle = inCircle + 1; } else { inSquare = inSquare + 1; } if (inSquare == 0.0) { print("Calculating "); } else { ratio = inCircle / inSquare; yValue = map(ratio, 0, 6, 400, 10) pi.push(yValue); if (pi.length > 600) { pi.splice(0,1); } for (var i = 0; i < 600; i++) { ellipse(600 + i, pi[i], 1, 1) // if (i == 600) { // // i = i - 1; // // } } } } `

Any help will be greatly appreciated, thanks in advance.

Submitted February 18, 2017 at 10:00PM by arjundupa

via reddit http://ift.tt/2kTUy0M