Function Funhouse

{"name":"Function Funhouse","description":"Explore the world of programming functions in this interactive learning experience! Dive into coding with ease as you visualize and manipulate functions using p5.js. Perfect for beginners, this project provides a dynamic playground to experiment with functions, making coding both fun and educational. Get ready to unleash your inner programmer!","photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2025-07-01T20:44:00.435541Z","updated_at":"2025-07-01T20:44:00.435542Z","user_id":679,"status":"PRIVATE","parent_id":null,"id":8664,"user":{"photo":null,"email":null,"recess_id":"777303be-403b-49f2-ad81-2fa5996b14da","created_at":"2025-06-09T22:10:39.084441Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"spy_agent","id":679,"password_hash":null,"updated_at":"2025-06-09T22:10:39.084444Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"/*\n----------------------------------------------------------------------------------------------------------------------------\n\n\n _____ _ _ _____ _ \n |_ _| | | | | | __ \\ (_) \n | | _ __ | |_ _ __ ___ | |_ ___ | |__) | __ ___ __ _ _ __ __ _ _ __ ___ _ __ ___ _ _ __ __ _ \n | | | '_ \\| __| '__/ _ \\ | __/ _ \\ | ___/ '__/ _ \\ / _` | '__/ _` | '_ ` _ \\| '_ ` _ \\| | '_ \\ / _` |\n _| |_| | | | |_| | | (_) | | || (_) | | | | | | (_) | (_| | | | (_| | | | | | | | | | | | | | | | (_| |\n |_____|_| |_|\\__|_| \\___/ \\__\\___/ |_| |_| \\___/ \\__, |_| \\__,_|_| |_| |_|_| |_| |_|_|_| |_|\\__, |\n __/ | __/ |\n |___/ |___/ \n\n __ ___ _ _ _ _ _ _ _____ ____ \n \\ \\ / (_) | | | | (_) (_) | | __ \\ |___ \\ \n \\ \\ /\\ / / _| |_| |__ | |_ _ __ _ __ _| |_ _ _ ______ | | | | __ _ _ _ __) |\n \\ \\/ \\/ / | | __| '_ \\ _ | | | '_ \\| '_ \\| | __| | | | |______| | | | |/ _` | | | | |__ < \n \\ /\\ / | | |_| | | | | |__| | | |_) | |_) | | |_| |_| | | |__| | (_| | |_| | ___) |\n \\/ \\/ |_|\\__|_| |_| \\____/|_| .__/| .__/|_|\\__|\\__, | |_____/ \\__,_|\\__, | |____/ \n | | | | __/ | __/ | \n |_| |_| |___/ |___/ \n\n\n\n----------------------------------------------------------------------------------------------------------------------------\n\n\n _______ _ ______ _ _ \n |__ __| (_) _ | ____| | | (_) \n | | ___ _ __ _ ___(_) | |__ _ _ _ __ ___| |_ _ ___ _ __ ___ \n | |/ _ \\| '_ \\| |/ __| | __| | | | '_ \\ / __| __| |/ _ \\| '_ \\/ __|\n | | (_) | |_) | | (__ _ | | | |_| | | | | (__| |_| | (_) | | | \\__ \\\n |_|\\___/| .__/|_|\\___(_) |_| \\__,_|_| |_|\\___|\\__|_|\\___/|_| |_|___/\n | | \n |_| \n\n\n----------------------------------------------------------------------------------------------------------------------------\n*/\n\n\n\n\nlet characterX; // X position of the character\nlet characterY; // Y position of the character\nlet stamina = 120; // Stamina amount\nlet staminaRegenRate = 0.2; // Stamina regeneration rate\nlet spriteFrames = []; // Array to hold individual frames of the sprite\nlet frameWidth; // Width of each sprite frame\nlet frameHeight; // Height of each sprite frame\nlet totalFrames = 4; // Total number of frames in the sprite sheet\nlet currentFrame = 0; // To keep track of the current frame to display\nlet frameCounter = 0; // Counter for frame updates\nlet characterScaleFactor = 6; // Scale factor for the character size\nconst spriteUpdateInterval = 8;\n\n\n//----------------------------------------------------------------------------------------------------------------------------\n// The preload and setup functions are called automatically at the start of the game.\n\nfunction preload() {\n sprite = loadImage(\"@asset('sprite')\");\n spritePunch = loadImage(\"@asset('spritePunch')\");\n sprite2 = loadImage(\"@asset('sprite2')\");\n sprite2Punch = loadImage(\"@asset('sprite2Punch')\");\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n noSmooth(); // Disable image smoothing\n\n // Assuming the sprite sheet is divided into 3 columns and 4 rows\n frameWidth = sprite.width / 3; // Width of each sprite frame\n frameHeight = sprite.height / 4; // Height of each sprite frame\n\n // Initialize characterX to start at the left of the screen\n characterX = frameWidth * characterScaleFactor / 2; // Center the character horizontally\n\n // Initialize characterY to rest on top of the floor\n characterY = height - 20 - (frameHeight * characterScaleFactor); // Adjust for floor height and character height\n\n // Extract frames from the sprite sheet\n for (let i = 0; i < totalFrames; i++) {\n let frame = sprite.get((3 - 1) * frameWidth, i * frameHeight, frameWidth, frameHeight);\n spriteFrames.push(frame); // Store the frames\n }\n}\n\n//----------------------------------------------------------------------------------------------------------------------------\n// The draw function is called automatically 60 times per second.\n\nfunction draw() {\n background(100, 0, 235); // Clear the canvas with the sky blue background\n handleCharacterMovement(); // Call the movement function\n drawFloor();\n drawCharacter();\n animateCharacter();\n}\n\n//----------------------------------------------------------------------------------------------------------------------------\n// This function controls how our character moves\n\nfunction handleCharacterMovement() {\n\n // Add code here\n\n}\n\n\n//----------------------------------------------------------------------------------------------------------------------------\n// These are more functions that are called from the draw() function\n\nfunction drawCharacter() {\n // Draw the character using the calculated characterY\n image(spriteFrames[currentFrame], characterX - (frameWidth * characterScaleFactor) / 2, characterY, frameWidth * characterScaleFactor, frameHeight * characterScaleFactor);\n}\n\nfunction animateCharacter() {\n\n frameCounter++;\n\n // Update the current frame for animation only if the character is moving\n if ((keyIsDown(RIGHT_ARROW) || keyIsDown(LEFT_ARROW)) && frameCounter >= spriteUpdateInterval) {\n currentFrame = (currentFrame + 1) % spriteFrames.length; // Loop through frames\n frameCounter = 0; // Reset the frame counter after updating\n } else if (!keyIsDown(RIGHT_ARROW) && !keyIsDown(LEFT_ARROW)) {\n currentFrame = 0; // Reset to the first frame if not moving\n }\n}\n\nfunction drawFloor() {\n fill(169, 169, 169); // Set the floor color to dark grey\n rect(0, height - 20, windowWidth, 20); // Draw the floor across the bottom\n}\n\n\n//----------------------------------------------------------------------------------------------------------------------------\n//-----------------------------------------------Anatomy of a Function--------------------------------------------------------\n//----------------------------------------------------------------------------------------------------------------------------\n\n/*\n The word \"function\" tells \n the computer that you are\n creating a new function.\n Just like \"let\" with variables!\n | \"myFirstFunction\" is the name of this\n | __________________ function. Just like variables have a \n | | name, so do functions!\n | |\n ▼ ▼ */\n function myFirstFunction(input) {\n /* ▲ This is where the inputs to our function live.\n |__________________ Just like ingredients in a recipe! Notice how the \n inputs are inside parentheses () */\n\n // Everything inside of the curly braces {} is the body of the function\n\n let result; // We can declare variables\n\n result = input + 1; // We can perform calculations\n\n return result; // We return the result of the calculation\n\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Function Funhouse\n \n \n \n\n\n \n\n"},"chat_history":[{"message":"","project_id":8664,"created_at":"2025-07-02T16:02:56.797153Z","output_tokens":null,"sender":"client_script","code_id":258763,"deleted":0,"input_tokens":null,"id":153829}],"assets":[],"messages_sent":1,"comments":[],"steps":[]}