Can anyone explain how to change circular orbits to elliptical orbits in p5.js?

வினா
1

I’ve been working on a solar system simulation in p5.js and have successfully created a sun, earth, and moon with their respective orbits in a circular orbit. however i am struggling to change circular orbit to elliptical orbit.

let angle = 0;
function setup() {
  createCanvas(400, 400);
  frameRate(60);
  angleMode(DEGREES);
}

function draw() {
  background(220);
  translate(200,200);
  fill("orange");
  ellipse(0,0,50,50); // SUN
  
  rotate(angle);
  fill("blue");
  ellipse(0,100,50,50); // Earth
  
  const moonX = 0 + 50 * cos(angle);
  const moonY = 100 + 50 * sin(angle);
  fill("white");
  ellipse(moonX,moonY,20,20); // Moon

  angle += radians(100);
  
}

CPT2309251139-397x396

2

Hello Jothi, I managed to make a elliptical orbit for earth but i cann’t make the moon rotate the earth. I will share you the code which up to i have completed

let angle = 0;
let moonAngle = 0
function setup() {
  createCanvas(600, 600);
  frameRate(15);
  // angleMode(DEGREES);
}

function draw() {
  // background(220);
  translate(200,200);
  fill("orange");
  ellipse(0,0,50,50); // SUN
  
  fill("blue");
  const a = 110; //ellipse foci
  const e = 0.7; // eccentricity
  const radius = (a * (1- (e*e)))/(1+e*cos(angle)); // Polar Form of Ellipse
  const xellipse = radius * cos(angle);
  const yellipse = radius * sin(angle);
  const translatex = 50
  ellipse(xellipse + translatex,yellipse,50,50); // Earth
  

  angle += 0.1;
  // moonAngle += radians(200);
  
}

I have removed the rotate function and used polar to cartesian to calculate the rotation for the earth, In order to make a elliptical orbit we need to use the ellipse polar equation
which i taken from the following url, Ellipses and Elliptic Orbits
and other resource Ellipse -- from Wolfram MathWorld

3

I created a simple poc for your animation, Here is the code

let angle = 0;
let moonAngle = 0
function setup() {
  createCanvas(600, 600);
  frameRate(15);
  // angleMode(DEGREES);
}

function draw() {
  background(220);
  
  const a = 110; //ellipse foci
  const e = 0.7; // eccentricity
  const radius = (a * (1- (e*e)))/(1+e*cos(angle)); // Polar Form of Ellipse
  const xellipse = radius * cos(angle);
  const yellipse = radius * sin(angle);
  const translatex = 50
  
  push();
  translate(300,300);
  fill("orange");
  ellipse(0,0,50,50); // SUN
  
  fill("blue");
  ellipse(xellipse + translatex,yellipse,50,50); // Earth
  pop();
  
  push();
  translate(300 + xellipse + translatex,300 + yellipse);
  stroke(0);
  
  fill("white");
  const moonX = 40 * cos(moonAngle);
  const moonY = 40 * sin(moonAngle);
  // line(moonX, moonY, 10, 10)
  ellipse(moonX, moonY, 20, 20);
  pop();

  angle += 0.1;
  moonAngle += 0.35;
  
}

Basically the Earth rotation is affecting the moon so i used different angle for moon and i used push and pop function to reset the translations which is explained in the below video.

4

I believe I should study more trigonometry
can you explain this part

radius = (a * (1- (e*e)))/(1+e*cos(angle))
5

I don’t have the clear understanding on ellipse too. The equation is polar co-ordinate equation for ellipse which give us the radius r. I have taken this equation from above two links which is mentioned in my first reply. I have obtained the above animation result through trial and error, Maybe we can discuss about this in weekend

1 Like
6

:+1: