# How to have line with a set length point towards a moving ellipse?

**URL:** <https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860>\
**Category:** Coding Questions\
**Created:** [October 16, 2021, 7:36am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860 "2021-10-16T07:36:45Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 16, 2021, 7:36am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/1 "2021-10-16T07:36:45Z")

</div>

how to have the line with //this line behind it, always point towards the ellipse with // this ellipse behind it, while staying 100 pixels long?

```auto
float sunx=300;
float suny=60;
int time=600;
float begx= 300;
float begy= 540;
boolean growline= false;

//--------------------------------------------------
void setup() {
  size(600, 600);
  fill(255, 230, 0);
}

//--------------------------------------------------
void draw() {
  fill(255, 230, 0);
  background(0);
  stroke(255, 230, 0);
  ellipse(sunx, suny, 50, 50); // this ellipse 
  fill(#4aff00);
  ellipse(begx, begy, 10, 10);

  if (suny<60) {
    suny=suny-10;
  }

  if (keyPressed) {
    if (key=='p') {
      time=time+10;
      if (sunx>width/2+20) {
        suny=suny+1;
      } else if (sunx<width/2-20) {
        suny--;
      } else if (sunx>width/2-20&&sunx<width/2) {
        suny= suny+0.001;
      } else if (sunx<width/2+20&&sunx>width/2) {
        suny=suny+0.001;
      }
    }
  }
  if (time>1200) {
    time=0;
  }

  sunx=time/2;

  if (growline){

 line() // this line

; {
  }
 }
  if (millis()%5==0) {
    println("works");
    strokeWeight(5);
    stroke(#4aff00);
    if(growline==false){
    growline= true;
    }
    else if(growline){
      growline= false;
    }
  }
  }

```

---

<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:** [October 16, 2021, 9:08am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/2 "2021-10-16T09:08:51Z")

</div>

Please learn how to format your code

Go back and edit your post (pen icon)

Select code and hit ctrl e

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 16, 2021, 9:12am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/3 "2021-10-16T09:12:01Z")

</div>

thanks i forgot to do that

---

<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:** [October 16, 2021, 9:37am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/4 "2021-10-16T09:37:33Z")

</div>

Look at atan in the reference please or atan2

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 16, 2021, 10:40am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/5 "2021-10-16T10:40:54Z")

</div>

how do I make a new rectangle appear every 5 seconds and have them be locked in place as soon as they are visible?

```auto
float sunx=300;
float suny=60;
int time=600;
float begx= 300;
float begy= 540;

//--------------------------------------------------
void setup() {
  size(600, 600);
  fill(255, 230, 0);
}

//--------------------------------------------------
void draw() {
  fill(255, 230, 0);
  background(0);
  stroke(255, 230, 0);
  ellipse(sunx, suny, 50, 50);
  fill(#4aff00);
  stroke(#4aff00);
  ellipse(begx, begy, 10, 10);

  if (suny<60) {
    suny=suny-10;
  }

  if (keyPressed) {
    if (key=='p') {
      time=time+10;
      if (sunx>width/2+20) {
        suny=suny+1;
      } else if (sunx<width/2-20) {
        suny--;
      } else if (sunx>width/2-20&&sunx<width/2) {
        suny= suny+0.001;
      } else if (sunx<width/2+20&&sunx>width/2) {
        suny=suny+0.001;
      }
    }
  }
  if (time>1200) {
    time=0;
  }

  sunx=time/2;

    translate(begx, begy);
    float a= atan2(suny-height/2, sunx-width/2);
    rotate(a);
    rect(5, -1, 100, 1); 
 
  if (millis()%5==0) {
    println("works");
    strokeWeight(5);
    stroke(#4aff00);
  }
}

```

---

<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:** [October 16, 2021, 11:07am UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/6 "2021-10-16T11:07:33Z")

</div>

Use an ArrayList best with a class that represents a rectangle

Then use list.add() command for the Arraylist when the timer hits 5 seconds

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 16, 2021, 1:37pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/7 "2021-10-16T13:37:52Z")

</div>

how do i turn the rectangle into a class?

---

<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:** [October 16, 2021, 5:45pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/8 "2021-10-16T17:45:44Z")

</div>

see tutorials, objects please

---

<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:** [October 16, 2021, 8:30pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/9 "2021-10-16T20:30:37Z")

</div>

example with class for rectangles (see mentioned tutorial [Objects / Processing.org](https://processing.org/tutorials/objects)) and one rectangle is added every 1,8 seconds

(both important paragraphs are at the end of `draw()`: spawn and display rectangles)

```auto
float sunx=300;
float suny=60;
int time=600;
float begx= 300;
float begy= 540;

ArrayList<MyRect> rectList = new ArrayList();  

int timer; 

//--------------------------------------------------

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

//--------------------------------------------------

void draw() {
  background(0);

  fill(255, 230, 0);
  stroke(255, 230, 0);
  ellipse(sunx, suny, 50, 50);

  fill(#4aff00);
  stroke(#4aff00);
  ellipse(begx, begy, 10, 10);

  if (suny<60) {
    suny=suny-10;
  }

  if (keyPressed) {
    if (key=='p') {
      time=time+10;
      if (sunx>width/2+20) {
        suny=suny+1;
      } else if (sunx<width/2-20) {
        suny--;
      } else if (sunx>width/2-20&&sunx<width/2) {
        suny= suny+0.001;
      } else if (sunx<width/2+20&&sunx>width/2) {
        suny=suny+0.001;
      }
    }
  }
  if (time>1200) {
    time=0;
  }

  sunx=time/2;

  translate(begx, begy);
  float a = atan2(suny-height/2, sunx-width/2);
  rotate(a);
  rect(5, -1, 100, 1); 

  if (millis()%5==0) {
    println("works");
    strokeWeight(5);
    stroke(#4aff00);
  }

  // SPAWN 
  if (millis()-timer > 1800) {
    rectList.add(new MyRect()); 
    timer = millis();
  }//

  //display
  for (MyRect currentRect : rectList) {
    currentRect.display();
  }
}

//================================

class MyRect {
  float x=random(width);
  float y=random(height);
  float s=random(11, 49);
  color c = color (random(255), random(255), random(255)); 

  // no constructor yet

  void display() {
    noStroke(); 
    fill(c); 
    rect(x, y, s, s);
  }
}//class
// 

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 19, 2021, 8:36pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/10 "2021-10-19T20:36:11Z")

</div>

thank you chris, I would also like some help on how to find the end point of the rectangle

```auto
float sunx=300;
float suny=60;
int time=600;
float begx= 300;
float begy= 540;

ArrayList<MyRect> rectList = new ArrayList();  

int timer; 

//--------------------------------------------------

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

//--------------------------------------------------

void draw() {
  background(0);

  fill(255, 230, 0);
  stroke(255, 230, 0);
  ellipse(sunx, suny, 50, 50);

  fill(#4aff00);
  stroke(#4aff00);
  ellipse(begx, begy, 10, 10);

  if (suny<60) {
    suny=suny-10;
  }

  if (keyPressed) {
    if (key=='p') {
      time=time+10;
      if (sunx>width/2+20) {
        suny=suny+1;
      } else if (sunx<width/2-20) {
        suny--;
      } else if (sunx>width/2-20&&sunx<width/2) {
        suny= suny+0.001;
      } else if (sunx<width/2+20&&sunx>width/2) {
        suny=suny+0.001;
      }
    }
  }
  if (time>1200) {
    time=0;
  }

  sunx=time/2;
  translate(begx, begy);
  float a = atan2(suny-height/2, sunx-width/2);
  rotate(a);
  rect(5, -1, 100, 1); 

  if (millis()%5==0) {
    println("works");
    strokeWeight(5);
    stroke(#4aff00);
  }

  // SPAWN 
  if (millis()-timer > 1800) {
    rectList.add(new MyRect()); 
    timer = millis();
  }//

  //display
  for (MyRect currentRect : rectList) {
    currentRect.display();
  }
}

//================================

class MyRect {

  void display() {
    rect(begx, begy, 100, 1);
  }
}//class
//

```

---

<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:** [October 19, 2021, 9:12pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/11 "2021-10-19T21:12:19Z")

</div>

> [@MoonAlien822](#):
>
> how to find the end point of the rectangle

to which lines are you referring to?

these

> [@MoonAlien822](#):
>
> ```auto
> translate(begx, begy);
> float a = atan2(suny-height/2, sunx-width/2);
> rotate(a);
> rect(5, -1, 100, 1); 
> 
> ```

?

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 19, 2021, 9:14pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/12 "2021-10-19T21:14:12Z")

</div>

> [@MoonAlien822](#):
>
> `rect(5, -1, 100, 1); `

I want to find the opposite side of this rectangle

---

<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:** [October 19, 2021, 9:37pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/13 "2021-10-19T21:37:45Z")

</div>

**Couple of remarks**

**Remark 1**

> [@MoonAlien822](#):
>
> how do I make a new rectangle appear every 5 seconds and have them be locked in place as soon as they are visible?

please note that you destroyed the class. The way you have it now means that independent rectangles can’t appear any longer in different position (every 1,8 seconds)

* * *

**Remark 2**

Also note that when you want to use translate and rotate you need to surround the paragraph with popMatrix() and pushMatrix() like here:

```auto
  sunx=time/2;
  pushMatrix(); 
  translate(begx, begy);
  float a = atan2(suny-height/2, sunx-width/2);
  rotate(a);
  rect(5, -1, 100, 1); 
  popMatrix(); 

```

NOW a 2nd green rect appears, pointing right

* * *

**Remark 3**

ALSO to get a more accurate green arrow (pointing to the sun) use begx and begy here

```auto
  float a = atan2(suny-begy, sunx-begx);  

```

**Remark 4**

> [@MoonAlien822](#):
>
> I want to find the opposite side of this rectangle

Still not sure what you mean here

Chrisir

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 19, 2021, 9:40pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/14 "2021-10-19T21:40:21Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f98f836159ce71bc86b4d5a2e7a2f8e5b727095e.png)  
this point

---

<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:** [October 19, 2021, 9:42pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/15 "2021-10-19T21:42:09Z")

</div>

```auto

  float x=cos(a)*100+begx;
  float y=sin(a)*100+begy;

  ellipse(x, y, 15, 15);

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 19, 2021, 9:53pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/16 "2021-10-19T21:53:01Z")

</div>

this is not working as expected

```auto
float sunx=300;
float suny=60;
int time=600;
float begx= 300;
float begy= 540;
float a;

ArrayList<MyRect> rectList = new ArrayList();  

int timer; 

//--------------------------------------------------

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

//--------------------------------------------------

void draw() {
  background(0);

  fill(255, 230, 0);
  stroke(255, 230, 0);
  ellipse(sunx, suny, 50, 50);

  fill(#4aff00);
  stroke(#4aff00);
  ellipse(begx, begy, 10, 10);

  if (suny<60) {
    suny=suny-10;
  }

  if (keyPressed) {
    if (key=='p') {
      time=time+10;
      if (sunx>width/2+20) {
        suny=suny+1;
      } else if (sunx<width/2-20) {
        suny--;
      } else if (sunx>width/2-20&&sunx<width/2) {
        suny= suny+0.001;
      } else if (sunx<width/2+20&&sunx>width/2) {
        suny=suny+0.001;
      }
    }
  }
  if (time>1200) {
    time=0;
  }

  sunx=time/2;
  translate(begx, begy);
  a = atan2(suny-height/2, sunx-width/2);
  rotate(a);
  rect(5, -1, 100, 1); 

  if (millis()%5==0) {
    println("works");
    strokeWeight(5);
    stroke(#4aff00);
  }

  // SPAWN 
  if (millis()-timer > 1800) {
    rectList.add(new MyRect()); 
    timer = millis();
  }//

  //display
  for (MyRect currentRect : rectList) {
    currentRect.display();
  }
}
  
//================================

class MyRect {
  
  float x=cos(a)*100+begx;
  float y=sin(a)*100-begy;

  void display() {

  rect(x, y, 15, 15);
  }
}//class
//

```

---

<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:** [October 19, 2021, 10:33pm UTC](https://discourse.processing.org/t/how-to-have-line-with-a-set-length-point-towards-a-moving-ellipse/32860/17 "2021-10-19T22:33:32Z")

</div>

what do you mean

in how far is it no working…?

I pointed out a few things

have you read them?

Did you read the tutorial on objects? You are not using the class correctly.

here is your code with the 2 lines :

```auto
  float x=cos(a)*100+begx;
  float y=sin(a)*100+begy;

```

I gotta go - bye.

**Full Code**

```auto

float sunx=300;
float suny=60;
int time=600;
float begx= 300;
float begy= 540;
float a;

ArrayList<MyRect> rectList = new ArrayList();  

int timer; 

//--------------------------------------------------

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

//--------------------------------------------------

void draw() {
  background(0);

  fill(255, 230, 0);
  stroke(255, 230, 0);
  ellipse(sunx, suny, 50, 50);

  fill(#4aff00);
  stroke(#4aff00);
  ellipse(begx, begy, 10, 10);

  if (suny<60) {
    suny=suny-10;
  }

  if (keyPressed) {
    if (key=='p') {
      time=time+10;
      if (sunx>width/2+20) {
        suny=suny+1;
      } else if (sunx<width/2-20) {
        suny--;
      } else if (sunx>width/2-20&&sunx<width/2) {
        suny= suny+0.001;
      } else if (sunx<width/2+20&&sunx>width/2) {
        suny=suny+0.001;
      }
    }
  }
  if (time>1200) {
    time=0;
  }

  pushMatrix(); 
  sunx=time/2;
  translate(begx, begy);
  a = atan2(suny-begy, sunx-begx);
  rotate(a);
  rect(5, -1, 100, 1); 
  popMatrix(); 

  float x=cos(a)*100+begx;
  float y=sin(a)*100+begy;
  fill(255, 2, 2); 
  ellipse(x, y, 22, 22);
  fill(2, 255, 2); 

  if (millis()%5==0) {
    println("works");
    strokeWeight(5);
    stroke(#4aff00);
  }

  // SPAWN 
  if (millis()-timer > 1800) {
    rectList.add(new MyRect()); 
    timer = millis();
  }//

  //display
  for (MyRect currentRect : rectList) {
    currentRect.display();
  }
}

//================================

class MyRect {
  void display() {
    rect(begx, begy, 15, 15);
  }
}//class
//

```