slow array

Hey guys,

So I am writing a code that puts the values of the X and Y location of the mouse in array and then uses those values to draw a stroke (curve), but what happens is that after a few moments the program becomes really slow and the values aren't stored properly in the array anymore. I know this is because the array is becoming to big because is said for(...) { draw this curve} but is there anyone who could help me out on how I could solve this?

Thank you in advance, here is the `code;`

`// the two arrays that store the values of the position of the mouse
mouseposx = [];
mouseposy = [];

function setup() {
createCanvas(600, 600);

}

function draw() {
background(0);

//make var for array that puts all values in array
for (var i = mouseposx.length ; i >= 0; i--) {

//if the mouse is stopped do not put new values in array
if (mouseX !== pmouseX && mouseY !== pmouseY) {

//put values of the position of the mouse in the array
mouseposx.push(mouseX);
mouseposy.push(mouseY);

}

// draw the curve of where the mouse has been
noFill();
stroke(255);
curve(mouseposx[i], mouseposy[i], mouseposx[i + 1], mouseposy[i + 1], mouseposx[i + 2], mouseposy[i + 2], mouseposx[i + 3], mouseposy[i + 3] );

}

}`

Start with the inline setup() and draw() example, especially the mouseposx and mouseposy arrays and the loop around curve(). Reproduce the slowdown while drawing, then determine what change prevents the arrays or drawing loop from growing without bound while preserving the mouse stroke.

Written by the indexing model from the issue text.