PGraphics Class Array as One

bourdonprince

Hi. In the following code I have a class array that creates separate lines on a shape. I use a PGraphics to return from each class. How do I combine all PGraphics returned from all classes into one?

//Locations of points - start/end
int[] locationX = {
  -106, -53, 53, 106
};
int[] locationY = {
  -92, 0, 92
};

//Create a class of 10 objects - 10 different lines
Lines[] lines = new Lines[10];
PGraphics pgLines;

void setup() {
  size(225, 195);
  smooth();
  strokeWeight(3);

  //Initialize the object with different parameters - point, speed, color
  for (int i=0; i<10; i++) { 
    lines[i] = new Lines((int)random(6), random(0.0001, 0.01), (int)random(8));
  }
}

void draw() {
  background(0);

  //draw the lines
  for (int i=0; i<lines.length; i++) {
    image(lines[i].drawLines(), 0, 0);
  }
}

class Lines {
  PVector point1, point2, point3, point4, point5, point6;
  PGraphics drawLinesPG;

  int currentPoint, numPoints = 6;
  float interpolation = 0.01;
  float speed = 0.01;
  PVector[] points = new PVector[6];
  int pointNum = 0;

  color[] col_light = {
    #FCFF00, #FDD200, #F9AF00, #FFEB11, #FED90A, #FFBC01, #FFFF37, #F9A000
  };
  color colSel_light;

  Lines(int tempPoints, float tempSpeed, int tempColSel) {
    //Vectors with stored locations of the 6 points
    point1 = new PVector(locationX[0], locationY[1]);
    point2 = new PVector(locationX[1], locationY[0]);
    point3 = new PVector(locationX[2], locationY[0]);
    point4 = new PVector(locationX[3], locationY[1]);
    point5 = new PVector(locationX[2], locationY[2]);
    point6 = new PVector(locationX[1], locationY[2]);


    speed = tempSpeed;
    pointNum = tempPoints;

    colSel_light = col_light[tempColSel];

    points[0] = point1;
    points[1] = point2;
    points[2] = point3;
    points[3] = point4;
    points[4] = point5;
    points[5] = point6;

    //PGraphics object to store the graphics on screen
    drawLinesPG = createGraphics (225, 195);
  }

  void setupLines() {
  }

  PGraphics drawLines() {
    drawLinesPG.beginDraw();
    drawLinesPG.noStroke();
    drawLinesPG.fill(0, 10);
    drawLinesPG.rect(0, 0, width, height);

    drawLinesPG.pushMatrix();
    drawLinesPG.translate(225/2, 195/2);

    drawLinesPG.stroke(colSel_light);
    interpolation += speed;
    if (interpolation > 1) {
      interpolation = 0;
      //currentPoint = ++currentPoint % numPoints;
      currentPoint = (int) random(numPoints);
      //println(currentPoint);
    }
    PVector s = points[currentPoint];
    PVector e = points[(currentPoint+pointNum) % numPoints];
    //PVector e = points[(int)random(numPoints)];
    boolean secondHalf = interpolation > 0.5;
    float interpolatedSE = interpolation * 2;

    if (secondHalf) interpolatedSE -= 1;
    PVector i = PVector.lerp(s, e, interpolatedSE);

    if (secondHalf) drawLinesPG.line(i.x, i.y, e.x, e.y);
    else drawLinesPG.line(s.x, s.y, i.x, i.y);
    drawLinesPG.popMatrix();
    drawLinesPG.endDraw();
    return drawLinesPG;
  }
}

PhiLho

Draw them all on another PGraphic. They are transparent by default.

Also, I miss the interest of having all these point intermediary variables instead of storing the values directly into the array.

bourdonprince

Thanks for the suggestion. When you say to draw them on another PGraphic, what exactly do you mean? 1) To take the class' returned PGraphic and instead of displaying them in the draw() loop function, to store them in one PGraphic? 2) To take all vector values from the class and create another array outside the class that it will create PGraphic objects with different parameters?

colouredmirrorball

You can use the image() method in a PGraphics to draw another PGraphics.

PGraphics a = createGraphics(100,100);
PGraphics b = createGraphics(100,100);

//Draw something on a and b here

a.beginDraw();
a.image(b, 0, 0);
a.endDraw();

a is now the mix of a and b.

bourdonprince

So, now I am doing the following, but I can't erase the background from each PGraphics layer. How can it be possible? If I erase it from each class instance, the layer from the back cannot be drawn as the rect fills the screen.

void draw() {
  background(0);
  pgLines.beginDraw();
  pgLines.noStroke();
  pgLines.fill(0, 10);
  pgLines.rect(0, 0, width, height);
  pgLines.image(lines[0].drawLines(), 0, 0);
  pgLines.image(lines[1].drawLines(), 0, 0);
  pgLines.image(lines[2].drawLines(), 0, 0);
  pgLines.image(lines[3].drawLines(), 0, 0);
  pgLines.image(lines[4].drawLines(), 0, 0);
  pgLines.image(lines[5].drawLines(), 0, 0);
  pgLines.image(lines[6].drawLines(), 0, 0);
  pgLines.image(lines[7].drawLines(), 0, 0);
  pgLines.image(lines[8].drawLines(), 0, 0);
  pgLines.image(lines[9].drawLines(), 0, 0);
  pgLines.endDraw();
  image(pgLines, 0, 0);
}

bourdonprince

Or if I do the following, I can't fade the line using fill(0,10) and rect(0,0,width, height).

  for (int i=0; i<lines.length; i++) {
    //image(lines[i].drawLines(), 0, 0);
    pgLines[i].beginDraw();
    //pgLines[i].noStroke();
    //pgLines[i].fill(0, 10);
    //pgLines[i].rect(0, 0, width, height);
    pgLines[i].image(lines[i].drawLines(), 0, 0);
    pgLines[i].endDraw();
    image(pgLines[i], 0, 0);
  }
}

PhiLho

If you add a background to your PGraphic, it will loose its transparency, and will be harder to merge... Perhaps see if blend() can fix that.

quark

a.beginDraw();
a.background(255,0);
// drawing stuff
a.endDraw();

Try this it should clear the background with transparent white. Then do the drawing after that

PhiLho

Or use clear()...

quark

I think clear() does transparent black in which case you can get different results so try both.

bourdonprince

I used the drawLinesPG.background(255, 0); inside the class, and then in draw I used the PGraphics object to draw everything there!

Best forum ever! :-)