Welcome to Jippity!

{"name":"Swimming Turtles 4-4-2025","description":"A basic Jippity project that loads images and animates them.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/b8mwisxmzcjlg6qerclx","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-04-04T21:29:05.640420Z","updated_at":"2025-04-04T21:29:05.640421Z","user_id":423,"status":"PRIVATE","parent_id":6754,"id":7160,"user":{"username":"mazej@gwu.edu","id":423,"password_hash":"$2b$12$heFKnM4ylFOFRmSKqL4xje7w1VhercD1Hu1INWPqhn28SNa3o2Huy","updated_at":"2025-03-17T05:08:48.391606Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"mazej@gwu.edu","recess_id":null,"created_at":"2025-03-17T05:08:48.391599Z","reset_token":null,"stripe_customer_id":null,"seats":0},"code":{"script.js":"/*\n\n—————————— WELCOME TO JIPPITY! ——————————\nBelow you find a little code that swims a green turtle across the screen\nand allows you to control a pink turtle with WASD or the arrow keys.\n\nThis is an example of what a student could produce in 20-30 minutes on Jippity,\nor less if they have some coding experience.\n\nThe code below is also commented (blue-green text like you are reading now)\nso that you can get an idea of how it works.\n\nPlease poke around. Feel free to edit the code, either by hand or with help from the AI.\n\nSome ideas:\n* Change the speed of the turtles.\n* Change the direction the green turtle swims.\n* Prevent the pink turtle from swimming offscreen.\n* Program a more interesting background.\n* Make the green turtle chase the purple turtle.\n\n*/\n\nlet greenTurtle;\n\nlet greenTurtleX;\n\nlet greenTurtleY;\n\nlet pinkTurtle;\n\nlet pinkTurtleX;\n\nlet pinkTurtleY;\n\nlet pinkTurtleDirection = 1;\n\n// Size magnifier for turtle images\nlet turtleScale = 0.25;\n\n// Sets speed of turtles. What if you want separate speeds for each?\nlet turtleSpeed = 2;\n\n// Angle for circular motion\nlet angle = 0; // Angle for circular motion\nlet circleRadius = 100; // Radius of the circle\n\n// Runs once before preview window loads: gets images ready.\nfunction preload() {\n pinkTurtle = loadImage(\"@asset('jippityTurtlePink')\");\n greenTurtle = loadImage(\"@asset('jippityTurtleGreen')\");\n}\n\n// Runs once as the program loads: sets up initial numbers etc.\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(100, 150, 140); // Background color in (R, G, B).\n greenTurtleX = width; // Starting X coordinate for green turtle.\n greenTurtleY = height / 2; // Starting Y coordinate for green turtle.\n\n pinkTurtleX = width * 3 / 4 // Starting X coordinate for pink turtle.\npinkTurtleY = height / 3 // Starting Y coordinate for pink turtle.\n\n // You can use the console to log messages.\n console.log(\"Hello there! This is the JavaScript console.\");\n console.log(\"Send messages to yourself here to test code, catch bugs, or sneak in easter eggs.\")\n}\n\n// Runs in a loop 60 times per second.\nfunction draw() {\n background(100, 150, 140); // Reset the background.\n\n // Update position for circular motion\n pinkTurtleX = width / 2 + circleRadius * cos(angle);\n pinkTurtleY = height / 2 + circleRadius * sin(angle);\n\n angle += 0.05; // Increase the angle for smooth rotation\n\n // Scale width and height for pink turtle.\n let pinkScaledWidth = pinkTurtle.width * turtleScale;\n let pinkScaledHeight = pinkTurtle.height * turtleScale;\n\n // Draw the pink turtle in the right place\n image(pinkTurtle, pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n\n // Draw the green turtle swimming from right to left:\n // Subtract from X coordinate to move left.\n greenTurtleX -= turtleSpeed;\n // Calculate scaled size of image.\n let greenScaledWidth = greenTurtle.width * turtleScale;\n let greenScaledHeight = greenTurtle.height * turtleScale;\n // Draw the image in the right place with right size.\n image(greenTurtle, greenTurtleX, (height - greenScaledHeight) / 2, greenScaledWidth, greenScaledHeight);\n\n // Check for collision between turtles\n if (checkCollision(pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight, greenTurtleX, greenTurtleY, greenScaledWidth, greenScaledHeight)) {\n // Move the green turtle off-screen or reset its position\n greenTurtleX = width + greenScaledWidth;\n greenTurtleY = random(height - greenScaledHeight); // Random Y position\n }\n\n // If the turtle passes the left edge of the screen...\n if (greenTurtleX < 0 - greenScaledWidth) {\n // ... move it back just past the right edge.\n greenTurtleX = width + greenScaledWidth;\n }\n\n // Change the pink turtle's coordinates using Arrow Keys/WASD.\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // A\n pinkTurtleDirection = 1; // Default direction\n pinkTurtleX -= turtleSpeed; // Subtract X to move left.\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // D\n pinkTurtleDirection = -1; // Opposite direction\n pinkTurtleX += turtleSpeed; // Add X to move right.\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // W\n pinkTurtleY -= turtleSpeed; // Subtract Y to move up.\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // D\n pinkTurtleY += turtleSpeed; // Add Y to move down.\n }\n\n // Scale width and height for pink turtle.\n pinkScaledWidth = pinkTurtle.width * turtleScale;\n pinkScaledHeight = pinkTurtle.height * turtleScale;\n\n // Draw the pink turtle in the right place,\n // and flip its sprite if moving to the right.\n if (pinkTurtleDirection === -1) { // Moving right?\n push();\n scale(-1, 1); // Horizontal flip.\n image(pinkTurtle, -pinkTurtleX - pinkScaledWidth, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n pop();\n } else { // Not moving right?\n image(pinkTurtle, pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n }\n\n // Uncomment this line when you're ready to finish up the course.\n // drawButton();\n}\n\nfunction drawButton() {\n let buttonX = 20;\n let buttonY = 20;\n let buttonWidth = 200;\n let buttonHeight = 50;\n\n fill(108, 19, 108); // Purple background\n rect(buttonX, buttonY, buttonWidth, buttonHeight, 10); // Rectangle with round corners.\n\n fill(255); // White text\n textAlign(CENTER, CENTER);\n textSize(20);\n text(\"Finish Up the Course\", buttonX + buttonWidth / 2, buttonY + buttonHeight / 2);\n\n // Check if the mouse is over the button and clicked\n if (mouseIsPressed && mouseX > buttonX && mouseX < buttonX + buttonWidth && mouseY > buttonY && mouseY < buttonY + buttonHeight) {\n // Set localStorage item\n localStorage.setItem('jippityPDFinished', 'false');\n // Construct the URL dynamically using the current host\n let dynamicURL = window.location.origin + '/professional-development';\n window.open(dynamicURL, '_blank'); // Open link in a new tab\n }\n}","style.css":"body {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}\n\n/* You can leave the default CSS file as is unless you are styling a webpage. */","index.html":"\n\n\n\n \n \n Welcome to Jippity!\n \n \n\n\n\n \n\n\n\n\n"},"chat_history":[{"code_id":230310,"deleted":0,"input_tokens":null,"id":130963,"sender":"client_script","message":"Let's get started!\n Errors:\n","project_id":7160,"created_at":"2025-04-04T22:28:46.113148Z","output_tokens":null},{"code_id":230310,"deleted":0,"input_tokens":4120,"id":130964,"sender":"ai","message":"Great! Could you tell me more about what you'd like to build or add to your current project? Are you thinking of creating a game, a website, an animation, or something else? Let me know your ideas!","project_id":7160,"created_at":"2025-04-04T22:28:46.314898Z","output_tokens":49},{"code_id":230310,"deleted":0,"input_tokens":null,"id":130965,"sender":"human","message":"I want to make the purple turtle black instead.","project_id":7160,"created_at":"2025-04-04T22:29:08.177179Z","output_tokens":null},{"code_id":230310,"deleted":0,"input_tokens":4125,"id":130966,"sender":"ai","message":"Changing the color of the pink turtle to black is definitely possible. Let's go ahead and update the necessary parts of your code to make that happen. \n\nCould you tell me if you want to just change the visual representation to use a black image instead, or do you want to use a simple geometric shape like a rectangle or circle in black instead of the pink turtle image?","project_id":7160,"created_at":"2025-04-04T22:29:08.308646Z","output_tokens":92},{"code_id":230310,"deleted":0,"input_tokens":null,"id":130967,"sender":"human","message":"Nevermind, can I make the purple turtle move in circles?","project_id":7160,"created_at":"2025-04-04T22:30:11.178261Z","output_tokens":null},{"code_id":230310,"deleted":0,"input_tokens":4128,"id":130968,"sender":"ai","message":"Certainly! We can make the pink turtle move in circles. Let's update the code to achieve that.\n\nWe'll add a circular motion to the pink turtle by using trigonometric functions to change its position over time. Here's how you can do it:\n\n```javascript\n// script.js\nlet angle = 0; // Angle for circular motion\nlet circleRadius = 100; // Radius of the circle\n\nfunction draw() {\n background(100, 150, 140); // Reset the background.\n\n // Update position for circular motion\n pinkTurtleX = width / 2 + circleRadius * cos(angle);\n pinkTurtleY = height / 2 + circleRadius * sin(angle);\n\n angle += 0.05; // Increase the angle for smooth rotation\n\n // Scale width and height for pink turtle.\n let pinkScaledWidth = pinkTurtle.width * turtleScale;\n let pinkScaledHeight = pinkTurtle.height * turtleScale;\n\n // Draw the pink turtle in the right place\n image(pinkTurtle, pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n\n // Draw the green turtle swimming from right to left:\n // Subtract from X coordinate to move left.\n greenTurtleX -= turtleSpeed;\n // Calculate scaled size of image.\n let greenScaledWidth = greenTurtle.width * turtleScale;\n let greenScaledHeight = greenTurtle.height * turtleScale;\n // Draw the image in the right place with right size.\n image(greenTurtle, greenTurtleX, (height - greenScaledHeight) / 2, greenScaledWidth, greenScaledHeight);\n\n // If the turtle passes the left edge of the screen...\n if (greenTurtleX < 0 - greenScaledWidth) {\n // ... move it back just past the right edge.\n greenTurtleX = width + greenScaledWidth;\n }\n}\n```\n\n- Introduced a new variable `angle` to keep track of the current angle for the circular motion.\n- Used `cos` and `sin` functions to calculate the new positions of the pink turtle in a circular path.\n- Adjusted `angle` incrementally to create a smooth motion.\n- The pink turtle will now move in a circle centered at the middle of the canvas with a radius defined by `circleRadius`. Adjust `circleRadius` for a bigger or smaller circle.","project_id":7160,"created_at":"2025-04-04T22:30:11.299509Z","output_tokens":518},{"code_id":230319,"deleted":0,"input_tokens":null,"id":130972,"sender":"human","message":"If the purple turtle touches the green turtle, I want the purple turtle to eat him. ","project_id":7160,"created_at":"2025-04-04T22:31:40.258711Z","output_tokens":null},{"code_id":230319,"deleted":0,"input_tokens":4294,"id":130973,"sender":"ai","message":"That sounds like a fun idea! We can detect collisions between the purple (pink in your code) turtle and the green turtle. When a collision is detected, we can remove the green turtle or change its position to simulate that it has been \"eaten.\" Let's modify the code to implement this feature.\n\n```javascript\n// script.js\nfunction draw() {\n background(100, 150, 140); // Reset the background.\n\n // Update position for circular motion\n pinkTurtleX = width / 2 + circleRadius * cos(angle);\n pinkTurtleY = height / 2 + circleRadius * sin(angle);\n\n angle += 0.05; // Increase the angle for smooth rotation\n\n // Scale width and height for pink turtle.\n let pinkScaledWidth = pinkTurtle.width * turtleScale;\n let pinkScaledHeight = pinkTurtle.height * turtleScale;\n\n // Draw the pink turtle in the right place\n image(pinkTurtle, pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n\n // Draw the green turtle swimming from right to left:\n // Subtract from X coordinate to move left.\n greenTurtleX -= turtleSpeed;\n // Calculate scaled size of image.\n let greenScaledWidth = greenTurtle.width * turtleScale;\n let greenScaledHeight = greenTurtle.height * turtleScale;\n // Draw the image in the right place with right size.\n image(greenTurtle, greenTurtleX, (height - greenScaledHeight) / 2, greenScaledWidth, greenScaledHeight);\n\n // Check for collision between turtles\n if (checkCollision(pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight, greenTurtleX, greenTurtleY, greenScaledWidth, greenScaledHeight)) {\n // Move the green turtle off-screen or reset its position\n greenTurtleX = width + greenScaledWidth;\n greenTurtleY = random(height - greenScaledHeight); // Random Y position\n }\n\n // If the turtle passes the left edge of the screen...\n if (greenTurtleX < 0 - greenScaledWidth) {\n // ... move it back just past the right edge.\n greenTurtleX = width + greenScaledWidth;\n }\n\n // Change the pink turtle's coordinates using Arrow Keys/WASD.\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // A\n pinkTurtleDirection = 1; // Default direction\n pinkTurtleX -= turtleSpeed; // Subtract X to move left.\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // D\n pinkTurtleDirection = -1; // Opposite direction\n pinkTurtleX += turtleSpeed; // Add X to move right.\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // W\n pinkTurtleY -= turtleSpeed; // Subtract Y to move up.\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // D\n pinkTurtleY += turtleSpeed; // Add Y to move down.\n }\n\n // Scale width and height for pink turtle.\n pinkScaledWidth = pinkTurtle.width * turtleScale;\n pinkScaledHeight = pinkTurtle.height * turtleScale;\n\n // Draw the pink turtle in the right place,\n // and flip its sprite if moving to the right.\n if (pinkTurtleDirection === -1) { // Moving right?\n push();\n scale(-1, 1); // Horizontal flip.\n image(pinkTurtle, -pinkTurtleX - pinkScaledWidth, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n pop();\n } else { // Not moving right?\n image(pinkTurtle, pinkTurtleX, pinkTurtleY, pinkScaledWidth, pinkScaledHeight);\n }\n\n // Uncomment this line when you're ready to finish up the course.\n // drawButton();\n}\n```\n\n```javascript\n// script.js\nfunction checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {\n // Check if the rectangles overlap\n return x1 < x2 + w2 &&\n x1 + w1 > x2 &&\n y1 < y2 + h2 &&\n y1 + h1 > y2;\n}\n```\n\n### Explanation:\n- **Collision Detection:** Added a function `checkCollision` to determine if the pink turtle intersects with the green turtle using their positions and dimensions.\n- **Green Turtle Reset:** If a collision is detected, the green turtle's position is reset to start from the right edge, simulating it being \"eaten\" and reappearing.\n- **Random Y Position:** The green turtle reappears at a random Y position to vary its movement each time it reappears.","project_id":7160,"created_at":"2025-04-04T22:31:40.388097Z","output_tokens":1021},{"code_id":230321,"deleted":0,"input_tokens":null,"id":130974,"sender":"client_script","message":"","project_id":7160,"created_at":"2025-04-04T22:33:02.969076Z","output_tokens":null},{"code_id":230321,"deleted":0,"input_tokens":null,"id":130975,"sender":"client_script","message":"","project_id":7160,"created_at":"2025-04-04T22:35:52.654712Z","output_tokens":null},{"code_id":230321,"deleted":0,"input_tokens":null,"id":130976,"sender":"client_script","message":"","project_id":7160,"created_at":"2025-04-04T22:36:04.380084Z","output_tokens":null}],"assets":[{"cloudinary_id":"b8mwisxmzcjlg6qerclx","name":"jippityTurtlePink","deleted":false,"created_at":"2025-04-04T21:29:05.647495Z","project_id":7160,"resource_type":"image","id":67635},{"cloudinary_id":"kckevqhiat7ftyumx0pp","name":"jippityTurtleGreen","deleted":false,"created_at":"2025-04-04T21:29:05.646103Z","project_id":7160,"resource_type":"image","id":67634}],"messages_sent":3,"comments":[],"steps":[]}