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/b8mwisxmzcjlg6qerclx","view_count":4,"fork_count":1,"expires_at":null,"created_at":"2025-03-27T15:39:11.260810Z","updated_at":"2025-03-27T15:39:11.260814Z","user_id":60,"status":"PUBLIC","parent_id":null,"id":6559,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"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\n\nlet greenTurtle;\n\nlet greenTurtleX;\n\nlet greenTurtleY;\n\nlet pinkTurtle;\n\nlet pinkTurtleX;\n\nlet pinkTurtleY;\n\nlet pinkTurtleDirection = 1;\n\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// 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.\n pinkTurtleY = 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 // 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 // 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 let pinkScaledWidth = pinkTurtle.width * turtleScale;\n let 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 window.open('https://jippity.pro/professional-development', '_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":[{"cloudinary_id":"b8mwisxmzcjlg6qerclx","name":"jippityTurtlePink","deleted":false,"id":62780,"created_at":"2025-03-25T16:39:48.218087Z","project_id":6559,"resource_type":"image"},{"cloudinary_id":"kckevqhiat7ftyumx0pp","name":"jippityTurtleGreen","deleted":false,"id":62779,"created_at":"2025-03-25T16:33:52.427718Z","project_id":6559,"resource_type":"image"}],"messages_sent":19,"comments":[],"steps":[]}