Background images in draw slows operation, in setup leaves trail, also z-index question

Processing Coding Questions
1

Hi, I’m trying to make a representation of frogs jumping out of water.

This is my code:

ArrayList<Frogs> 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);
  }
}

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);
  }
}

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.

2

Don’t load images in display ()

Load them in the constructor of the class

3

Okay, thanks I will research how to do that :slight_smile: !

Edit: Hi, I made this but still have the exact same problem, it’s something wrong ?

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();
}

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 :confused:

One thing to mention, is that, the problem is not solved, but the code feels a lot cleaner. So ty :slight_smile:

4

Going back to the original code you posted

This is how you would do that

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);
  }
}

This is because you are not clearing the display between frames which is essential for most animations.

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();
  }
}
2 Likes
5

@quark the background(0) did the trick :slight_smile: ! 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