P5JS editor very slow in projects ~100 lines

p5.js
1

The P5JS editor is very laggy when it has to handle projects around 100 lines of code. And by “very”, I mean that the editor takes around a minute to run the code, and typing a character takes a few seconds for the character to appear in the editor.

My code so far is 95 lines, if you were wondering.

2

Hi,

Are you using the online p5js web editor or the Processing IDE (desktop code editor) with p5js mode?

Also which browser and operating system are you running on? Which CPU?

Because 100 lines of code is not heavy for a source file :wink:

3

I am using the online p5js web editor. And:

  • Browser: Brave
  • OS: Windows 10
  • Processor: Intel i3 7th generation
  • SPeed: 2.3g Hz
1 Like
4

I’m not sure if this is due to the editor or the code you are running. Do you mind sharing your sketch?

1 Like
5

Sure!

const segmentSize = 3;
let cells;

class Organism {
  constructor(column, row) {
    this.column = column * segmentSize;
    this.row = row * segmentSize;
    this.status = true;
    
    this.activate();
  }

  
  deactivate() {
    this.status = false;
    
    fill(0);
    
    quad(
      this.column - segmentSize, this.row - segmentSize,
      this.column              , this.row - segmentSize,
      this.column              , this.row              ,
      this.column - segmentSize, this.row
    );
  }
  
  activate() {
    this.status = true;
    
    fill(255);
    
    quad(
      this.column - segmentSize, this.row - segmentSize,
      this.column              , this.row - segmentSize,
      this.column              , this.row              ,
      this.column - segmentSize, this.row
    );
  }
}


function grid() {
  for (let i = segmentSize; i < width + segmentSize; i += segmentSize) {
    for (let j = segmentSize; j < height + segmentSize; j+= segmentSize) {
      fill(0);
      quad(
        i - segmentSize, j - segmentSize,
        i              , j - segmentSize,
        i              , j              ,
        i - segmentSize, j
      );
    }
  }
}

function setup() {
  createCanvas(300, 300);
  background(0);
  fill(0)
  stroke(200, 255, 255);
  strokeWeight(1);
  frameRate(5);
  cells = new Array(width / segmentSize);

  for (let i = 0; i < cells.length; i += 1) {
    cells[i] = new Array(height / segmentSize);
  }

}

function draw() {
  grid();
  
  for (let i = 1; i <= (width / segmentSize); i += 1) {
    for (let j = 1; j <= (height / segmentSize); j += 1) {
      cells[i - 1][j - 1] = new Organism(i, j);
    }
  }
  
  for (let i = 0; i < cells.length; i += 1) {
    for (let j = 0; j < i.length; j += 1) {
      let organism = cells[i][j];
      
      let countOfNeighbours = 0;
      
      for (let k = -1; k < 2; k += 1) {
        for (let l = -1; l < 2; l += 1) {
          if ((k === 1) && (l === 1)) {
            continue;
          }
          
          let neighbour = cells[i + k][j + l];
          
          if (neighbour.status) {
            countOfNeighbours += 1;
          }
        }
      }
      
      if ((countOfNeighbours === 2) || (countOfNeighbours === 3)) {
        organism.deactivate();
      }
      else {
        organism.deactivate();
      }
    }
  }
}
6

thanks, I think the problem is not editor in itself but the code is lagging. You have a lot of loops that slows down the process. I tried adding

  console.log(frameRate())

to the draw function and set frameRate in setup to default 60. On my computer the result is around 4, which means it’s drawing 4 times per second although it was trying to draw at 60 because of the complexity of the code.

You have multiple directions from here - one is to accept it and every time you run a sketch, make sure to stop it (the stop button or ctrl+shift+enter) so the editor runs smoothly. Another direction is to optimize the code to make it run faster, but it requires a lot of work and I’m not even sure if this sketch can be optimized. One last suggestion may be to make the grid smaller (canvas size at 99x99 for example) while debugging to reduce the complexity, and once you are happy with the code you can try it at the original resolution (300x300).

1 Like
7

Thank you! But do you have any idea why is the code so slow? Shouldn’t a computer be able to handle loops efficiently?

8

it depends. it may handle a loop for 1000 times efficiently but it doesn’t mean it can also handle a loop with 1000000 times or 1000000000 times :slight_smile:

I looked at your code and I guess you want to create a game of life, don’t you? If so, there are a couple of problems. The cells should be initialized in the setup function and not in draw. Also you need a “buffer” to save the last state. Dan made a great tutorial so it would be helpful:

3 Likes