I started studying Javascript about a week ago and I would like some opinions and advice on my code. This program just creates a canvas and instantiates 5 planets that orbit around a sun, giving them each a different speed, color, and size.

It uses the **p5.js** library, the code can be run in the p5.js web editor. *(You might want to expand the preview panel on the right after pasting the code, before you run the script.)*

The code is is different files(class Orbiter, extra math functions and main code) but I’ll put it here in one go:

`// Converts from degrees to radians. Math.radians = function(degrees) { return degrees * Math.PI / 180; }; // Converts from radians to degrees. Math.degrees = function(radians) { return radians * 180 / Math.PI; }; class Orbiter { constructor(rad, orbitAlt, x = 0, y = 0, orbitAngle = 0, orbitAngleMod = 1, colorR=255, colorG=255, colorB=255, colorA=255){ this.orbitAngle = orbitAngle; // Angle formed by the radius of the orbit and the x plane. this.orbitAngleMod = orbitAngleMod; // Increment/decrement of orbitAngle this.rad = rad; // Radius this.orbitAlt = orbitAlt; // Distance to the orbited object's position (Alt for altitude) // Position this.x = x; this.y = y; // Color variables this.colorR = colorR; this.colorG = colorG; this.colorB = colorB; this.colorA = colorA; } orbit(object){ this.x = object.x + this.orbitAlt * cos(Math.radians(this.orbitAngle)); this.y = object.y + this.orbitAlt * sin(Math.radians(this.orbitAngle)); this.orbitAngle = this.orbitAngle + this.orbitAngleMod; // Reset the angle to 0 after a complete revolution to avoid an ever increasing value. if(this.orbitAngle >= 360){ this.orbitAngle = 0; } } display(){ noStroke(); fill(this.colorR, this.colorG, this.colorB, this.colorA); return ellipse(this.x, this.y, this.rad, this.rad); } } let planets = []; let sun = new Orbiter(100, 0); function setup(){ createCanvas(windowWidth-3, windowHeight-3); frameRate(144); // Set up the Sun's colors and coordinates sun.colorR = 255; sun.colorG = 200; sun.colorB = 0; sun.x = windowWidth/2; sun.y = windowHeight/2; // Instantiate 5 planets for(i = 0; i < 5; i++){ planets[i] = new Orbiter(5 + i * 15, 110 + i*70); planets[i].orbitAngleMod= 1.4 - i/7; planets[i].orbitAngle= i*5; planets[i].colorR = i * 50 + 5; planets[i].colorG = 255 - planets[i].colorR; planets[i].colorB = 255 - planets[i].colorR; } } function draw(){ background(0, 10, 40); for(planet of planets){ planet.orbit(sun); planet.display(); sun.display() } } `

I’d be really grateful if you could give me some feedback on the structure of my code, whether it’s in line with Javascript best practices, or in general if there’s anything you see in there that you think is just wrong or should be written in a different way. Anything that you think could help me write better code: I don’t know what I don’t know!