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

edited September 2014 in Questions about Code

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

Answers

  • edited September 2014 Answer ✓

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

  • edited September 2014

    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();
    }
    
Sign In or Register to comment.