# Lines spin animation

**URL:** <https://discourse.processing.org/t/lines-spin-animation/39711>\
**Category:** Coding Questions\
**Created:** [November 14, 2022, 9:01pm UTC](https://discourse.processing.org/t/lines-spin-animation/39711 "2022-11-14T21:01:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![add](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@add](https://discourse.processing.org/u/add)\
**Post date:** [November 14, 2022, 9:01pm UTC](https://discourse.processing.org/t/lines-spin-animation/39711/1 "2022-11-14T21:01:53Z")

</div>

hi! who knows why my lines are distorted after a few seconds after running, even if from the beginning everything works correctly? Thank you in advance

```auto
float a,b;
void setup() {
  size(100,100);
 frameRate= 30;
}

void draw() {
  background(255);
 line(0, a, width, a); //sus orizontal 
  a = a+1;
  if (a>height) { 
    a = 0; }
    
    line(0,b,width,b);//jos orizontal
    b=b-1;
    if(b<0){
      b=100;}
   
    line (a,0,a,height);//st
    a=a+1;
    if(a>width){
      a=0;
    }
  line(b,0,b,height);//dr
  b=b-1;
  if(b>width){
  b=100;}
  
  line(a,0,width,a);
  line(width,a,b,height);
  line(b,height,0,b);
  line(0,b,a,0);
    
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 14, 2022, 9:57pm UTC](https://discourse.processing.org/t/lines-spin-animation/39711/2 "2022-11-14T21:57:33Z")

</div>

a and b are both duplicates.

Maybe this is distorting things?

---

<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:** [November 15, 2022, 12:28am UTC](https://discourse.processing.org/t/lines-spin-animation/39711/3 "2022-11-15T00:28:46Z")

</div>

Hello @add,

This will not change the frameRate:

> [@add](#):
>
> `frameRate= 30;`

Reference:  
[https://processing.org/reference/frameRate\_.html](https://processing.org/reference/frameRate_.html) \< Use this.  
[https://processing.org/reference/frameRate.html](https://processing.org/reference/frameRate.html)

---

<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:** [November 15, 2022, 10:50am UTC](https://discourse.processing.org/t/lines-spin-animation/39711/4 "2022-11-15T10:50:18Z")

</div>

Hello @add,

Try using 4 variables for each side; you may then see opportunities to simplify such as common variables (counters).

One you have progressed consider just one variable:

```auto
int a;

void setup()
  {
  size(300, 300);
  }
  
void draw()
  {
  background(255);
  
  if (a>height) 
    { 
    a = 0; 
    }

  strokeWeight(20);
  stroke(255, 0, 0);

// 4 points
  point(a, 0);
  point(width-a, height); // Goes the other way!
// Add code...

// 4 lines
// Add code...
  
  a++; // Increment end of loop if you want to start with a = 0
  }

```

I started with just points.  
Once I got the points moving as desired I added lines.

There are many ways to do this… work through it and you will progress with time.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/c/ccc931a1963d356236342b68fbee1efa2bfb70f9.png)

`:)`