My code below. I need to create a solar system with instructions below - see sketch for how it should look (see steps 1 - 5, below) And then add one additional idea (see step 6 below). Important is that it is in Javascript and p5.js libraries. I need to make use of transformations, nested transformations, as well as push and pop. I am using VS Code with Brackets extension.

You see a function called celestialObj() which draws any celestial object you want, whether it's the sun, a planet or a moon. It takes a color and a diameter. When you first run it, the sketch already shows the sun. There's also a variable called speed which you will use in order to rotate objects at various speeds. The variable speed is equivalent to the frameCount variable of p5js, the variable that measures how many frames have been displayed on the canvas.

Step 1: Create an earth of color blue and size 80. Move it to orbit 300 pixels. Hint: You should only use transformations to achieve this.

Step 2: Rotate the earth around the sun at velocity "speed". Make sure you use the radians() function inside the rotate() call.

Step 3: Make the earth spin around its axis at velocity "speed" too. You should now have an earth that rotates around its axis and around the sun.

Step 4: Add a moon of color white and size 30 to the earth at an orbit of 100 pixels. Make the moon rotate at velocity -speed*2 so it spins the opposite way to the way the earth rotates. Make sure that your moon, while spinning around the earth, always shows the same side to earthlings (ie earthlings should not be able to see the so-called 'dark side of the moon').

Step 5: Make the sun spin around its axis, as it really does, at a slow speed/3.

Step 6: Extend the sketch by adding one more celestial body by implementing one of the ideas for further development. (implemente idea 1)

Ideas for further development:

Idea 1: What if the moon had an asteroid that was stuck in orbit around the moon? Can you add a smaller celestial body that is rotating around the moon.

Idea 2: Pretend that earth, like Mars, has two moons. Can you add another different sized moon that rotates around the earth at a different speed with a different distance from the earth? This moon should also only show the one side to the earth.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sketch.js

XXXXXXXXXXXXXXXXXX

var speed;

function setup() {

createCanvas(900, 700);

}

function draw() {

background(0);

speed = frameCount;

push();

translate(width/2, height/2);

celestialObj(color(255,150,0), 200); // SUN

pop();

}

function celestialObj(c, size){

strokeWeight(5);

fill(c);

stroke(0);

ellipse(0, 0, size, size);

line(0, 0, size/2, 0);

}

XXXXXXXXXXXXXXXXXXXXX

index.html

XXXXXXXXXXXXXXXXXXXXXXXXXXX