p5.js how to freeze canvas?

Question

I try to do something like that :

function setup() {
  createCanvas(500, 250);
  //frameRate(1);
}

function draw() {
  background(50, 50, 150);
  
  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i*15, 0, 10, random(30, 120));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

But i want to "freeze" this canvas, so if i load the page i will have 30 rect() at a random height between 30 and 120.

Nenad Vracar · Accepted Answer · 2018-04-06T09:58:18.423

One option would be to use noLoop() method inside setup function that will stop draw method loop.

function setup() {
  createCanvas(500, 250);
  noLoop()
}

function draw() {
  background(50, 50, 150);

  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i * 15, 0, 10, random(30, 120));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

Note that with using noLoop and loop methods, you can toggle draw loop on some event for example mousePressed like this.

let stop = true;

function setup() {
  const canvas = createCanvas(500, 250);
  if(stop) noLoop();
  canvas.mousePressed(function() {
    stop = !stop;
    stop ? noLoop() : loop()
  })
}

function draw() {
  background(50, 50, 150);

  translate(10, 10);
  for (let i = 0; i < 30; i++) {
    rect(i * 15, 0, 10, random(30, 120));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

Other option is to create bars array once in setup function and then show them with draw method. This way you don't have to stop draw loop.

const bars = []
class Bar {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  show() {
    rect(this.x, this.y, this.w, this.h);
  }
}

function setup() {
  createCanvas(500, 250);
  for (let i = 0; i < 30; i++) {
    bars.push(new Bar(i * 15, 0, 10, random(30, 120)))
  }
}

function draw() {
  background(50, 50, 150);
  translate(10, 10);
  bars.forEach(bar => bar.show())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

You're welcome, note that you can also toggle loop like this https://jsfiddle.net/tvj04wym/7/ — Nenad Vracar, Apr 06 '18 at 09:59
Nice answer. A third option would be to use the `createGraphics()` function to create a buffer, and draw to that once. — Kevin Workman, Apr 06 '18 at 15:53

dinoDonga · Answer 2 · 2021-12-01T01:48:02.120

3

Since i was looking for a way to simply freeze the canvas and this post was the first that came up i thought i leave the solution here.

you could use this with an extra incrementor for the number of rectangles which then triggers noLoop()

From the p5 docs

freezing the canvas by holding down any mouse button

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

edited Dec 01 '21 at 01:48

answered Dec 01 '21 at 01:25

dinoDonga

31
1
3

score -1 · Answer 3 · answered Apr 06 '18 at 09:47

A solution would be to set another draw function which is empty. I don't know exactly how p5 works, perhaps they clear the canvas anyways. But here is a possible solution:

function draw() {
    //drawing stuff
}

function freezeCanvas() {
    draw = function(){}
}

p5.js how to freeze canvas?

3 Answers3