How to create an interactive solar system using P5.js.

write a p5.sketch showing the sun in the middle and the earth orbiting the sun in a circular path. Use the sample code below that generates a rotating earth sphere with points: 



let angle = 0;

let points = [];



function setup() {

 createCanvas(400, 400);

 colorMode(HSL);

 strokeWeight(2);



 // Generate points on sphere using lat/lon

 let detail = 10; // lower = more points

 for (let lat = -90; lat <= 90; lat += detail) {

 for (let lon = -180; lon <= 180; lon += detail) {

 let radLat = radians(lat);

 let radLon = radians(lon);



 // Convert spherical to Cartesian coords

 let x = cos(radLat) * cos(radLon);

 let y = cos(radLat) * sin(radLon);

 let z = sin(radLat);



 points.push({ x, y, z, lat, lon });

 }

 }

}



function draw() {

 background(9);

 translate(width / 2, height / 2);



 strokeWeight(3);



 let radius = 150;

 angle += 0.01;



 for (let pt of points) {

 // Rotate around Y axis for globe spin

 let rotatedX = pt.x * cos(angle) + pt.z * sin(angle);

 let rotatedZ = -pt.x * sin(angle) + pt.z * cos(angle);

 let rotatedY = pt.y;



 // Perspective projection (simple)

 let distance = 2;

 let zOffset = rotatedZ + distance;

 let px = (rotatedX / zOffset) * radius;

 let py = (rotatedY / zOffset) * radius;



 // Simple coloring: blue for ocean, green for land by lat/lon heuristic

 // This is a very rough approximation of continents

 let ocean = abs(pt.lat) > 60 || (pt.lon > -60 && pt.lon < 60 && pt.lat < 20);

 if (ocean) {

 stroke(210, 100, 60); // Ocean blue

 } else {

 stroke(120, 70, 40); // Land greenish

 }



 point(px, py);

 }

}