Globe Odyssey

{"name":"Globe Odyssey","description":"Embark on an epic 3D journey around the world! Explore the globe with interactive effects and learn about different continents and oceans in a fun and engaging way.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/wrkudks4micikdegidik","view_count":6,"fork_count":0,"expires_at":null,"created_at":"2024-04-06T21:12:06.707402Z","updated_at":"2024-06-07T22:37:17.705343Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":1068,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"function setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n texture(img); // Apply the Earth image as a texture\n}\n\nfunction draw() {\n background(135, 206, 235);\n rotateY(millis() / 1000); // Rotate based on elapsed time for smoother animation\n sphere(200);\n}\n\nlet img;\nlet rotationX = 0;\nlet rotationY = 0;\nlet zoom = -600;\n\nfunction preload() {\n img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Large_World_Topo_Map_2.png/1600px-Large_World_Topo_Map_2.png'); // Load a public domain image of the Earth\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n}\n\nfunction draw() {\n background(135, 206, 235);\n translate(0, 0, zoom); // Move the sphere forward or backward based on zoom\n rotateX(-rotationX);\n rotateY(-rotationY);\n texture(img);\n sphere(200);\n}\n\nfunction mouseDragged() {\n rotationY -= (mouseX - pmouseX) * 0.01; // Adjust rotation for horizontal movement\n rotationX += (mouseY - pmouseY) * 0.01; // Adjust rotation for vertical movement\n}\n\nfunction mouseWheel(event) {\n zoom += event.delta; // Zoom in or out based on the mouse wheel\n}","style.css":"","index.html":"\n\n\n \n \n Globe Odyssey\n \n\n\n \n \n\n"},"chat_history":[{"project_id":1068,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-04-06T21:12:09.068811Z","output_tokens":null,"code_id":61433,"input_tokens":null,"id":33896},{"project_id":1068,"sender":"ai","message":"```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n}\n```\n\n- `createCanvas` is called with `windowWidth` and `windowHeight` to make the canvas fill the browser window.\n- `WEBGL` is passed to enable 3D rendering.\n\n```javascript\nfunction draw() {\n background(135, 206, 235); // Set the background to a sky blue color\n rotateY(frameCount * 0.01); // Rotate the sphere around the Y-axis\n sphere(200); // Draw a sphere with a radius of 200\n}\n```\n\n- Sets the background color to sky blue in the `draw` function to give the impression of the sky.\n- Rotates the sphere around the Y-axis based on the `frameCount` to create an animation effect.\n- Draws a 3D sphere with a radius of 200 units to represent the Earth.","deleted":0,"created_at":"2024-04-06T21:12:09.074481Z","output_tokens":null,"code_id":61433,"input_tokens":null,"id":33897},{"project_id":1068,"sender":"human","message":"cool whats next","deleted":0,"created_at":"2024-04-06T21:12:26.149285Z","output_tokens":null,"code_id":61435,"input_tokens":null,"id":33898},{"project_id":1068,"sender":"ai","message":"```javascript\nfunction preload() {\n img = loadImage('earth.jpg'); // Load an image of the Earth\n}\n```\n\n- `preload` is used to load the image before the setup runs, ensuring the image is available to use immediately.\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n texture(img); // Apply the Earth image as a texture\n}\n```\n\n- The `texture` function is added to the `setup` function to apply the loaded image as a texture to all shapes drawn afterwards.\n\n```javascript\nfunction draw() {\n background(135, 206, 235);\n rotateY(millis() / 1000); // Rotate based on elapsed time for smoother animation\n sphere(200);\n}\n```\n\n- Changes the rotation in `draw` to depend on `millis()` instead of `frameCount` for smoother and consistent speed regardless of the frame rate.","deleted":0,"created_at":"2024-04-06T21:12:26.155204Z","output_tokens":null,"code_id":61435,"input_tokens":null,"id":33899},{"project_id":1068,"sender":"human","message":"ping a public repo for globe imagery, i dont have an image of the earth","deleted":0,"created_at":"2024-04-06T21:13:01.872149Z","output_tokens":null,"code_id":61436,"input_tokens":null,"id":33900},{"project_id":1068,"sender":"ai","message":"```javascript\nlet img;\n\nfunction preload() {\n img = loadImage('https://upload.wikimedia.org/wikipedia/commons/3/3d/Large_world_topo_map_2.png'); // Load a public domain image of the Earth\n}\n```\n\n- `preload` function is used to load an image of the Earth from Wikimedia Commons before the rest of the program starts. This ensures the image is ready to use when needed.\n\n```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n texture(img); // Apply the Earth image as a texture\n}\n```\n\n- The setup function is updated to include `texture(img);` which applies the loaded Earth image as a texture.\n\n```javascript\nfunction draw() {\n background(135, 206, 235);\n rotateY(millis() / 1000); // Rotate based on elapsed time for smoother animation\n sphere(200);\n}\n```\n\n- No changes from the previous instruction, ensuring the Earth texture is correctly applied and the sphere rotates smoothly over time.\n\nThis setup uses a public domain image of the Earth, providing a realistic texture for your 3D representation.","deleted":0,"created_at":"2024-04-06T21:13:01.878932Z","output_tokens":null,"code_id":61436,"input_tokens":null,"id":33901},{"project_id":1068,"sender":"human","message":"make it so I can zoom in and out and only rotate at user input ","deleted":0,"created_at":"2024-04-06T21:15:30.961993Z","output_tokens":null,"code_id":61439,"input_tokens":null,"id":33902},{"project_id":1068,"sender":"ai","message":"```javascript\nlet img;\nlet rotationY = 0;\nlet zoom = -600;\n\nfunction preload() {\n img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Large_World_Topo_Map_2.png/1600px-Large_World_Topo_Map_2.png'); // Load a public domain image of the Earth\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight, WEBGL);\n}\n\nfunction draw() {\n background(135, 206, 235);\n translate(0, 0, zoom); // Move the sphere forward or backward based on zoom\n rotateY(rotationY);\n texture(img);\n sphere(200);\n}\n\nfunction mouseDragged() {\n rotationY += (mouseX - pmouseX) * 0.01; // Rotate based on mouse horizontal movement\n}\n\nfunction mouseWheel(event) {\n zoom += event.delta; // Zoom in or out based on the mouse wheel\n}\n```\n\n- Added two global variables: `rotationY` for tracking the Y-axis rotation, and `zoom` for controlling the zoom level.\n- Removed the automatic rotation and replaced it with `rotationY`, which is modified in the `mouseDragged` function, allowing rotation only when the user drags the mouse horizontally.\n- Implemented a `mouseWheel` event function to adjust the `zoom` variable, which translates the sphere closer or further away from the camera, simulating zooming in and out.","deleted":0,"created_at":"2024-04-06T21:15:30.967983Z","output_tokens":null,"code_id":61439,"input_tokens":null,"id":33903},{"project_id":1068,"sender":"human","message":"it needs to rotate up and down so I can see the north pole","deleted":0,"created_at":"2024-04-06T21:17:17.180955Z","output_tokens":null,"code_id":61445,"input_tokens":null,"id":33904},{"project_id":1068,"sender":"ai","message":"```javascript\nlet rotationX = 0; // Initialize a variable for rotation around the X-axis\n```\n\n- Added a new global variable `rotationX` to track the rotation around the X-axis, allowing up and down movement.\n\n```javascript\nfunction draw() {\n background(135, 206, 235);\n translate(0, 0, zoom);\n rotateX(rotationX); // Apply the X-axis rotation\n rotateY(rotationY);\n texture(img);\n sphere(200);\n}\n```\n\n- Inserted `rotateX(rotationX);` in the `draw` function to apply the X-axis rotation before the Y-axis rotation. This order ensures that the sphere rotates up and down around its axis correctly.\n\n```javascript\nfunction mouseDragged() {\n rotationY += (mouseX - pmouseX) * 0.01; // Adjust rotation for horizontal movement\n rotationX += (mouseY - pmouseY) * 0.01; // Adjust rotation for vertical movement\n}\n```\n\n- Updated the `mouseDragged` function to also adjust `rotationX` based on vertical mouse movement. This change allows the user to rotate the globe up and down to view the poles by dragging the mouse vertically.","deleted":0,"created_at":"2024-04-06T21:17:17.187478Z","output_tokens":null,"code_id":61445,"input_tokens":null,"id":33905}],"assets":[{"cloudinary_id":"wrkudks4micikdegidik","name":"globe","deleted":false,"id":7019,"created_at":"2024-06-07T22:37:14.032104Z","project_id":1068,"resource_type":"image"}],"messages_sent":5,"comments":[],"steps":[{"instruction":"Create a 3D representation of the Earth with interactive effects using p5.js and WebGL.","title":"3D Globe Representation","created_at":"2024-04-06T21:12:06.713951","project_id":1068,"complete":false,"step_number":0,"updated_at":"2024-04-06T21:12:06.713953","id":5414},{"instruction":"Implement mouse input to allow users to rotate the 3D globe by clicking and dragging.","title":"Interactive Rotation","created_at":"2024-04-06T21:12:06.714011","project_id":1068,"complete":false,"step_number":1,"updated_at":"2024-04-06T21:12:06.714012","id":5415},{"instruction":"Add the ability to highlight continents when the user hovers over them with the mouse.","title":"Continent Highlight","created_at":"2024-04-06T21:12:06.714055","project_id":1068,"complete":false,"step_number":2,"updated_at":"2024-04-06T21:12:06.714055","id":5416},{"instruction":"Incorporate zoom functionality to allow users to zoom in and out of the 3D globe for a closer look.","title":"Zoom In and Out","created_at":"2024-04-06T21:12:06.714096","project_id":1068,"complete":false,"step_number":3,"updated_at":"2024-04-06T21:12:06.714096","id":5417},{"instruction":"Display information pop-ups about specific regions when the user clicks on them.","title":"Information Pop-ups","created_at":"2024-04-06T21:12:06.714146","project_id":1068,"complete":false,"step_number":4,"updated_at":"2024-04-06T21:12:06.714147","id":5418}]}