Reflection on ellipse simulation

p5.js Coding Questions
1

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
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.

2

see How to bounce a ball off a randomly generated line?

see 3D Programming - Weekly : Reflecting a Vector

1 Like
3

I tried to look into it.

Your Pythagoras is wrong, I think it should be:

      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?

  // calculate focuses coordinates
  let c = sqrt(a ** 2 - b ** 2); /// ????
  focusA = { x: -c, y: 0 };
  focusB = { x: c, y: 0 };
1 Like
4

two possibilities for the error come to mind:

first atan2

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


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
grafik662×692 20 KB

Example how to compensate (work around)


// 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.

1 Like
5

This works fine on p5.js in Chrome browser:

  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
image903×522 29.7 KB

Reference:

:)

6

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.