# Animation layers

**URL:** <https://discourse.processing.org/t/animation-layers/30247>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [May 24, 2021, 9:37am UTC](https://discourse.processing.org/t/animation-layers/30247 "2021-05-24T09:37:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![WUW](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wuw/32/13210_2.png) [@WUW](https://discourse.processing.org/u/WUW)\
**Post date:** [May 24, 2021, 9:37am UTC](https://discourse.processing.org/t/animation-layers/30247/1 "2021-05-24T09:37:53Z")

</div>

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;  
}  
}  
/\>

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 24, 2021, 10:22am UTC](https://discourse.processing.org/t/animation-layers/30247/2 "2021-05-24T10:22:20Z")

</div>

here is how to draw moving line take an idea

# [Bouncing line with for loops](https://discourse.processing.org/t/bouncing-line-with-for-loops/29972)

---

<div class="post-metadata">

**Author:** ![WUW](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wuw/32/13210_2.png) [@WUW](https://discourse.processing.org/u/WUW)\
**Post date:** [May 24, 2021, 10:27am UTC](https://discourse.processing.org/t/animation-layers/30247/3 "2021-05-24T10:27:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TimeLex](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/timelex/32/12869_2.png) [@TimeLex](https://discourse.processing.org/u/TimeLex)\
**Post date:** [May 24, 2021, 11:08am UTC](https://discourse.processing.org/t/animation-layers/30247/4 "2021-05-24T11:08:38Z")

</div>

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:

```auto
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);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![WUW](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wuw/32/13210_2.png) [@WUW](https://discourse.processing.org/u/WUW)\
**Post date:** [May 24, 2021, 11:29am UTC](https://discourse.processing.org/t/animation-layers/30247/5 "2021-05-24T11:29:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 24, 2021, 11:58am UTC](https://discourse.processing.org/t/animation-layers/30247/6 "2021-05-24T11:58:35Z")

</div>

Hello,

I combined these two to achieve this:

- [Linear \ Examples \ Processing.org](https://processing.org/examples/linear.html)
- [PGraphics \ Language (API) \ Processing 3+](https://processing.org/reference/PGraphics.html)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5b404e54b5f5a0e77fbe65ba181aaa00d8e92654.png)

Example of a simple timer using frameCount:

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

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

```

`:)`

---

<div class="post-metadata">

**Author:** ![WUW](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wuw/32/13210_2.png) [@WUW](https://discourse.processing.org/u/WUW)\
**Post date:** [May 24, 2021, 5:24pm UTC](https://discourse.processing.org/t/animation-layers/30247/7 "2021-05-24T17:24:39Z")

</div>

```auto
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);
    }
  }
}

```