Loading...
Logo
Processing Forum

Hello-

I need to create an image during startup() and use that image as background while the app is running and moving 2D shapes across the screen (2D).  That much is running in the sample below, but I'm struggling to add one more feature: I need to add to the background while the app is running (like from inside draw()). 

In the app below, I want the red ellipses at the bottom of the code to persist onto the background and not fade when draw uses tint/image.  I want the black dots to leave the fading/graying tadpole trail, but I do't want those trails to persist.  I'm hoping to avoid file i/o.  The actual app has a lot more happening and save()/loadImage() would put too much of a load on draw(), even if there were a way to save without the tadpole trails .

Any help greatly appreciated!

PImage bg;
ArrayList lst;
final int MAX = 20;

void setup() {
  size(400,300);
  fill(200);
  ellipse(random(width), random(height), 50, 50);
  // draw the rest of bkg.png here
  save("bkg.png");
  bg = loadImage("bkg.png");
  lst = new ArrayList();
}

void draw() {
  tint(255, 100);
  image(bg,0,0);
  if (random(100) < 10 && lst.size() < MAX)
    lst.add(new PVector(0,0));
  for(int i=0; i<lst.size(); i++) {
    PVector pt = (PVector) lst.get(i);
    fill(0);
    ellipse(pt.x, pt.y, 3, 3);
    pt.add(new PVector(random(-1, 7), random(-1, 5)));
    if (pt.x > width || pt.y > height)
      pt.x = pt.y = 0;
  }
  if (random(100) < 5 && lst.size() > 10) {
    PVector pt = (PVector) lst.get(int(random(lst.size())));
    // how to make these ellipses persist in bg (not in bkg.png)?
    fill(255,0,0);
    ellipse(pt.x, pt.y, 20, 20);
    pt.x = pt.y = 0;
  } 
}

Replies(3)

As said in another thread (by somebody else? strange...) the save() in setup() is useless.

And to answer your question " how to make these ellipses persist in bg (not in bkg.png)?", you probably need to do another array list to memorize your red dots and redraw them on each frame. Not sure to understand the bg vs. bkg.png part.
Thanks for the thoughts phi.lho.

I found my answer here (using PGraphics): http://wiki.processing.org/w/Draw_to_off-screen_buffer
I'll adapt it to my mini app and post it here in case someone else needs to solve a similar problem.

Sorry parts of it were not clear.  'bg' is the PImage variable in memory, bkg.png is the image file that gets created in setup().  And I really do need to write to the background canvas.  The full app has too many red dots to memorize.

Aside: The user in the other thread was trying to finish a programming assignment and had a number of issues, one of which was the useless save() you pointed out.  The one in my code is not useless.  The app creates a new background each time (mostly where the comment is, but also the random ellipse right before that).  If you delete save() from the app I posted, it will crash unless you create bkg.png some other way, or by first running the app with save() and then running it without.

Again, thanks for your suggestions.


Here it is!  The app creates an initial background and saves it to a file.  Then animates black dots moving across the screen (with faded trails behind them), periodically writing red dots to the background image in memory.

PGraphics bg;
ArrayList lst;
final int MAX = 20;

void setup() {
  size(400,300);
  bg = createGraphics(400,300, JAVA2D);
  bg.beginDraw();
  bg.background(200);
  bg.fill(200);
  bg.ellipse(random(width), random(height), 50, 50);
  // draw the rest of bkg.png here 
  bg.endDraw();
  bg.save("bkg.png");
  lst = new ArrayList();
}

void draw() {
  tint(255, 100);
  image(bg, 0, 0);
  if (random(100) < 10 && lst.size() < MAX)
    lst.add(new PVector(0,0));
  for(int i=0; i<lst.size(); i++) {
    PVector pt = (PVector) lst.get(i);
    fill(0); // ellipses drawn to the screen, not to the background
    ellipse(pt.x, pt.y, 3, 3);
    pt.add(new PVector(random(-1, 7), random(-1, 5)));
    if (pt.x > width || pt.y > height)
      pt.x = pt.y = 0;
  }
  if (random(100) < 5 && lst.size() > 10) {
    PVector pt = (PVector) lst.get(int(random(lst.size())));
    bg.beginDraw(); // these ellipses persist to the (memory) background
    bg.fill(255,0,0);
    bg.ellipse(pt.x, pt.y, 5, 5);
    bg.endDraw();
    pt.x = pt.y = 0;
  }
}