⏸️ Loop Control

Pause and resume the draw() loop. Useful for turn-based games, menus, or when you only want to redraw on user input.

noLoop

Stops the draw() function from running repeatedly. The canvas stays visible with whatever was last drawn. Useful for turn-based games or static drawings.

Tip: After noLoop(), draw() has already run once, so your canvas shows something. Call loop() to start it again.

let score = 0;

function setup() {
  size(400, 200);
}

function draw() {
  background("midnightblue");
  fill("white");
  textSize(24);
  textAlign("center");
  text("Score: " + score, 200, 50);
  textSize(14);
  text("Press SPACE to score, N to stop, L to resume", 200, 120);
}

function keyPressed() {
  if (key === " ") score++;
  if (key === "n") noLoop();
  if (key === "l") loop();
}

loop

Restarts the draw() loop after it was stopped with noLoop(). draw() will run ~60 times per second again.

Tip: Use noLoop() and loop() to make a pause button for your game!

let paused = false;

function setup() {
  size(400, 200);
}

function draw() {
  background("midnightblue");
  fill("gold");
  noStroke();
  circle(200 + Math.sin(frameCount * 0.05) * 100, 100, 20);

  fill("white");
  textSize(14);
  text("Press SPACE to pause/unpause", 80, 170);
}

function keyPressed() {
  if (key === " ") {
    paused = !paused;
    if (paused) {
      noLoop();
    } else {
      loop();
    }
  }
}