Click the link or highlight the code and copy it.
Then, go to p5js.org and paste the code in the editor.
Hit the "run" button, watch what happens.
Make adjustments to the code, the hit the "run" button again.
Repeat. :)
function setup() {
createCanvas(800, 600);
background(220);
noStroke();
}
function draw() {
background(220);
fill(255);
ellipse(400, 300, 100, 100); // Earth
fill(255, 0, 0);
ellipse(400 + 100 * cos(frameCount * 0.01), 300 + 100 * sin(frameCount * 0.01), 20, 20); // Moon
// Add stars to the background
for (let i = 0; i < 100; i++) {
fill(255);
ellipse(random(width), random(height), 2, 2);
}
// Add a label for the Earth and Moon
fill(0);
textSize(16);
text('Earth', 400 - 20, 300 - 10);
text('Moon', 400 + 100 * cos(frameCount * 0.01) - 10, 300 + 100 * sin(frameCount * 0.01) - 10);
// Add a title to the top
fill(0);
textSize(24);
text('Moon Orbit Simulation', 400 - 100, 20);
}