Why do some functions loop, and others don't?

p5.js Beginners
1

Hi all,

I’m wondering if anyone has any insight into why some functions, will affect the next frame in the draw loop, while others won’t.

For example:

  1. the fill() function (written at the bottom of the draw loop) will affect the ellipse (written at the top of the draw loop)
function setup() {
  createCanvas(400, 400);
}

function draw() {
  ellipse(100, 100, 100, 100);
  fill(255, 0, 0);
}
  1. the translate() function (written at the bottom of the draw loop) will NOT affect the ellipse (written at the top of the draw loop)
function setup() {
  createCanvas(400, 400);
}

function draw() {
  ellipse(100, 100, 100, 100);
  translate(200, 200);
}
1 Like
2

That’s true.

The Matrix gets resetted (like with popMatrix()) at start of the draw() function

The colors get not

3

The main canvas got all of its transformation methods reset before each draw() callback iteration:

Other method groups like color stick on the main canvas for each draw():

Canvas created via createGraphics() don’t auto-reset its transformation btW:

4

Thanks everyone. Very helpful :slight_smile:

1 Like
5

Hello,

Also discussed here:
https://p5js.org/reference/#/p5/draw

:)

6

why-do-some-functions-loop-and-others-dont

I would say, why do some parameters (set by functions like fill or translate or rotate…) stay fixed when draw() begins a new cycle and others don‘t