Selective draw iterations

edited October 2017 in How To...

Hi, I would like to be able to select what part of my code gets iterated over by draw(). I need one part to be drawn only once and another to be drawn continuously. Is there a way to selectively apply noLoop() and loop() to parts of our code?

To be specific, I'm making a 2d game with fractal background and I want that background to be drawn once without my other objects leaving a trail behind. I can't have the background change every now and then. Also, some of my objects are player controlled so continuous draw is required.

Any tips/solutions are welcome, ty.



  • edited October 2017 Answer ✓

    Look at PGraphics

    It’s an internal image that you can draw your background on in setup() and then use with background () in draw()

    You can create the PGraphics with same size as your screen / window OR if you want a side scroller (jump and run game) much wider than your screen. Or if you have a vertical scroller (eg a space ship flying through a meteor field) much higher than the screen

  • You can also place your PGraphics pg with image(pg) if it is not the same size as the the sketch canvas.

  • Thanks Chrisir and jeremy, this looks promising. I've looked here : and couldnt find an answer to this :

    What if my fractal (or any other form) is made with a function (drawMountain() for example), can I call this after pg.beginDraw(); to make it part of pg (say in setup()) ? Or am I limited to Processing's functions like line, rect, etc. ? When I write pg.drawMountain();, its not recognized.

  • Answer ✓

    yeah, you have to go inside function drawMountain() and change each command to pg.line() etc. I am afraid

    Alternatively: you could also just draw the image in sketch B, store it and then load and display it in sketch B (where B is the sketch with the animation)

  • Yes I had done that, saving moutains and removing background in photoshop but I've been trying to avoid loading images as I'm getting solid lag (in fullscreen) with the player-relative parallax effect I've implemented but I guess there's no workaround right now in Processing 3. Thanks for clearing this up.

  • The lag should not be big

    you have to use loadImage, resize only in setup

    Also avoid using image() with 5 parameters, very slow (it’s resize on the fly); use only 3 parameters please

  • If you have side scrolling (like in a jump and run) the height is fixed but the image can be much much wider (width) than the screen

  • edited October 2017

    Yes, I load and resize background in setup(). Then in draw(), I call a parallax function which takes in an image (the background), a position vector and my hero speed. I've been getting big lag since I've done that. The parallax effect is only in X and my background image reappears left and right when player moves. I have to add that lag disappears when I run my program in 960x540.

  • This is way over my head

    Somehow I just have the gut feeling that it should run faster regarding images

    Maybe the algorithm is slow - or you show the relevant passage of your code

  • The image reappeared left and right.... how?

  • edited October 2017

    Ok thanks for your help Chrisir. I will try to make a very large PGraphic and see if it helps the scrolling speed.

  • I have created a new discussion on this lag with a MCVE of the relevant parts. Here :

Sign In or Register to comment.