1

I am using Processing in Java to perpetually draw a line graph. This requires a clearing rectangle to draw over drawn lines to make room for the new part of the graph. Everything works fine, but when I call a method, the clearing stops working as it did before. Basically the clearing works by drawing a rectangle in front of where the line is currently at

Below are the two main methods involved. The drawGraph function works fine until I call the redrawGraph which redraws the graph based on the zoom. I think the center variable is the cause of the problem but I cannot figure out why.

public void drawGraph()
    {
        checkZoom();
        int currentValue = seismograph.getCurrentValue();
        int lastValue = seismograph.getLastValue();
        step = step + zoom;
        if(step>offset){
            if(restartDraw == true)
            {
                drawOnGraphics(step-zoom, lastY2, step, currentValue);
                image(graphGraphics, 0, 0);
                restartDraw = false;
            }else{                 
            drawOnGraphics(step-zoom, lastValue, step, currentValue);
            image(graphGraphics, 0, 0);
            }
        }                                                   // draw graph (connect last to current point                                                                          // increase step - x axis
        float xClear = step+10;                                                                          // being clearing area in front of current graph
        if (xClear>width - 231)  {
            xClear = offset - 10;                                                                       // adjust for far side of the screen
        }
        graphGraphics.beginDraw();
        if (step>graphSizeX+offset)  {                                                                  // draw two clearing rectangles when graph isn't split
//             left = bg.get(0, 0, Math.round(step-graphSizeX), height - 200);                                                 // capture clearing rectangle from the left side of the background image
//             graphGraphics.image(left, 0, 0);                                                                           // print left clearing rectangle
//             if (step+10<width)  {
//             right = bg.get(Math.round(step+10), 0, width, height - 200);                                                 // capture clearing rectangle from the right side of the background image
//                 // print right clearing rectangle
//             }
         }  else  {                                                                                     // draw one clearing rectangle when graph is split
                  center = bg.get(Math.round(xClear), lastY2, offset,  height - 200);                                // capture clearing rectangle from the center of the background image
                  graphGraphics.image(center, xClear - 5, 0);// print center clearing rectangle
        }
         if (step > graphSizeX+offset)  {                                                                           // reset set when graph reaches the end
                  step = 0+offset;
            }
         graphGraphics.endDraw();
         image(graphGraphics, 0 , 0);
         System.out.println("step: " + step + " zoom: " + zoom + " currentValue: "+ currentValue + " lastValue: " + lastValue);
     }

private void redrawGraph()                                                      //resizes graph when zooming
{
    checkZoom();
    Object[] data = seismograph.theData.toArray();
    clearGraph();
    step = offset;
    int y2, y1 = 0;
    int zoomSize = (int)((width - offset) / zoom);
    int tempCount = 0;
    graphGraphics.beginDraw();
    graphGraphics.strokeWeight(2);                                                                                     // line thickness
    graphGraphics.stroke(242,100,66);
    graphGraphics.smooth();
    while(tempCount < data.length)
        {
            try
            {
                y2 = (int)data[tempCount];
                step = step + zoom;
                if(step > offset && y1 > 0 && step < graphSizeX+offset){
                    graphGraphics.line(step-zoom, y1, step, y2);
                }
                y1 = y2;
                tempCount++;
                lastY2 = y2;
            }
            catch (Exception e)
            {
                System.out.println(e.toString());
            }
        }
    graphGraphics.endDraw();
    image(graphGraphics, 0, 0);
    restartDraw = true;
    } 

Any help and criticisms are welcome. Thank you for your valuable time.

1
  • You'll have much better luck if you post an MCVE. Jun 29, 2015 at 15:33

1 Answer 1

1

I'm not sure if that approach is the best. You can try something as simple as this:

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example: a graph of random numbers

float[] vals;

void setup() {
  size(400,200);
  smooth();
  // An array of random values
  vals = new float[width];
  for (int i = 0; i < vals.length; i++) {
    vals[i] = random(height);
  }
}


void draw() {

  background(255);
  // Draw lines connecting all points
  for (int i = 0; i < vals.length-1; i++) {
    stroke(0);
    strokeWeight(2);
    line(i,vals[i],i+1,vals[i+1]);
  }

  // Slide everything down in the array
  for (int i = 0; i < vals.length-1; i++) {
    vals[i] = vals[i+1]; 
  }
  // Add a new random value
  vals[vals.length-1] = random(height);//use seismograph.getCurrentValue(); here instead

}

You can easily do the same using a PGraphics buffer as your code suggests:

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example: a graph of random numbers

float[] vals;

PGraphics graph;

void setup() {
  size(400,200);
  graph = createGraphics(width,height);

  // An array of random values
  vals = new float[width];
  for (int i = 0; i < vals.length; i++) {
    vals[i] = random(height);
  }
}


void draw() {
  graph.beginDraw();
  graph.background(255);
  // Draw lines connecting all points
  for (int i = 0; i < vals.length-1; i++) {
    graph.stroke(0);
    graph.strokeWeight(2);
    graph.line(i,vals[i],i+1,vals[i+1]);
  }
  graph.endDraw();
  image(graph,0,0); 

  // Slide everything down in the array
  for (int i = 0; i < vals.length-1; i++) {
    vals[i] = vals[i+1]; 
  }
  // Add a new random value
  vals[vals.length-1] = random(height);//use seismograph.getCurrentValue(); here instead

}

The main idea is to cycle the newest data in an array and simply draw the values from this shifting array. As long as you clear the previous frame (background()) the graph should look ok.

1
  • I scraped the old code and rewrote it based off this approach, it makes the code much more clean. Thank you. Jul 1, 2015 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.