Multiple parallel animations

Processing
1

Hello, I wanted to ask if it is possible to have multiple parallel animations at the same time in processing. Something likehttps://youtu.be/spUNpyF58BY?t=271. Basically I want two sections displayed at the same time, each having its own shape and its own animation and also the background color should change separately. The reason i am asking this is that I see the api as backgroundColor which sets the color of the entire screen. not that of a specific shape. Kindly help me understand if this is possible

1 Like
2

@Aravindh,
If I’m understanding you correctly, you want to run two “animations” at the same time on a single window. This is possible, and you can keep track of relative positions using pushMatrix() and popMatrix(). I would also use translate().
https://processing.org/reference/pushMatrix_.html
To make two different backgrounds, I would recommend using rect() to draw a new rectangular background. Use fill() to color it. You can customize this background to be whatever shape or color you want. Hope this helps. Good luck!
-Trilobyte

3

You can use PGraphics to do that. Check out the documentation reference for it here. You can essentially use it to create two canvases and then call them in your sketch. Here’s a simple commented example I wrote to demonstrate how you can use it. It’s two different views of a rotating box.

output

PGraphics top, persp;
float a;

void setup() {
  size(400, 200, P3D);
  top = createGraphics(200, 200, P3D);
  persp = createGraphics(200, 200, P3D);
}

void draw() {
  clear();
  //Run scenes
  drawScene(top, 0, a);
  drawScene(persp, PI/4, a);
  
  //Display scenes
  image(top, 0, 0);
  image(persp, 200, 0);
  
  //Animate
  a+=0.1;
}

void drawScene(PGraphics scene, float angle, float time) {
  scene.beginDraw();
  scene.clear();
  
  //Outline frame
  scene.pushStyle();
  scene.noFill();
  scene.stroke(255);
  scene.rect(0, 0, scene.width, scene.height);
  scene.popStyle();

  //Move coordinate system
  scene.translate(scene.width/2, scene.height/2);
  scene.rotateX(angle);
  scene.rotateZ(time);
  
  //Generate box
  scene.box(50);
  
  //Draw reference point
  scene.pushStyle();
  scene.stroke(255, 0, 0);
  scene.strokeWeight(15);
  scene.point(25, 25, 25);
  scene.popStyle();
  
  scene.endDraw();
}
1 Like