processing - Change object by pressing button while showing animation

Question

I'm trying to add animation in my code. What I have so far is an object that can be changed by pressing a button. So every time you press the button, the object changes (it is a tree and I'm changing its branches). Is it possible to add some kind of animation like snow? The problem with that is that I have to put it inside the draw method so it will be called automatically and make us think that it is animation. Thus, I also have to add the background / button and everything all the time. But I can't do that with my main object (tree) as I want to change it only when you press the button.

Is there any solution to that?

Thanks in advance

Answer 1

To persist some objects while refreshing others, you either:

1. Refresh only part of the screen. Like, draw a shape (rect or whatever) with background colour erasing only part of screen

2. Conditionally draw selected objects. Use flags to selective draw what you need, every draw, and use background() to clear the whole screen every draw cycle.

3. Use layers. Erase one layer and not other as you need, display all them in draw. This is usually done with PGraphics objects. Search processing + layers to see samples. Here and/or in processing forum.

EDIT: Here some simple examples of each approach:

1.

/**
 * A very simple example of erasing just part of the screen to 
 * selective persist draws
 **/


void setup() {
  size(400, 400);
  background(0);
  noStroke();
}

void draw() {
  fill(0);
  rect(0, 0, width/2, height);

  fill(120);
  ellipse(width/4, frameCount%width, 100, 100);
}

void mouseMoved() {
  fill(255);
  ellipse(mouseX, mouseY, 10, 10);
}

2.

 /**
 * A very simple example of conditionally draw stuf 
 * to selective persist draws
 **/

ArrayList <PVector> points = new ArrayList <PVector>();
boolean showBalls = true; // any key to toogle

void setup() {
  size(400, 400);
  background(0);
  noStroke();
}

void draw() {
  background(0);
  fill(30);
  rect(frameCount%width, 100, 200, 200);

  fill(120);
  ellipse(width/2, frameCount%width, 150, 150);

  fill(255);
  if (showBalls) {
    for (PVector p : points) {
      ellipse(p.x, p.y, 10, 10);
    }
  }
  if (points.size() > 500) {
    points.clear();
  }
}

void mouseMoved() {
  ellipse(mouseX, mouseY, 10, 10);
  points.add(new PVector(mouseX, mouseY));
}

void keyPressed() {
  showBalls = !showBalls;
}

3.

/**
 * A very simple example of using PGraphics as layers 
 * to selective persist draws
 **/

PGraphics layer;

void setup() {
  size(400, 400);
  layer = createGraphics(width, height);
  layer.beginDraw();
  layer.fill(255);
  layer.endDraw();
  background(0);
  noStroke();
}

void draw() {
  background(0);
  fill(30);
  rect(frameCount%width, 100, 200, 200);

  fill(120);
  ellipse(width/2, frameCount%width, 150, 150);
  image(layer, 0, 0);
}

void mouseMoved() {

  layer.beginDraw();
  layer.ellipse(mouseX, mouseY, 10, 10);
  layer.endDraw();
}