How do i use a custom brush on a separate layer using PGraphics?

Darkin

Hey guys, Im trying to use PGraphics to draw on a seperate "Layer". So far I understand the concept of using PGraphics as layers, but when I try to use a custom brush I can't get it to work on the layer ABOVE. In the example code I have here, the custom brush will only draw BELOW the layer that I want. I just started learning processing this week so im sure there are a few concepts that im not getting yet :P

Thanks allot guys.

//myPGraphics2

import processing.opengl.*;

ArrayList history = new ArrayList();
float distthresh = 60;


PGraphics pg;

void setup() {
  size(200, 200, OPENGL);
  pg = createGraphics(100, 100);//size of the layer
  smooth();
  hint(ENABLE_DEPTH_SORT);
}

void draw() {

  pg.beginDraw();

  pg.background(100);//background color AKA layer color

  pg.stroke(255);
 // pg.line(10, 10, mouseX, mouseY); //position of mouse VS line
pg.hint(DISABLE_DEPTH_TEST);
  pg.hint(ENABLE_DEPTH_TEST);
  pg.endDraw();
  image(pg, 50, 50); //position of the layer

  //image(pg, 51, 30);
}


//----------------FUNCTIONS------------------//
void mouseDragged() {

  PVector d = new PVector(mouseX, mouseY, 0);
  history.add(0, d);

  for (int p=0; p<history.size (); p++) {
    PVector v = (PVector) history.get(p);
    float joinchance = p/history.size() + d.dist(v)/distthresh;
    if (joinchance < random(0.4))  line(d.x, d.y, v.x, v.y);
  }
}

void keyPressed() {
  if (key == ' ') {
    //background(255);
    history.clear();
  }
}

GoToLoop

In order to affect a PGraphics, we gotta use its reference followed by the dot . operator:
http://processing.org/reference/dot.html

Like this: pg.line(d.x, d.y, v.x, v.y);.
When everything's finished, issue: pg.endDraw();.

BtW, is there any particular reason to use OPENGL renderer in this case?
Anyways, I've done some tweaks, but no fix, to your code:

// forum.processing.org/two/discussion/7149/
// how-do-i-use-a-custom-brush-on-a-separate-layer-using-pgraphics

static final float DIST_THRESH = 60.0;
final ArrayList<PVector> history = new ArrayList();
PGraphics pg;

void setup() {
  size(200, 200, JAVA2D);
  smooth(4);

  pg = createGraphics(100, 100);
  pg.beginDraw();
  pg.smooth(4);
  pg.stroke(-1);
  pg.background(0200);
  pg.endDraw();
}

void draw() {
  image(pg, 50, 50);
}

void mouseDragged() {
  PVector d = new PVector(mouseX, mouseY);
  history.add(d);

  int p = 0, len = history.size();
  for (PVector v: history)
    if (p++/len + d.dist(v)/DIST_THRESH < random(.4))
      line(d.x, d.y, v.x, v.y);
}

void keyPressed() {
  if (key == ' ') {
    history.clear();
    pg.background(0200);
    pg.endDraw();
  }
}

Darkin

Thanks @GoToLoop, at least this gets me a step closer. No, theres no particular reason i'm using openGL, it just helps to render the brush. but if you know how to implement a simpler brush that would be much appreciated. Im just starting out so i'm just trying to build some basic functionality for what I need it to do. Which is basically using Processing to "draw over an image"

GoToLoop

I've got this example below. Perhaps it might help ya:

/** 
 * Drawing & Erasing (v2.44)
 * by  Amnon.Owed & Quadrobite (2013/Aug)
 * mod GoToLoop
 * 
 * forum.processing.org/one/topic/drawing-application-need-help
 *
 * forum.processing.org/two/discussion/598/
 * mousewheel-syntax-question-solved
 */

PGraphics canvas;
PImage bg;

int diam = 50;

void setup() {
  size(800, 600, JAVA2D);
  frameRate(50);
  noLoop();
  noFill();

  canvas = createGraphics(width, height);

  canvas.beginDraw();
  canvas.smooth(4);
  canvas.strokeWeight(diam);
  canvas.endDraw();

  bg = createBG(0150);

  mouseX = width  >> 1;
  mouseY = height >> 1;

  mouseButton = CENTER;
  mousePressed();
}

void draw() {
  background(bg);
  image(canvas, 0, 0);

  ellipse(mouseX, mouseY, diam, diam);
}

void keyPressed() {
  if (key == CODED)  return;

  canvas.clear();
  canvas.endDraw();

  redraw();
}

void mousePressed() {
  if (mouseButton != CENTER)  return;

  final color c = (color) random(#000000);
  stroke(c);

  canvas.stroke(c);
  canvas.endDraw();

  redraw();
}

void mouseMoved() {
  redraw();
}

void mouseDragged() {
  if (mouseX < 0 | mouseX >= width
    | mouseY < 0 | mouseY >= height)  return;

  if (mouseButton == LEFT)  drawCanvas();
  else                      eraseCanvas();

  redraw();
}

void mouseWheel(MouseEvent me) {
  final int inc = keyPressed & keyCode == CONTROL ? -1 : -5;
  diam = constrain(diam + me.getCount()*inc, 1, 100);

  canvas.strokeWeight(diam);
  canvas.endDraw();

  redraw();
}

void drawCanvas() {
  canvas.line(mouseX, mouseY, pmouseX, pmouseY);
  canvas.endDraw();
}

void eraseCanvas() {
  final int cp[] = canvas.pixels, cw = canvas.width;
  final int rad  = diam>>1, radSq = rad*rad;
  final int mx = mouseX, my = mouseY;

  final int xStart, yStart, xEnd, yEnd;

  xStart = max(mx - rad, 0);
  xEnd   = min(mx + rad, cw);

  yStart = max(my - rad, 0);
  yEnd   = min(my + rad, canvas.height);

  for (int y = yStart; y != yEnd; y++) {
    final float myySq = sq(my - y);

    for (int cwy = cw*y, x = xStart; x != xEnd; x++)
      if (sq(mx - x) + myySq <= radSq)   cp[cwy + x] = 0;
  }

  canvas.updatePixels();
}

PImage createBG(int div) {
  int i = div = constrain(div, 1, 0400);

  final PGraphics pg = createGraphics(width, height);
  final int wdiv = width/div, grey = 0400/div;

  pg.beginDraw();
  pg.smooth(4);
  pg.noStroke();

  while (i-- != 0) {
    pg.fill(i*grey);
    pg.rect(map(i, div, 0, width, 0), 0, wdiv, height);
  }

  pg.endDraw();
  return pg.get();
}

GoToLoop

An online example: http://studio.processingtogether.com/sp/pad/export/ro.9ZSvPnI4AVjwR/latest