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

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

}
``````

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;

}
``````

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

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.

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

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

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