Earth Adventure

{"name":"Earth Adventure","description":"Embark on a vibrant journey through a stylized representation of Earth! Explore various environments, interact with animated characters, and learn about our planet in a fun and engaging way. Get ready to move, discover, and score while enjoying beautiful visuals crafted with p5.js!","photo":null,"view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-12-01T14:23:48.458415Z","updated_at":"2024-12-01T14:23:48.458417Z","user_id":153,"status":"PRIVATE","parent_id":null,"id":4813,"user":{"username":"tornado","id":153,"password_hash":"$2b$12$ZLtvimou3TnRnB7DNghQJOgMcawpzD9F49JQJ3Jt13vJ1TWwTqIC2","updated_at":"2024-07-20T15:08:02.107868Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"andrei@erdani.com","recess_id":"7df146b1-7831-4ded-a18c-b3206fede167","created_at":"2024-07-20T15:08:02.107866Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"function setup() {\n createCanvas(windowWidth, windowHeight, WEBGL); // Use WEBGL for 3D rendering\n noStroke();\n}\n\nfunction draw() {\n background(135, 206, 235); // Sky blue background\n\n // Rotate the sphere for a dynamic view\n rotateY(frameCount * 0.01);\n\n // Draw the sphere\n for (let i = 0; i < 180; i += 1) {\n for (let j = 0; j < 360; j += 1) {\n let c = color(0, 0, 255); // Default water color\n\n // If we're within 30% of the sphere, change to land color\n if (random(100) < 30) {\n c = color(34, 139, 34); // Land color\n }\n\n push();\n fill(c);\n translate(sin(radians(i)) * 200, cos(radians(i)) * 200, sin(radians(j)) * 200);\n sphere(2); // Small spheres to simulate land and water\n pop();\n }\n }\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Earth Adventure\n \n \n\n\n \n\n"},"chat_history":[{"deleted":0,"code_id":186865,"input_tokens":null,"id":92651,"project_id":4813,"sender":"human","message":"earth","created_at":"2024-12-01T14:23:48.473143Z","output_tokens":null},{"deleted":0,"code_id":186865,"input_tokens":null,"id":92652,"project_id":4813,"sender":"human","message":"Let's get started!","created_at":"2024-12-01T14:23:51.357259Z","output_tokens":null},{"deleted":0,"code_id":186865,"input_tokens":null,"id":92653,"project_id":4813,"sender":"ai","message":"Great! Let's dive into building your project. Can you tell me more about your idea for this \"Earth Adventure\" project? Are you thinking of creating a game, an animation, or maybe something else? What do you want to include in it?","created_at":"2024-12-01T14:23:51.366297Z","output_tokens":null},{"deleted":0,"code_id":186866,"input_tokens":null,"id":92654,"project_id":4813,"sender":"human","message":"make a 3D sphire.Inside of it I want to see 70% water+30% land.%=percent","created_at":"2024-12-01T14:25:43.379955Z","output_tokens":null},{"deleted":0,"code_id":186866,"input_tokens":null,"id":92655,"project_id":4813,"sender":"ai","message":"To create a 3D sphere that represents Earth with 70% water and 30% land, we can use the p5.js library, specifically its 3D capabilities. Let's start by setting up a basic 3D environment and creating a sphere. Then, we'll add a simple way to represent water and land using different colors.\n\nLet's begin by updating your `script.js` to add a 3D sphere:\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL); // Use WEBGL for 3D rendering\n noStroke();\n}\n\nfunction draw() {\n background(135, 206, 235); // Sky blue background\n\n // Rotate the sphere for a dynamic view\n rotateY(frameCount * 0.01);\n\n // Draw the sphere\n for (let i = 0; i < 180; i += 1) {\n for (let j = 0; j < 360; j += 1) {\n let c = color(0, 0, 255); // Default water color\n\n // If we're within 30% of the sphere, change to land color\n if (random(100) < 30) {\n c = color(34, 139, 34); // Land color\n }\n\n push();\n fill(c);\n translate(sin(radians(i)) * 200, cos(radians(i)) * 200, sin(radians(j)) * 200);\n sphere(2); // Small spheres to simulate land and water\n pop();\n }\n }\n}\n```\n\n### How It Works:\n- **WEBGL Renderer**: `createCanvas(windowWidth, windowHeight, WEBGL);` enables 3D drawing.\n- **Rotation**: `rotateY(frameCount * 0.01);` continuously rotates the sphere for a better view.\n- **Sphere Creation**: Loops create many small spheres to simulate a larger one.\n- **Color Assignment**: Uses random chance to color sections of the sphere as land (30% chance) or water (70% by default).\n\nThis code creates a simple 3D sphere with a randomized distribution of water and land. You can adjust the percentage by changing the value in the `if (random(100) < 30)` condition. Would you like to add any other features or make further adjustments?","created_at":"2024-12-01T14:25:43.402496Z","output_tokens":null}],"assets":[],"messages_sent":3,"comments":[],"steps":[]}