Ytdyklly

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 instanciates 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 here: https://editor.p5js.org/ (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!

Thanks in advance!