How to simple make layers ? translate(0,0,LAYER); ??

GeorgeJava

can you help me ? simple layers... :)

Chrisir

;-)

Chrisir

You really nee to learn to write longer text to ask a question.

This is important in real life and here in the forum.

Follow at least these steps:

• Do you work in 2D or 3D? Meaning : size (800,800), or size (800,800,P3D);
• What is your context, what do you want to achieve?
• What is your goal?
• What is your plan to reach this goal? This plan has steps a,b,c,d...
• At which step does your problem occur, a or b or c....?
• What have you tried?
• What happened (falsely) and what did you want to happen (correctly)?
• Show your code

Chrisir

jeremydouglass

Some approaches to layers:

1. Layers on the sketch surface, by ordering draw statements in draw()
2. Layers with 3D -- by ordering z-depth of objects drawn in 3d space with P3D renderer
3. Layers with arrays -- drawing data is managed with arrays / arrayLists, and draw loops through the array order to draw
4. Layers drawing surfaces -- PGraphics
5. PGraphics arrays, arraylists, or contained in classes

There are many ways to do layers. Some are very simple, some are very complex. It depends on what you want to do.

GeorgeJava

like this ? :D

PGraphics[] layers = new PGraphics[5];
void setup() {
  size(500, 500);
  for (int i = 0; i < layers.length; i++) {
    layers[i] = createGraphics(width, height);
  }
}
void draw(){
  background(255);
  for (int i = 0; i < layers.length; i++) {
    layers[i].beginDraw();
  }
  layers[1].noStroke();
  layers[2].fill(0,125,125);
  layers[1].fill(125,125,125);
  layers[2].ellipse(55,55,55,55);
  layers[1].ellipse(55,55,150,55);
  for (int i = 0; i < layers.length; i++) {
    layers[i].endDraw();
    image(layers[i],0,0);
  }
}

Chrisir

well, a lot of this can go into setup() - I fixed that

counting starts with 0 not with 1 (so why 1 in line 13 above) - I didn't fix that

PGraphics[] layers = new PGraphics[5];
float[] offsetX =  new float[5];

void setup() {

  size(500, 500);

  for (int i = 0; i < layers.length; i++) {
    layers[i] = createGraphics(width, height);
    layers[i].beginDraw();
  }
  layers[1].noStroke();
  layers[2].fill(0, 125, 125);
  layers[1].fill(125, 125, 125);
  layers[2].ellipse(55, 55, 55, 55);
  layers[1].ellipse(55, 55, 150, 55);

  for (int i = 0; i < layers.length; i++) {
    layers[i].endDraw();
  }
  //
}

void draw() {
  background(255);

  for (int i = 0; i < layers.length; i++) {
    image(layers[i], offsetX[i], 0);
  }

  offsetX[2] += 1;
}
//

jeremydouglass

Good job!

That works -- although you probably don't need to redraw all your layers 30 times a second. Keep in mind that you can also translate layers either using image() offsets or with layer[i].translate().

However, note that an offset or translated PGraphics is still just a pre-rendered image -- if you drew things off the edge of the PGraphics, they won't become visible if you move it around.

Here are demonstrations of some of these concepts -- drawing once, and moving pre-drawn images.

This gets even easier if you use classes instead of arrays.

PGraphics[] layers = new PGraphics[5];
PVector[] off = new PVector[5];
int xdir = 1;

void setup() {
  size(200, 200);
  for (int i = 0; i < off.length; i++) {
    off[i] = new PVector(0,0);
  }
  for (int i = 0; i < layers.length; i++) {
    layers[i] = createGraphics(width, height);
  }
  layerSetup();
}
void draw(){
  background(255);
  for (int i = 0; i < layers.length; i++) {
    image(layers[i],off[i].x,0);
  }
  off[1].x = off[1].x + xdir;
  off[2].x = off[2].x + xdir;
  if(off[2].x > width || off[2].x < 0){
    xdir *= -1;
  }
}

void layerSetup(){
  layers[0].beginDraw();
  layers[0].fill(0);
  layers[0].rect(0,0,width/2,height);
  layers[0].endDraw();
  layerEllipse(layers[1], 55, 55,150, 55, color(125,125,125));
  layerEllipse(layers[2], 55, 55, 55, 55, color(  0,125,125));
}

void layerEllipse(PGraphics pg, float a, float b, float c, float d, color col){
  pg.beginDraw();
  pg.fill(c);
  pg.ellipse(a,b,c,d);
  pg.endDraw();
}