# Reflection on ellipse simulation

**URL:** <https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155>\
**Category:** Coding Questions\
**Created:** [June 6, 2023, 12:09pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155 "2023-06-06T12:09:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikosliapis](https://avatars.discourse-cdn.com/v4/letter/n/3e96dc/32.png) [@nikosliapis](https://discourse.processing.org/u/nikosliapis)\
**Post date:** [June 6, 2023, 12:09pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155/1 "2023-06-06T12:09:23Z")

</div>

Hello Everyone.  
I’m trying to create a simulation for a ball bouncing in the inside surface of a ellipse.  
This is how far i’ve been,  
[https://editor.p5js.org/nikosliapis2000/sketches/\_Yx-KgwLN](https://editor.p5js.org/nikosliapis2000/sketches/_Yx-KgwLN)  
I can’t find a way to manipulate the speed of the ball to reflect correctly on the ellipse.  
I would appreciate any help you can give me.  
Thank you.

---

<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:** [June 11, 2023, 10:58am UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155/2 "2023-06-11T10:58:27Z")

</div>

see [How to bounce a ball off a randomly generated line?](https://discourse.processing.org/t/how-to-bounce-a-ball-off-a-randomly-generated-line/26379)

see [3D Programming - Weekly : Reflecting a Vector](https://3dkingdoms.com/weekly/weekly.php?a=2)

---

<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:** [June 11, 2023, 8:35pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155/3 "2023-06-11T20:35:10Z")

</div>

I tried to look into it.

Your Pythagoras is wrong, I think it should be:

```auto
      let Speed = sqrt(ballMult.x * ballMult.x + ballMult.y * ballMult.y); // Pythagoras ????
      ballMult.x = Speed * cos(angle);
      ballMult.y = Speed * sin(angle);

```

but alas, still errors.

When the 2nd reflection occurs, error. But why?

**Remark 1**

ballMult should be called ballAdd, no?

**Remark 2**

not sure here. Is this Pythagoras too?

```auto
  // calculate focuses coordinates
  let c = sqrt(a **2 - b** 2); /// ????
  focusA = { x: -c, y: 0 };
  focusB = { x: c, y: 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:** [June 11, 2023, 9:00pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155/4 "2023-06-11T21:00:23Z")

</div>

two possibilities for the error come to mind:

**first atan2**

when you run this (java flavor, you need the ide)

```auto

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

void draw() {
  // background(204);
  translate(width/2, height/2);
  float a = atan2(mouseY-height/2, mouseX-width/2);
  rotate(a);

  println(int(degrees(a)));

  if (int(degrees(a)) % 10 == 0) {
    translate(133, 0);
    fill(0);
    text (int(degrees(a)), 0, 0);
    translate(-133, 0);
  }
  fill(255);
  rect(-30, -5, 60, 10);
}

```

you can see that the result of atan2 is not as expected. Instead, you see 0 on the right (EAST)  
and in the northern area lots of negative values!!! Bad.

 ![grafik](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/3/03b7f9f168da31ef94e273c54509042d4cdd4403.png)

* * *

**Example how to compensate (work around)**

```auto

// https : // forum.processing.org/two/discussion/10474/find-angle-between-2-points

PVector centerPoint; // the fixed red point

void setup() {
  size(1200, 600);
  centerPoint = new PVector(width/2, height/2);
}

void draw() {
  background(0);

  // draw a simple cross at centerPoint
  crossAtPV(centerPoint);

  // show centerPoint in red
  ellipsePV(centerPoint);

  // get angle
  PVector mousePV = new PVector(mouseX, mouseY);
  float angle = angleBetweenPV_PV(centerPoint, mousePV);

  // show the found angle
  fill(255, 0, 0); // red
  triangleMy(angle);
  fill(255); // white
  text("Angle in radians: "+angle
    +"\nAngle in degrees: "
    +degrees(angle), 23, 23);
}

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

float angleBetweenPV_PV(PVector centerPV, PVector movingPV) {

  // calc angle : the core of the sketch

  PVector d = new PVector();

  // calc angle

  // delta
  d.x = movingPV.x - centerPV.x;
  d.y = movingPV.y - centerPV.y;
  // angle
  float angle1 = atan2(d.y, d.x);

  if (angle1 < 0) {
    angle1 = map(angle1, -PI, 0, PI, TWO_PI);
  }

  return angle1;
}

void triangleMy(float ang) {

  pushMatrix();

  translate(centerPoint.x, centerPoint.y);

  rotate(ang);

  // fill(255); // white shield
  triangle(60, 0,
    80, -30,
    80, 30);

  popMatrix();
}

void ellipsePV(PVector pv) {
  fill(255, 0, 0); // red
  ellipse(pv.x, pv.y, 10, 10);
}

void crossAtPV(PVector pv) {
  stroke(255);
  line(pv.x, 0, pv.x, height);
  line(0, pv.y, width, pv.y);
}
//

```

**Second**

other reason might be, when the ball is still in the reverse zone and you do a double reverse which kicks the ball out of the ellipse. Bad.

---

<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:** [July 22, 2023, 3:47pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155/5 "2023-07-22T15:47:08Z")

</div>

> [@Chrisir](#):
>
> Your Pythagoras is wrong, I think it should be:
> 
> ```auto
> let Speed = sqrt(ballMult.x * ballMult.x + ballMult.y * ballMult.y); // Pythagoras ????
> ballMult.x = Speed * cos(angle);
> ballMult.y = Speed * sin(angle);
> 
> ```

This works fine on p5.js in Chrome browser:

```auto
  let a = 2
  let b = 3
  let c = (a **2 + b** 2);
  console.log(c);

```

There is an error in the Processing 4.2 IDE in p5.js mode:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/2/72479e5a8d5e5fccc7fea0133609fa8088873fc0.png)

Reference:

> **[Exponentiation (\*\*) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation)**
>
> The \*\*exponentiation (\*\*)\*\* operator returns the result of raising the first operand to the power of the second operand. It is equivalent to Math.pow(), except it also accepts BigInts as operands.

`:)`

---

<div class="post-metadata">

**Author:** ![adrinalino](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@adrinalino](https://discourse.processing.org/u/adrinalino)\
**Post date:** [August 22, 2023, 1:06pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155/6 "2023-08-22T13:06:31Z")

</div>

For reflection and refraction the best way to go is using vectors and look up the formulas for reflection and refraction. These formulas use the dot and cross product. It simplifies the math considerably.  
Cheers,  
Adrian.