Fuinctions Fun

{"name":"Fuinctions Fun","description":"Dive into the magical world of Fuinctions! Learn to create and manipulate visual elements using custom functions in a playful environment. Craft unique designs, animate them, and explore the endless possibilities of combining logic and creativity. Unleash your inner artist and programmer with this interactive and educational project.","photo":null,"view_count":6,"fork_count":0,"expires_at":null,"created_at":"2025-07-01T18:24:26.133941Z","updated_at":"2025-07-01T18:24:26.133942Z","user_id":679,"status":"PRIVATE","parent_id":null,"id":8663,"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\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(135, 206, 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 Fuinctions Fun\n \n \n \n\n\n \n\n"},"chat_history":[{"message":"Fuinctions","project_id":8663,"created_at":"2025-07-01T18:24:26.453121Z","output_tokens":null,"sender":"human","code_id":258736,"deleted":0,"input_tokens":null,"id":153781},{"message":"Let's get started!\n Errors:\n","project_id":8663,"created_at":"2025-07-01T18:24:31.248916Z","output_tokens":null,"sender":"client_script","code_id":258736,"deleted":0,"input_tokens":null,"id":153782},{"message":"Errors:\n%c * Tone.js v14.8.39 * ,Failed to load resource: IFRAME_REQUEST_ERROR: @asset('sprite') - Failed to construct 'Request': Failed to parse URL from @asset('sprite'),Failed to load resource: IFRAME_REQUEST_ERROR: @asset('spritePunch') - Failed to construct 'Request': Failed to parse URL from @asset('spritePunch'),Failed to load resource: IFRAME_REQUEST_ERROR: @asset('sprite2') - Failed to construct 'Request': Failed to parse URL from @asset('sprite2'),Failed to load resource: IFRAME_REQUEST_ERROR: @asset('sprite2Punch') - Failed to construct 'Request': Failed to parse URL from @asset('sprite2Punch'),\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('sprite')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server),Failed to execute 'fetch' on 'Window': Failed to parse URL from @asset('sprite'),\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('spritePunch')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server),Failed to execute 'fetch' on 'Window': Failed to parse URL from @asset('spritePunch'),\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('sprite2')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server),Failed to execute 'fetch' on 'Window': Failed to parse URL from @asset('sprite2'),\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('sprite2Punch')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server),Failed to execute 'fetch' on 'Window': Failed to parse URL from @asset('sprite2Punch')\n Errors:\n%c * Tone.js v14.8.39 * \nFailed to load resource: IFRAME_REQUEST_ERROR: @asset('sprite') - Failed to construct 'Request': Failed to parse URL from @asset('sprite')\nFailed to load resource: IFRAME_REQUEST_ERROR: @asset('spritePunch') - Failed to construct 'Request': Failed to parse URL from @asset('spritePunch')\nFailed to load resource: IFRAME_REQUEST_ERROR: @asset('sprite2') - Failed to construct 'Request': Failed to parse URL from @asset('sprite2')\nFailed to load resource: IFRAME_REQUEST_ERROR: @asset('sprite2Punch') - Failed to construct 'Request': Failed to parse URL from @asset('sprite2Punch')\n\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('sprite')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)\nFailed to execute 'fetch' on 'Window': Failed to parse URL from @asset('sprite')\n\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('spritePunch')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)\nFailed to execute 'fetch' on 'Window': Failed to parse URL from @asset('spritePunch')\n\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('sprite2')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)\nFailed to execute 'fetch' on 'Window': Failed to parse URL from @asset('sprite2')\n\n🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (@asset('sprite2Punch')) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)\nFailed to execute 'fetch' on 'Window': Failed to parse URL from @asset('sprite2Punch')","project_id":8663,"created_at":"2025-07-01T18:24:41.648561Z","output_tokens":null,"sender":"client_script","code_id":258737,"deleted":0,"input_tokens":null,"id":153783},{"message":"{\"detail\":\"Internal server error\"}","project_id":8663,"created_at":"2025-07-01T18:24:50.030790Z","output_tokens":null,"sender":"human","code_id":258737,"deleted":0,"input_tokens":null,"id":153784},{"message":"{\"detail\":\"Internal server error\"}","project_id":8663,"created_at":"2025-07-01T18:24:54.202982Z","output_tokens":null,"sender":"human","code_id":258737,"deleted":0,"input_tokens":null,"id":153785},{"message":"{\"detail\":\"Internal server error\"}","project_id":8663,"created_at":"2025-07-01T18:24:55.701273Z","output_tokens":null,"sender":"human","code_id":258737,"deleted":0,"input_tokens":null,"id":153786}],"assets":[],"messages_sent":4,"comments":[],"steps":[]}