Animate QuadGrid

#21

Same as before, I have not posted the QuadGrid class code because I want to show how easy it is to use. This video shows the final version of QuadGrid in action, it is created using the code shown below.

This is the code the user would have written for this sketch, just 48 lines.

QuadGrid.Builder builder;
QuadGrid front, side;
boolean isVisible;
int animDuration = 500; // milliseconds

void setup() {
  size(450, 400, P2D);
  textSize(24);
  textAlign(CENTER, CENTER);
  // Create the builder object
  builder = new QuadGrid.Builder();
  // Build the front face
  PImage img = loadImage("transport.jpg");
  builder.useImage(img).detail(8, 6)
    .staticEdge(100, 100, 100, 350).movingEdge(400, 130, 400, 320)
    .zoom(50, 225, 0.9f);  // left of static edge centre to give enlargement to right
  front = builder.build();
  // Build the left side
  img = loadImage("brick.jpg");
  builder.useImage(img).detail(2, 8)
    .movingEdge(50, 150, 50, 300).uvCoords(0, 0.2f, 0, 1);
  side = builder.build();
  // All done simulate mouse click to get things started
  isVisible = false;
  mouseClicked();
}

void mouseClicked() {
  if (!front.isAnimating() && !side.isAnimating()) {
    if (isVisible) {
      front.anim(this, 1, 0, animDuration);
      side.anim(this, 1, 0, animDuration);
      isVisible = false;
    } else {
      front.anim(this, 0, 1, animDuration);
      side.anim(this, 0, 1, animDuration);
      isVisible = true;
    }
  }
}

void draw() {
  background(200, 210, 255);
  fill(0);
  text("Click mouse anywhere\nto animate", 0, 0, width, 100);
  front.drawGrid(this);
  side.drawGrid(this);
}

You can click here to download the archived sketch used to produce this video.

The QuadGrid class uses the builder pattern to create the QuadGrid instances so if you have questions about using this class then feel free to ask…

1 Like
#22

That looks great! I’m going to drop that into my code today. Thanks again!

S