PDE X: debug drawing instruction by instruction

redraw

Hello guys, I was trying PDE X mode, and it works great. The variable inspector saved my life!!

The next question is comfortably ambitious and maybe it is not possible depending on how Processing works, but, is it possible to render the frame instruction by instruction, rather than every draw() execution?

GoToLoop

... render the frame instruction by instruction,...

You mean, see what's happening just after each drawing command? :-??

Chrisir

I did that once.

you can make a virtual screenshot after each instruction and after 10 secs or so stop this state and go to another state where the screenshots are shown one after the other from an ArrayList here you could even go to next and prev image.

PhiLho

I suppose it is possible, by maintaining a drawing cycle independent of the main one, mimicking all the drawing instructions on a separate PGraphics. It would be useful, but would need some work!

redraw

Virtual screenshot is just saveFrame() function?

I've noticed that, while debuging, the frame only updates when the draw() function has ended. Do you mean it is possible to refresh the frame by using a separate PGraphics?

Chrisir

you could use saveFrame()

what I meant

what I meant was something like

PImage newMountains = get();

you could store them in an ArrayList without using saveFrame()

then you need a method to finish this part of the sketch and to look at the images.

Since the frame only updates when the draw() function has ended, you could look at the images by using the ArrayList.

Chrisir

example

this is a program where you can't see the lines grow down the screen (since the frame only updates when the draw() function has ended) :

//
void setup()
{
  // init
  size(800, 600);
} // func 
//
//
void draw() 
{
  // run  
  background(255);
  for (int i=0; i < 20; i++) {
    stroke(10*i, 30, 40);
    line (10, 20*i+30, 100, 20*i+30);
  } // for
} // func 
//

The second version

The second version provides a means to see the single images (after the old draw has ended):

//
ArrayList<PImage> images ;

boolean linesAreDrawn = false;
int i = 0;
//
// ---------------------------------------------------------------
//
void setup()
{
  // init
  size(800, 600);
  // Create an empty ArrayList
  images = new  ArrayList();
} // func 

void draw() 
{ 
  // two main states: 
  if (!linesAreDrawn) {
    // draw the initial images and make screenshots
    frameRate(300);
    background(255);
    for (int i=0; i < 20; i++) {
      stroke(10*i, 30, 40);
      line (10, 20*i+30, 100, 20*i+30);
      images.add( get() );
    }
    linesAreDrawn=true;
  }
  else {
    // replay for debugging
    frameRate(1);
    background(255);
    if (i<images.size()) {
      PImage a1 = images.get(i);
      image(a1, 0, 0);
      fill(0);
      text("Debug image "+i, 400, 35 );
      i++;
    } // if
    else 
    {
      fill(0);
      text("Done. ", 400, 35 );
    } // else
  } // else
} // func 
// ==========================

Comments:

With the 2nd approach you can see the lines grow down.

The most important line is line 27.

With the 2nd approach you can easily use cursor keys to go back and forth within the saved images.

The images are not stored on the hard drive.

Greetings, Chrisir ;-)

Chrisir

This is the version where you can use cursor keys to go back and forth within the saved images.

//
ArrayList<PImage> images;
boolean linesAreDrawn = false;
int i = 5;
final String imageNumberMsg = "Debug image # ";
final String helpTextMsg = "Cursor left/right to browse <>.";
String errorMsg = ""; 
//
// ---------------------------------------------------------------
//
void setup()
{
  // init
  size(800, 600);
  // Create an empty ArrayList
  images = new  ArrayList();
} // func 

void draw() 
{ 
  // two main states: 
  if (!linesAreDrawn) {
    // draw the initial images and make screenshots
    frameRate(300);
    background(255);
    for (int i=0; i < 20; i++) {
      fill(0, 0, 255);  // blue for text     
      stroke(10*i, 30, 40); // color for lines 
      writeSomeDataToTheScreen(i, 10*i, 30, 40); // must be the same numbers 
      line (10, 20*i+30, 100, 20*i+30);
      // screenshot
      images.add( get() );
    } // for 
    linesAreDrawn=true;
  } // if 
  else {
    // replay for debugging
    frameRate(300);
    background(255);
    if (i>images.size()-1) { 
      i=images.size()-1;
    }
    PImage a1 = images.get(i);
    image(a1, 0, 0);
    // messages 
    fill(0);
    text(imageNumberMsg+i+".", 400, 35 );
    text(helpTextMsg, 400, 55 );
    fill(255, 0, 0);
    text(errorMsg, 400, 135 );
  } // else
} // func 

void keyPressed() {
  errorMsg=""; // reset 
  if (key==CODED) {
    // key is CODED
    if (keyCode==RIGHT) {
      i++;
    }
    else if (keyCode==LEFT) {
      i--;
    }
    // ---
    // Two checks
    if (i<0) {
      i=0;
      errorMsg = "First debug image. ";
    } // if 
    else if (i>images.size()-1) { 
      i=images.size()-1;
      errorMsg = "Last debug image. ";
    } // else
  } // if CODED
  else {
    // not CODED 
    // empty
  } // else
} // func 

void writeSomeDataToTheScreen(int i, int r, int g, int b) {
  // shows one number i and a color on the screen
  text ("i is "
    +i+". "
    +"Color is " 
    + strColor(10*i, 30, 40)
    +".", 
  110, 20*i+30);
} // func 

String strColor(int r, int g, int b) {
  // returns three ints written as a String for colors 
  return "<red="+r+",green="+g+",blue="+b+">";
} // func 
// =========================================

redraw

Thanks Chrisir!! I'll try it! :)