### Author:  [@silphonix](https://discourse.processing.org/u/silphonix)
#### Post date: [June 29, 2021, 5:58am UTC](https://discourse.processing.org/t/background-images-in-draw-slows-operation-in-setup-leaves-trail-also-z-index-question/30955/1 "2021-06-29T05:58:10Z")
Hi, I’m trying to make a representation of frogs jumping out of water.
This is my code:
```auto
ArrayList frog = new ArrayList();
PImage pataIzq, pataDer,cuerpo;
PImage bgBackline, bgBluerose, bgFloaters, bgGrassnotop, bgGrasstop,
bgLotus, bgMushroom, bgPinkrose, bgSoil, bgStones, bgSwamp, bgTrees,
bgTrunk, bgYellowrose;
boolean runOnce = true;
BackwardBg bbg;
AfterwardBg abg;
void setup() {
size(1200, 600);
pataIzq = loadImage("pata-izq.png");
pataDer = loadImage("pata-der.png");
cuerpo = loadImage("cuerpo2.png");
bbg = new BackwardBg();
abg = new AfterwardBg();
addFrogs();
}
void draw() {
bbg.display();
abg.display();
translate(width>>1, height>>1);
scale(0.7);
for (Frogs I : frog) {
I.show();
I.move();
}
}
class Frogs {
float theta=0f, x, y, l=200f, angle, dx;
boolean forward=false;
int xl=26, yl=16, speed;
Frogs() {
speed=int(random(6, 10));
angle = random(-PI, PI);
dx=random(-20, 20);
y=0;
}
void show() {
pushMatrix();
rotate(angle);
translate(x+dx, y);
//stroke(255, 0, 0);
//line(0, 0, -ylsin(radians(theta)), 0);
//------LEFT WING-----------
pushMatrix();
rotate(radians(theta+30));
image(pataIzq, 0, yl);
popMatrix();
//-------RIGHT WING------------
pushMatrix();
rotate(PI-radians(theta+30));
image(pataDer, 0, yl);
popMatrix();
//-------TUMMY-----------
imageMode(CENTER);
rotate(radians(90));
image(cuerpo, 0, 0);
//--------------------
popMatrix();
}
void move() {
l=ylsin(radians(5));
if (!forward) {
x+=l;
theta+=speed-2;
} else {
theta-=1;
if (theta<0)forward=false;
}
if (theta>50) {
forward=true;
}
}
}
void mousePressed() {
addFrogs();
}
void addFrogs() {
for (int i=0; i<8; i++) {
Frogs I = new Frogs();
frog.add(I);
}
}
```
```auto
class AfterwardBg {
PImage bgGrassnotop, bgGrasstop, bgTrees, bgMushrooms, bgStones,
bgBlackline;
void display () {
bgGrassnotop = loadImage("bg-grassnotop.png");
bgGrasstop = loadImage("bg-grasstop.png");
bgTrees = loadImage("bg-trees.png");
bgMushrooms = loadImage("bg-mushroom.png");
bgStones = loadImage("bg-stones.png");
bgBlackline = loadImage("bg-blackline.png");
imageMode(CENTER);
image(bgGrassnotop, 600, 300);
image(bgGrasstop, 600, 300);
image(bgTrees, 600, 300);
image(bgMushrooms, 600, 300);
image(bgStones, 600, 300);
image(bgBlackline, 600, 300);
}
}
```
```auto
class BackwardBg {
PImage bgBluerose, bgFloaters, bgLotus, bgPinkrose, bgSoil,
bgStones, bgSwamp, bgYellowrose;
void display () {
bgBluerose = loadImage("bg-bluerose.png");
bgFloaters = loadImage("bg-floaters.png");
bgLotus = loadImage("bg-lotus.png");
bgPinkrose = loadImage("bg-pinkrose.png");
bgSoil = loadImage("bg-soil.png");
bgStones = loadImage("bg-stones.png");
bgSwamp = loadImage("bg-swamp.png");
bgYellowrose = loadImage("bg-yellowrose.png");
imageMode(CENTER);
image(bgBluerose, 600, 300);
image(bgFloaters, 600, 300);
image(bgLotus, 600, 300);
image(bgPinkrose, 600, 300);
image(bgSoil, 600, 300);
image(bgStones, 600, 300);
image(bgSwamp, 600, 300);
image(bgYellowrose, 600, 300);
}
}
```
I have a few problems here.
If I call the display functions inside the setup, it loads fast but when the frog moves they leave a trail of frames behind. In contrary, if I call the functions inside draw, i don’t have that problem, but it’s like 1 fps / minute… and surely it happens because it’s calling the loadImage functions a lot of times.
To clarify, I need to import all elements separately because I need to make a custom handler to use color picker with each one of them separately.
Question: Is there any way to bypass this ? what would be the best option here ?
Question 2: Is there any way to place a z-index in images here ? The frogs while moving pass on top of the images that should have upper z-index.
Something like:
BackwardBG = z-index: 0;
Frogs = z-index: 1;
AfterwardBG = z-index: 2;
Thanks a lot for reading this extensive block.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 29, 2021, 6:29am UTC](https://discourse.processing.org/t/background-images-in-draw-slows-operation-in-setup-leaves-trail-also-z-index-question/30955/2 "2021-06-29T06:29:23Z")
Don’t load images in display ()
Load them in the constructor of the class
---
### Author:  [@silphonix](https://discourse.processing.org/u/silphonix)
#### Post date: [June 29, 2021, 7:02am UTC](https://discourse.processing.org/t/background-images-in-draw-slows-operation-in-setup-leaves-trail-also-z-index-question/30955/3 "2021-06-29T07:02:38Z")
Okay, thanks I will research how to do that 🙂 !
Edit: Hi, I made this but still have the exact same problem, it’s something wrong ?
```auto
PImage[] bbgAssets = new PImage[8];
BackwardBg[] bbg = new BackwardBg[8];
boolean runOnce = true;
AfterwardBg abg;
FrogSystem fgs;
void setup() {
size(1200, 600);
abg = new AfterwardBg();
fgs = new FrogSystem();
fgs.addFrogs();
for(int i = 0; i < bbgAssets.length; i++){
bbgAssets[i] = loadImage("bbg-"+i+".png");
bbg[i] = new BackwardBg(bbgAssets[i]);
}
abg.display();
}
void draw() {
for(int i = 0; i < bbg.length; i++){
bbg[i].display();
}
fgs.render();
}
void mousePressed() {
fgs.addFrogs();
}
```
```auto
class BackwardBg {
PImage img;
BackwardBg(PImage tempImg){
img = tempImg;
}
void display () {
imageMode(CENTER);
image(img, 600, 300);
}
}
```
If I have the bbg.display on draw, it’s slow as a turtle and also the images are bottom right aligned, if its on setup the frogs leave the frame trail behind while moving 😕
One thing to mention, is that, the problem is not solved, but the code feels a lot cleaner. So ty 🙂
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 29, 2021, 7:51am UTC](https://discourse.processing.org/t/background-images-in-draw-slows-operation-in-setup-leaves-trail-also-z-index-question/30955/4 "2021-06-29T07:51:18Z")
Going back to the original code you posted
> [@Chrisir](#):
>
> Load them in the constructor of the class
This is how you would do that
```auto
class AfterwardBg {
PImage bgGrassnotop, bgGrasstop, bgTrees, bgMushrooms, bgStones,
bgBlackline;
AfterwardBg() { // constructor named after class and no return type
bgGrassnotop = loadImage("bg-grassnotop.png");
bgGrasstop = loadImage("bg-grasstop.png");
bgTrees = loadImage("bg-trees.png");
bgMushrooms = loadImage("bg-mushroom.png");
bgStones = loadImage("bg-stones.png");
bgBlackline = loadImage("bg-blackline.png");
}
void display () {
imageMode(CENTER);
image(bgGrassnotop, 600, 300);
image(bgGrasstop, 600, 300);
image(bgTrees, 600, 300);
image(bgMushrooms, 600, 300);
image(bgStones, 600, 300);
image(bgBlackline, 600, 300);
}
}
```
> [@silphonix](#):
>
> but when the frog moves they leave a trail of frames behind.
This is because you are not clearing the display between frames which is essential for most animations.
```auto
void draw() {
background(0); // clear display to black
bbg.display();
abg.display();
translate(width>>1, height>>1);
scale(0.7);
for (Frogs I : frog) {
I.show();
I.move();
}
}
```
---
### Author:  [@silphonix](https://discourse.processing.org/u/silphonix)
#### Post date: [June 29, 2021, 8:10am UTC](https://discourse.processing.org/t/background-images-in-draw-slows-operation-in-setup-leaves-trail-also-z-index-question/30955/5 "2021-06-29T08:10:34Z")
@quark the background(0) did the trick 🙂 ! thanks a lot
One more question, do you have any idea how to make the z-index problem? I tried changing the order of the calls, and it works, but makes the frogs really slow and also the frame gets bottom right aligned :c
bbg.display();
abg.display();
fgs.render();
Works like a charm, but the frogs jump on top of assets
bbg.display();
fgs.render();
abg.display();
Frogs can’t jump over assets, but the abg.display is weirdly rendered and also frogs are slow, i understand the problem is that the render of the assets have to wait until the frogs jump and is an asyncronism problem, so i thought if i could apply z-index to the assets that would do the trick :c