image buffer technique (need some guidance )

Programming Questions

danthomps..

image buffer technique (need some guidance )

in Programming Questions • 2 years ago

Hey Guys,

I'm trying to optimize my program's excessive amount redraw. I'm wanting to derive a technique that checks to see if the state of things has changed visually and if they have, redraw, update whatever. If they haven't then I want to put these items into some sort of image buffer. so that there is only ever one image being redrawn of on the canvas (in the main draw loop) when things are idol.

Hope this makes sense. Here is a small section of the code from what I am working on. It would be awesome if someone could edit this code and show me an example of how to implement this. Please note I am not looking to use the loop() and noLoop() functions as this means that the rollover functions cant not update when the entire program is at a halt.

Thanks in advance!

BezierSection bezSection1;

void setup() {
size(600, 400);
noStroke();
smooth();
bezSection1 = new BezierSection(1, new PVector(60, 300), new PVector(300, 300), new PVector( 200,90), new PVector(440,90));
}

void draw() {
background(41);
bezSection1.display(mouseX);
}

// release any point attached to the mouse
void mouseReleased () {
bezSection1.release();
}

// for dragg'n dem points
void mousePressed () {
bezSection1.press();
}

class BezierSection {

// variables for control and anchor points.
int pts = 4;
int ptSize = 8;
float[]x = new float[4];
float[]y = new float[4];
boolean[]isDragSafe = new boolean[4];
float[]xOld = new float[4];
float[]yOld = new float[4];
float[]xOffset = new float[4];
float[]yOffset = new float[4];
boolean[]over = new boolean[4];
boolean hasChanged =false;

float stuff;

BezierSection(float t, PVector A, PVector B, PVector C, PVector D) {
    // fill coordinate arrays
    xOld[0] = x[0] = A.x;
    xOld[1] = x[1] = B.x;
    xOld[2] = x[2] = C.x;
    xOld[3] = x[3] = D.x;
    yOld[0] = y[0] = A.y;
    yOld[1] = y[1] = B.y;
    yOld[2] = y[2] = C.y;
    yOld[3] = y[3] = D.y;

    //initialize dragging flags to false
    for (int i =0; i< pts; i++) {
      isDragSafe[i] = false;
    }
}

void display(float timeSliderPos) {


    // test print function
    ///////////////////////////////////println(getCVPositions());

    //draw curves and control handles
    strokeWeight(2);
    stroke(138, 216, 20);
    noFill();
    bezier (x[0], y[0], x[1], y[1], x[2], y[2], x[3], y[3]);
    // draw bezier handles
    strokeWeight(2);
    stroke(107);
    line(x[1], y[1], x[0], y[0]);
    line(x[3], y[3], x[2], y[2]);
    // draw anchor/control points
    noStroke();
    fill(0);
    for (int i =0; i< pts; i++) {
      if (i ==0 || i==3) {

        fill(0);
        ellipse(x[i], y[i], ptSize+4, ptSize+4);
      }
      else {
        fill(231, 163, 27);
        rectMode(CENTER);
        rect(x[i], y[i], ptSize, ptSize);
      }
    }

    over(); //currently just used as a rollover hint for the CVs

    // start dragging if flag true
    if (isDragSafe[0]&&isDragSafe[1]) {// if it's anchor 1 and it's handle then move them both and add and offset to the handle
      // getOffset();
      x[0] = mouseX;
      y[0] = mouseY ;
      x[1] = mouseX - xOffset[1];
      y[1] = mouseY - yOffset[1];
      xOld[1] = x[1];
      yOld[1] = y[1];
    }
    if (isDragSafe[1]&&!isDragSafe[0]) {
      x[1] = mouseX;
      xOld[1] = x[1];
      y[1] = mouseY;
      yOld[1] = y[1];
    }
    if (isDragSafe[2]&&isDragSafe[3]) {// if it's anchor 2 and it's handle then move them both and add and offset to the handle
      x[3] = mouseX;
      y[3] = mouseY;
      x[2] = mouseX - xOffset[2];
      y[2] = mouseY - yOffset[2];
      xOld[2] = x[2];
      yOld[2] = y[2];
    }
    if (isDragSafe[2]&&!isDragSafe[3]) {
      x[2] = mouseX;
      xOld[2] = x[2];
      y[2] = mouseY;
      yOld[2] = y[2];
    }
    fill(231, 163, 27);

    // If statement to be called and used in conjunction with image buffer (once I learn how)
    if (xOld[0] == x[0]&&
        xOld[1] == x[1]&&
        xOld[2] == x[2]&&
        xOld[3] == x[3]&&
        yOld[0] == y[0]&&
        yOld[1] == y[1]&&
        yOld[2] == y[2]&&
        yOld[3] == y[3]){
    println("hasn't changed");
    hasChanged = false;
    }
    else {
    println("has changed!!!");
    xOld[0] = x[0];
    xOld[1] = x[1];
    xOld[2] = x[2];
    xOld[3] = x[3];
    yOld[0] = y[0];
    yOld[1] = y[1];
    yOld[2] = y[2];
    yOld[3] = y[3];
    hasChanged = true;
    }
}

void press() {
    for (int i =0; i< pts; i++) {
      if (mouseX>=x[i]-ptSize-5 && mouseX<=x[i]+ptSize+5 &&
        mouseY>=y[i]-ptSize-5 && mouseY<=y[i]+ptSize+5) {
        if (i==0) {
          isDragSafe[i] = true;
          isDragSafe[i+1] = true;
          yOffset[1] = (y[0] - yOld[1]); //Work out the offset between the anchor and the handle
          xOffset[1] = (x[0] - xOld[1]);
        }
        if (i==3) {
          isDragSafe[i] = true;
          isDragSafe[i-1] = true;
          yOffset[2] = (y[3] - yOld[2]); //Work out the offset between the anchor and the handle
          xOffset[2] = (x[3] - xOld[2]);
        }
        else {
          isDragSafe[i] = true;
        }
      }
    }
}

void over() { // this is all just for rollover feedback
    for (int i =0; i< pts; i++) {
      if (mouseX>=x[i]-ptSize-5 && mouseX<=x[i]+ptSize+5 &&
        mouseY>=y[i]-ptSize-5 && mouseY<=y[i]+ptSize+5) {
        if (i==0 && isDragSafe[1] == false && isDragSafe[2] == false && isDragSafe[3] == false ) {
          fill(0);
          noStroke();
          ellipse(x[i], y[i], 15, 15);
        }
        if (i==1 && isDragSafe[2] == false && isDragSafe[3] == false ) {
          fill(231, 163, 27);
          noStroke();
          rect(x[i], y[i], 12, 12);
        }
        if (i==2 && isDragSafe[0] == false && isDragSafe[1] == false) {
          fill(231, 163, 27);
          noStroke();
          rect(x[i], y[i], 12, 12);
        }
        if (i==3 && isDragSafe[0] == false&& isDragSafe[1] == false && isDragSafe[2] == false) {
          fill(0);
          noStroke();
          ellipse(x[i], y[i], 15, 15);
        }
      }
    }
}

void release() {
    for (int i =0; i< pts; i++) {
      isDragSafe[i] = false;
    }
}

void move() {
    cursor(ARROW);
    for (int i =0; i< pts; i++) {
      if (mouseX>=x[i]-15 && mouseX<=x[i]+15 && mouseY>=y[i]-15 && mouseY<=y[i]+15) {
        cursor(HAND);
      }
    }
}

PVector[] getCVPositions() {
    PVector[] vals = {
      new PVector(x[0], y[0]), new PVector(x[1], y[1]), new PVector(x[2], y[2]), new PVector(x[3], y[3])
      };
      return vals;
}

boolean getBezLockedState() {
    if (isDragSafe[0] || isDragSafe[1]||isDragSafe[2]||isDragSafe[3]) {
      return true;
    }
    return false;
}

}

Replies(6)

PhiLho

Re: image buffer technique (need some guidance )

2 years ago

I suppose you have already lagging issues: it makes no sense to optimize something working well enough.
The " some sort of image buffer" is called PGraphics in Processing. There are plenty of usage examples in the examples and in the forum. But organizing it correctly for your particular need can be tricky.

danthomps..

Re: Re: image buffer technique (need some guidance )

2 years ago

The only two examples I've found so far on PGraphics are these:
http://processing.org/reference/PGraphics.html
http://wiki.processing.org/w/Draw_to_off-screen_buffer

The first one doesn't scale very well for my needs. P2D and P3D (gives me ugly jaggy curves). and Can't seem to get it working with JAVA2D.
The second one I have not attempted yet.

Any other examples/links that people would be a big help! I was thinking there must be a common approach to this sort of thing for doing OOP GUIs. Just looking for a place to start really.

Thanks.

PhiLho

Re: image buffer technique (need some guidance )

2 years ago

It works fine with JAVA2D.
I made a number of small sketches using PGraphics.
For example:
http://bazaar.launchpad.net/~philho/+junk/Processing/view/head:/_QuickExperiments/TexturePaint2/TexturePaint2.pde
or its twin
http://bazaar.launchpad.net/~philho/+junk/Processing/view/head:/_QuickExperiments/GradientPaint/GradientPaint.pde
or even
http://bazaar.launchpad.net/~philho/+junk/Processing/view/head:/_QuickExperiments/Clipping/Clipping.pde

amnon.owed

Re: image buffer technique (need some guidance )

2 years ago

Adding to the above suggestions. A cheap trick is to use get() and the resulting image when nothing changes. However this has some downsides, for example you will not be able to see the mouseOvers. Regardless of the solution, you will need to seperate things better in your code to be able to implement any solution. Right now you have too many things in draw().

I started playing with your code and came up with the solution below. The canvas only changes when necesarry and furthermore only actively draws objects that are changing, such as mouseOvers and changing beziers. This allows the program to run at full speed when nothing changes, but also when some things ARE changing (which is probably the more difficult issue).

Usage: Press space to generate different beziers. You can drag around the beziers with the mouse. The bezier that is changing will turn blue and move to the front of the screen. Once it stops changing, it moves to it's original place within the list again. This allows the user to distinguish it among all other beziers when moving it around.

Let me know if you need more explanation.

Main Program (to run it, you will also need the two classes posted below!)

BezierCanvas bc;
PVector m;
void setup() {
size(1280, 720);
smooth();
bc = new BezierCanvas(50); // set the number of beziers here
m = new PVector();
}
void draw() {
background(41);
bc.run();
frame.setTitle(int(frameRate) + " fps");
}
void keyPressed() {
if (key == ' ') { bc.initSections(); }
}
void mousePressed() {
bc.press();
}
void mouseReleased() {
bc.release();
}

amnon.owed

Re: image buffer technique (need some guidance )

2 years ago

And now the two classes.

BezierCanvas class

class BezierCanvas {
ArrayList <BezierSection> sections = new ArrayList <BezierSection> ();
int numSections;
PImage canvas, minusChanger;
boolean canvasChanging, canvasSaved, minusChangerSaved;
int changer;
BezierCanvas(int numSections) {
this.numSections = numSections;
initSections();
rectMode(CENTER);
strokeWeight(2);
}
void run() {
m.set(mouseX, mouseY, 0);
canvasChanging = false;
for (int i=0; i<sections.size(); i++) {
BezierSection bs = sections.get(i);
bs.drag();
if (bs.hasChanged()) {
canvasChanging = true;
changer = i;
break;
}
}
if (canvasChanging) {
if (minusChangerSaved) {
image(minusChanger, 0, 0);
BezierSection bs = sections.get(changer);
bs.display(true);
} else {
for (int i=0; i<sections.size(); i++) {
if (i != changer) {
BezierSection bs = sections.get(i);
bs.display(false);
}
}
minusChanger = get();
minusChangerSaved = true;
}
canvasSaved = false;
} else {
if (canvasSaved) {
image(canvas, 0, 0);
} else {
for (BezierSection bs : sections) {
bs.display(false);
}
canvas = get();
canvasSaved = true;
}
}
for (BezierSection bs : sections) {
bs.displayOver();
}
}
void press() {
for (BezierSection bs : sections) {
bs.press();
}
}
void release() {
for (BezierSection bs : sections) {
bs.release();
}
minusChangerSaved = false;
}
void initSections() {
sections.clear();
for (int i=0; i<numSections; i++) {
PVector[] bezier = { rVector(), rVector(), rVector(), rVector() };
BezierSection bs = new BezierSection(bezier);
sections.add(bs);
}
canvasSaved = false;
}
PVector rVector() {
return new PVector(random(width), random(height));
}
}

BezierSection class

class BezierSection {
PVector[] c = new PVector[4];
PVector[] old = new PVector[4];
boolean[] dragOn = new boolean[4];
int rSize = 8;
BezierSection(PVector[] input) {
for (int i=0; i<input.length; i++) {
c[i] = input[i].get();
old[i] = input[i].get();
}
}
void display(boolean changer) {
noFill();
if (changer) { stroke(38, 16, 220); } else { stroke(138, 216, 20); }
bezier(c[0].x, c[0].y, c[1].x, c[1].y, c[2].x, c[2].y, c[3].x, c[3].y);
stroke(107);
line(c[1].x, c[1].y, c[0].x, c[0].y);
line(c[3].x, c[3].y, c[2].x, c[2].y);
noStroke();
for (int i=0; i<c.length; i++) {
if (i==0 || i==3) {
fill(138, 216, 20);
ellipse(c[i].x, c[i].y, rSize, rSize);
} else {
fill(231, 163, 27);
rect(c[i].x, c[i].y, rSize, rSize);
}
}
}
void displayOver() {
for (int i=0; i<c.length; i++) {
if (i==0 || i==3) {
if (isOverEllipse(m, c[i])) {
fill(255, 125);
ellipse(c[i].x, c[i].y, rSize*3, rSize*3);
}
} else {
if (isOverRect(m, c[i])) {
fill(255, 125);
rect(c[i].x, c[i].y, rSize*3, rSize*3);
}
}
}
}
void press() {
for (int i=0; i<c.length; i++) {
if (i==0 || i==3) {
if (isOverEllipse(m, c[i])) { dragOn[i] = true; }
} else {
if (isOverRect(m, c[i])) { dragOn[i] = true; }
}
}
}
void release() {
for (int i=0; i<c.length; i++) {
dragOn[i] = false;
}
}
void drag() {
PVector offset = new PVector(mouseX - pmouseX, mouseY - pmouseY);
for (int i=0; i<c.length; i++) {
if (dragOn[i]) { c[i].add(offset); }
}
}
boolean isOverRect(PVector m, PVector r) {
boolean over = false;
if (m.x >= r.x - rSize/2 && m.x <= r.x + rSize/2 && m.y >= r.y - rSize/2 && m.y <= r.y + rSize/2) { over = true; }
return over;
}
boolean isOverEllipse(PVector m, PVector r) {
boolean over = false;
if (m.dist(r) < rSize/2) { over = true; }
return over;
}
boolean hasChanged() {
boolean changed = false;
if (!Arrays.equals(c, old)) {
changed = true;
for (int i=0; i<c.length; i++) {
old[i] = c[i].get();
}
}
return changed;
}
}

danthomps..

Re: Re: image buffer technique (need some guidance )

2 years ago

Wow I've been under the gun at work and just got back to this problem. Thanks so much for the response guys was exactly the help I needed. Can't wait to try implement this into what I am building. Thanks again I really appreciate you taking the time out to reply.

Dan.

Top Reply