Hi. See solar system brief below, followed by Javascript code. I am using VS code, p5.js library and then brackets extension in VS code.

Question. How do I get step 2 right - having earth rotating around the sun? I think I need to create a nested transformation within sun? Not sure

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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: 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.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

// sketch.js

var speed;

function setup() {

createCanvas(900, 700);

}

function draw() {

background(0);

speed = frameCount;

// draw the sun

push(); // save current transform state

translate(width/2, height/2); // move origin to center of canvas

rotate(radians(speed / 3)); // rotate around the origin based on its speed

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

pop();

// draw the earth

push(); // save current transform state

translate(300, 0); // move the earth to its orbit around the sun

rotate(radians(speed)); // rotate the earth around its own axis

celestialObj(color(0, 0, 255), 80); // draw the earth

pop(); // restore previous transform state

// draw the moon

push(); // save current transform state

translate(300, 0); // move the moon to the earth's orbit

rotate(radians(-speed * 2)); // rotate the moon around its own axis in the opposite direction of the earth's rotation

translate(100, 0); // move the moon to its orbit around the earth

celestialObj(color(255, 255, 255), 30); // draw the moon

pop(); // restore previous transform state

// draw the asteroid

push(); // save current transform state

translate(300, 0); // move the asteroid to the moon's orbit

rotate(radians(speed * 4)); // rotate the asteroid around its own axis in the opposite direction of the moon's rotation

translate(100, 0); // move the asteroid to its orbit around the moon

celestialObj(color(139, 69, 19), 20); // draw the asteroid

pop(); // restore previous transform state

}

function celestialObj(c, size){

strokeWeight(5);

fill(c);

stroke(0);

ellipse(0, 0, size, size);

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

}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

// index.html