Placing images in draw loop (slows browser down)

brig

Hi there. In the p5 examples, I see images loaded in setup() and then drawn in draw(). However, when I draw four or so images in the draw() loop, the browser gets jerky/slow on browser window resize. I can fix this problem by calling noLoop() in setup, but that creates a whole host of other issues and workarounds (like trying to determine the value on change of a p5 slider).

I suppose my question is: are images really supposed to be drawn in draw()? Seems like drawing the image over and over again in this loop isn't the best use of resources - as evidenced by the slowdown on resize.

Maybe I'm missing a paradigm? I'm a newbie - so would be happy to hear how I'm supposed to be thinking about this. It just seems a little strange to put image(img, 0, 0) in the draw loop, when i know it's not going to change - unless there's a given user event. Know what I mean?

GoToLoop

• We can control draw()'s FPS w/ frameRate():
  http://p5js.org/reference/#/p5/frameRate
• The other option is simply place noLoop() within setup() in order to turn off draw()'s auto-calls:
  http://p5js.org/reference/#/p5/noLoop
• Then issue redraw() in order to refresh the canvas in a controlled event-based manner:
  http://p5js.org/reference/#/p5/redraw

blindfish

Are you using large images? What is their purpose in the context of your sketch? It may be that adding them by other means (e.g. CSS background) resolves the issues you're having...

brig

Thanks for the tips. The purpose of the images is to create a swarm of creatures. So, I think I can't really put them outside of the draw loop. But think I'm clear on the concepts now. Actually, one thing that really helped to speed things up (on mobile in particular), was to set some viewport configs, as follows: meta name="viewport" content="initial-scale=1"

(sorry, can't paste in the entire meta tag as it's being filtered out... even using markdown. anyhow, that's a standard meta tag)