I've created a project on Khan Academy as part of the Natural Simulations course on random walks.This project is in JavaScript, using the Processing.JS library, slightly modified by Khan Academy.(In the main, the inclusion of the Processing.JS library offers a few functions for drawing on a canvas. The majority of my project would be perfectly intelligible to someone who knew JavaScript but not about Processing.JS).The code is as follows:var Walker = function(colour, x, y) {    this.radius = 10;    this.x = x || width/2; // 'width' and 'height' refer to the size of the canvas    this.y = y || height/2;    this.r = (colour[0] === 0)? true: colour[0] || random(0, 255);    this.g = (colour[1] === 0)? true: colour[1] || random(0, 255);    this.b = (colour[2] === 0)? true: colour[2] || random(0, 255);    return this;};// Randomly move up, down, left, right, or stay in one placeWalker.prototype.walk = function() {    var choice = floor(random(0, 4));    if (choice === 0 && this.x < width) {        this.x += this.radius; // move right    } else if (choice === 1 && this.x > 0) {        this.x -= this.radius; // move left    } else if (choice === 2 && this.y < height) {        this.y += this.radius; // move down    } else if (choice === 3 && this.y > 0) {        this.y -= this.radius; // move up    }    return this;};Walker.prototype.display = function() { // Processing.JS drawing stuff    noStroke(); // turn outline off    fill(this.r, this.g, this.b, 20); // fill(r, g, b, transparency);    ellipse(this.x, this.y, this.radius, this.radius); // ellipse(x-position, y-position, width, height);    return this;};var walkers = [new Walker([255, 0, 0])];draw = function() { // repeats 30 times/second. Like a for/while loop, but slower    for(var i = 0; i < walkers.length; i++) {        walkers[i].walk().display();    }};mouseClicked = function() {    walkers.push(        new Walker([], round(mouseX / walkers[0].radius) * walkers[0].radius, round(mouseY / walkers[0].radius) * walkers[0].radius));}; // ^ mouseX/mouseY refer to current position of mouse on canvasView the project on Khan Academy.I'm concerned about the performance of this code; specifically the for loop in the draw function. As the draw function repeats 30 times/second, will this mean that the loop will also repeat 30 times/second?The program gets pretty slow when there's quite a few walkers initiated. How can I make this program perform better?
Random walker using Processing.JS on Khan Academy, with new walkers generated on mouse click
javascript;performance;animation;processing.js