Animation layers

Processing Beginners
1

Hi, I have this very simple animation. Rects drawing one by one on the sketch window. I want at the sametine a line to animate from left to right. Without leaving its trail. I tried animate translate, pop and push, background no background, function. I just don’t get it. Does anyone has a hint how to achieve that animation. Thanks.

< float x =397;
float y =110;
void setup() {
size(900, 900);
background(255);
frameRate(20);
}
void draw() {
fill(0);
noStroke();
if (y < 800) {
rect(x, y, 106, 10);
x = x + -8;
y = y + 20;
}
}
/>

2

here is how to draw moving line take an idea

Bouncing line with for loops

3

Hi thanks. Sorry if I wasn’t clear, that’s not quite what I’m trying to do. I want the line to animate OVER the animation of the rects. In the animation of the line, if I use background(something) it erases the first animation.

4

I would redraw all the rectangles in each frame. So you can easily change the background or draw other objects. If you have any questions about the code, just ask.
Here is my Code:

Animation a;

void setup() {
  size(800, 600);
  
  a = new Animation(2000);
}

void draw() {
  background(255);
  
  fill(0);
  noStroke();
  rectMode(CENTER);
  a.show();
  
  if(a.end())
  a = new Animation(2000);
  
  fill(200);
  noStroke();
  circle(mouseX, mouseY, 50);
}

class Animation{
  int startTime;
  
  int processTime;
  
  Animation(int processTime) {
    startTime = millis();
    
    this.processTime = processTime;
  }
  
  boolean end() {
    return millis()-startTime > processTime;
  }
  
  void show() {
    float percent = float(millis()-startTime)/processTime;println(percent);
    
    final int rects = 5;
    
    PVector startPos = new PVector(100, 100);
    PVector increment = new PVector(30, 50);
    
    
    for(int i = 0; i < min(rects*percent, rects); i++) {
      rect(startPos.x, startPos.y, 100, 20);
      startPos.add(increment);
    }
  }
}
2 Likes
5

Thanks TimeLex. It seems interesting. I’ll go thought your code and let you know.

6

Hello,

I combined these two to achieve this:

image

Example of a simple timer using frameCount:

void setup() 
  {
  size(200, 200);
  }

void draw() 
  {
  if (frameCount%60 == 0)
    circle(random(200), random(200), 20);
  }

:)

7 
Hi,

It works. You run the Animation object on setup. Interesting.
Now, if you look at my sketch, I want the line when it reaches to rotate 45°.I want to draw a A.
If I follow your exemple, I should work with classes and objects , right?
Thanks.

</> Animation a;
float rectX = 0;

void setup() {
  size(900, 900);
  a = new Animation(2000);
}

void draw() {
  background(255);

  fill(0);
  noStroke();
  rectMode(CENTER);
  a.show();

  // I don't need this. I want my black "stair" to remain on stage.
  //if(a.end()) 
  //a = new Animation(2000);

  fill(0);
  noStroke();
  rectMode(CORNER);
  if (rectX < 500) {
    rect(rectX, 140, 5, 450);
    rectX = rectX +2;
  }
  rect(rectX, 140, 5, 450);
}

class Animation {
  int startTime;
  int processTime;

  Animation(int processTime) {
    startTime = millis();
    this.processTime = processTime;
  }

  boolean end() {
    return millis()-startTime > processTime;
  }

  void show() {
    float percent = float(millis()-startTime)/processTime;
    final int rects = 30;
    PVector startPos = new PVector(441, 140);
    PVector increment = new PVector(-8, 20);

    for (int i = 0; i < min(rects*percent, rects); i++) {
      rect(startPos.x, startPos.y, 100, 8);
      startPos.add(increment);
    }
  }
}