Welcome to Jippity!

{"name":"Swimming Turtles","description":"A basic Jippity project that loads images and animates them.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/zalpesd08chkqtrvfvu1","view_count":12,"fork_count":0,"expires_at":null,"created_at":"2025-08-28T23:42:46.978529Z","updated_at":"2025-08-28T23:42:46.978540Z","user_id":70,"status":"PRIVATE","parent_id":6559,"id":6754,"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":200,"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":"/*\n\n—————————— WELCOME TO JIPPITY! ——————————\nBelow you find a little code that swims a small turtle across the screen\nand allows you to control a big 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-small 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 small turtle swims.\n* Prevent the big turtle from swimming offscreen.\n* Program a more interesting background.\n* Make the small turtle chase the purple turtle.\n\n*/\n\n\nlet turtleSmall;\n\nlet turtleSmallX;\n\nlet turtleSmallY;\n\nlet turtleBig;\n\nlet turtleBigX;\n\nlet turtleBigY;\n\nlet turtleBigDirection = 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\nfunction preload() {\n turtleBig = loadImage(\"@asset('turtleBig')\");\n turtleSmall = loadImage(\"@asset('turtleSmall')\");\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 turtleSmallX = width; // Starting X coordinate for small turtle.\n turtleSmallY = height / 2; // Starting Y coordinate for small turtle.\n\n turtleBigX = width * 3 / 4 // Starting X coordinate for big turtle.\n turtleBigY = height / 3 // Starting Y coordinate for big 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 // Draw the small turtle swimming from right to left:\n // Subtract from X coordinate to move left.\n turtleSmallX -= turtleSpeed;\n // Calculate scaled size of image.\n let greenScaledWidth = turtleSmall.width * turtleScale;\n let greenScaledHeight = turtleSmall.height * turtleScale;\n // Draw the image in the right place with right size.\n image(turtleSmall, turtleSmallX, (height - greenScaledHeight) / 2, greenScaledWidth, greenScaledHeight);\n\n // If the turtle passes the left edge of the screen...\n if (turtleSmallX < 0 - greenScaledWidth) {\n // ... move it back just past the right edge.\n turtleSmallX = width + greenScaledWidth;\n }\n\n\n // Change the big turtle's coordinates using Arrow Keys/WASD.\n if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // A\n turtleBigDirection = 1; // Default direction\n turtleBigX -= turtleSpeed; // Subtract X to move left.\n }\n if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // D\n turtleBigDirection = -1; // Opposite direction\n turtleBigX += turtleSpeed; // Add X to move right.\n }\n if (keyIsDown(UP_ARROW) || keyIsDown(87)) { // W\n turtleBigY -= turtleSpeed; // Subtract Y to move up.\n }\n if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) { // D\n turtleBigY += turtleSpeed; // Add Y to move down.\n }\n\n // Scale width and height for big turtle.\n let pinkScaledWidth = turtleBig.width * turtleScale;\n let pinkScaledHeight = turtleBig.height * turtleScale;\n\n // Draw the big turtle in the right place,\n // and flip its sprite if moving to the right.\n if (turtleBigDirection === -1) { // Moving right?\n push();\n scale(-1, 1); // Horizontal flip.\n image(turtleBig, -turtleBigX - pinkScaledWidth, turtleBigY, pinkScaledWidth, pinkScaledHeight);\n pop();\n } else { // Not moving right?\n image(turtleBig, turtleBigX, turtleBigY, 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}\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":[],"assets":[{"creator":"","project_id":6754,"cloudinary_id":"abrtx8h6lghpyamp3f1o","deleted":false,"id":85224,"name":"turtleSmall","created_at":"2025-08-28T23:36:16.458723Z","resource_type":"image","tags":[]},{"creator":"","project_id":6754,"cloudinary_id":"zalpesd08chkqtrvfvu1","deleted":false,"id":85223,"name":"turtleBig","created_at":"2025-08-28T23:36:04.246844Z","resource_type":"image","tags":[]}],"messages_sent":1,"comments":[],"steps":[]}