Low Frame Rates and Slow Loading times in P5js

I have been making sketches lately that use low frame rates. Usually, you set your frame rate in the setup function, as it is generally a static value. When you do this with a particularly low framerate, it creates a noticeable delay before loading the sketch. Refresh the page to see an example below.

Slow loading code

function setup() {
  createCanvas(400, 400);
  frameRate(0.5);
}

function draw() {
  background(50);
  fill(random(50,200), random(50,200), random(50,200));
  noStroke();
  square(100, 100, 200);
}

To solve this problem, use a reasonably quick framerate in the setup (30fps). Then set the framerate down to the desired rate (0.5fps) in the draw function. Refresh again to see a faster load.

Fast loading code

function setup() {
  createCanvas(400, 400);
  frameRate(30);
}

function draw() {
  frameRate(0.5);
  background(50);
  fill(random(50,200), random(50,200), random(50,200));
  noStroke();
  square(100, 100, 200);
}