Jelly Adventures

{"name":"Jelly Adventures","description":"Dive into a wobbly world of fun with Jelly Adventures! Create a delightful, bouncing jelly character using emojis and guide it through a vibrant environment. Control the jelly with easy keyboard inputs and navigate through challenging obstacles. Score points by collecting items and avoid pitfalls to keep your jelly happy. Perfect for learning programming while having a blast!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/yr84u4khmfg7bljc0shp","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-08-28T20:37:55.446560Z","updated_at":"2025-08-28T20:37:55.446562Z","user_id":97,"status":"PRIVATE","parent_id":9757,"id":9771,"user":{"photo":null,"email":"leobm365@gmail.com","recess_id":"e4690172-2707-46c3-8bcb-1a2b76e418e9","created_at":"2024-05-02T18:14:08.971561Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"super_kamin","id":97,"password_hash":"$2b$12$PMJB58N8WLDuLopyknSp6.czfqNoUg9tTH9bQqK.0xzUbXRKoCWEW","updated_at":"2024-05-02T18:14:08.971564Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let redSlider;\n\nlet greenSlider;\n\nlet blueSlider;\n\nlet Engine = Matter.Engine,\n Render = Matter.Render,\n World = Matter.World,\n Bodies = Matter.Bodies,\n Constraint = Matter.Constraint,\n Mouse = Matter.Mouse,\n MouseConstraint = Matter.MouseConstraint;\n\nlet engine;\n\nlet world;\n\nlet jelly = [];\n\nlet frame = [];\n\nlet detailSlider;\n\nlet sound;\n\nlet selectedJelly = null;\n\nfunction preload() {\n sound = loadSound(\"@asset('jelly_drop')\"); // Load the jelly_drop sound asset\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n engine = Engine.create();\n world = engine.world;\n\n detailSlider = select('#detailSlider'); // Get the detail slider element\n detailSlider.input(updateJelly); // Call updateJelly when the slider value changes\n\n // Initialize color sliders\n redSlider = select('#redSlider');\n greenSlider = select('#greenSlider');\n blueSlider = select('#blueSlider');\n\n createJelly(); // Create initial jelly structure\n createFrame();\n\n // Add mouse control\n let mouse = Mouse.create(canvas.elt);\n let options = {\n mouse: mouse,\n constraint: {\n stiffness: 0.2\n }\n };\n let mouseConstraint = MouseConstraint.create(engine, options);\n World.add(world, mouseConstraint);\n\n Engine.run(engine);\n}\n\nfunction draw() {\n background(0); // Set the background to black\n\n // Get RGB values from sliders\n let r = redSlider.value();\n let g = greenSlider.value();\n let b = blueSlider.value();\n\n // Draw the jelly with the selected color\n for (let i = 0; i < jelly.length; i++) {\n let body = jelly[i];\n fill(r, g, b); // Set color based on RGB sliders\n noStroke(); // Remove the outline\n rect(body.position.x, body.position.y, 10, 10); // Draw smaller cubes\n }\n\n // Draw the frame\n fill(0); // Frame color\n for (let i = 0; i < frame.length; i++) {\n let body = frame[i];\n rect(body.position.x, body.position.y, body.bounds.max.x - body.bounds.min.x, body.bounds.max.y - body.bounds.min.y);\n }\n}\n\nfunction createFrame() {\n let thickness = 20; // Thickness of the frame\n // Bottom wall\n let bottomWall = Bodies.rectangle(width / 2, height + thickness / 2, width, thickness, { isStatic: true });\n frame.push(bottomWall);\n World.add(world, bottomWall);\n\n // Top wall\n let topWall = Bodies.rectangle(width / 2, -thickness / 2, width, thickness, { isStatic: true });\n frame.push(topWall);\n World.add(world, topWall);\n\n // Left wall\n let leftWall = Bodies.rectangle(-thickness / 2, height / 2, thickness, height, { isStatic: true });\n frame.push(leftWall);\n World.add(world, leftWall);\n\n // Right wall\n let rightWall = Bodies.rectangle(width + thickness / 2, height / 2, thickness, height, { isStatic: true });\n frame.push(rightWall);\n World.add(world, rightWall);\n}\n\nfunction updateJelly() {\n createJelly(); // Re-create the jelly when the slider value changes\n}\n\nfunction createJelly() {\n // Clear previous jelly bodies\n jelly.forEach(body => World.remove(world, body));\n jelly = [];\n\n let detail = detailSlider.value(); // Get the current value of the slider\n let size = Math.max(10, 200 / detail); // Calculate size based on detail, ensuring it's at least 10\n\n let cols = detail; // Number of columns based on the slider value\n let rows = detail; // Number of rows is the same as columns\n\n // Center jelly based on total width and height\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n let body = Bodies.rectangle((width - 200) / 2 + i * size, (height - 200) / 2 + j * size, size, size);\n jelly.push(body);\n World.add(world, body);\n\n if (i > 0) {\n let constraint = Constraint.create({\n bodyA: jelly[j + i * rows],\n bodyB: jelly[j + (i - 1) * rows],\n length: size,\n stiffness: 0.5\n });\n World.add(world, constraint);\n }\n\n if (j > 0) {\n let constraint = Constraint.create({\n bodyA: jelly[j + i * rows],\n bodyB: jelly[j - 1 + i * rows],\n length: size,\n stiffness: 0.5\n });\n World.add(world, constraint);\n }\n }\n }\n}\n\nfunction mousePressed() {\n // Check if the mouse is over any jelly squares\n for (let i = 0; i < jelly.length; i++) {\n let body = jelly[i];\n let size = 10; // Size of each jelly square\n if (mouseX > body.position.x - size / 2 && mouseX < body.position.x + size / 2 &&\n mouseY > body.position.y - size / 2 && mouseY < body.position.y + size / 2) {\n selectedJelly = body; // Set the selected jelly to the one clicked\n sound.stop(); // Stop the sound if it is playing\n sound.play(); // Play the sound\n break; // Exit the loop once we find a jelly square\n }\n }\n}\n\nfunction mouseDragged() {\n if (selectedJelly) {\n // Update the position of the selected jelly square to follow the mouse\n Matter.Body.setPosition(selectedJelly, { x: mouseX, y: mouseY });\n }\n}\n\nfunction mouseReleased() {\n selectedJelly = null; // Clear the selected jelly when the mouse is released\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }\r\n\r\n/* Style for the detail slider */\r\n#detailSlider {\r\n -webkit-appearance: none; /* Remove default styling */\r\n appearance: none;\r\n width: 200px; /* Set the width */\r\n height: 10px; /* Set the height */\r\n background: orange; /* Set the track color to orange */\r\n border-radius: 5px; /* Rounded corners */\r\n}\r\n\r\n/* Style for the slider thumb */\r\n#detailSlider::-webkit-slider-thumb {\r\n -webkit-appearance: none; /* Remove default styling */\r\n appearance: none;\r\n width: 20px; /* Set the width of the thumb */\r\n height: 20px; /* Set the height of the thumb */\r\n background: #fff; /* Set thumb color to white */\r\n border: 2px solid orange; /* Border color to match slider */\r\n border-radius: 50%; /* Make the thumb circular */\r\n cursor: pointer; /* Change cursor to pointer */\r\n}\r\n\r\n#detailSlider::-moz-range-thumb {\r\n width: 20px; /* Set the width of the thumb */\r\n height: 20px; /* Set the height of the thumb */\r\n background: #fff; /* Set thumb color to white */\r\n border: 2px solid orange; /* Border color to match slider */\r\n border-radius: 50%; /* Make the thumb circular */\r\n cursor: pointer; /* Change cursor to pointer */\r\n}","index.html":"\n\n\n\n\n \n \n Jelly Adventures\n \n \n \n \n \n\n\n\n \n \n \n \n \n\n\n"},"chat_history":[{"code_id":279774,"deleted":0,"sender":"client_script","input_tokens":null,"id":169176,"message":"Let's get started!\n Errors:\n","project_id":9771,"created_at":"2025-08-28T20:38:00.836130Z","output_tokens":null},{"code_id":279774,"deleted":0,"sender":"ai","input_tokens":4505,"id":169177,"message":"Great! Can you tell me more about your project idea? What kind of project are you working on, and what would you like to add or improve?","project_id":9771,"created_at":"2025-08-28T20:38:01.074172Z","output_tokens":34},{"code_id":279774,"deleted":0,"sender":"human","input_tokens":null,"id":169178,"message":"explain everything about this code","project_id":9771,"created_at":"2025-08-28T20:39:24.347482Z","output_tokens":null},{"code_id":279774,"deleted":0,"sender":"ai","input_tokens":4505,"id":169179,"message":"Certainly! Let's break down the code into different parts for better understanding:\n\n### Overview\nThis code creates an interactive visual project using p5.js and Matter.js. The project features a \"jelly\" structure that can be manipulated through mouse interactions, and its appearance can be adjusted using sliders.\n\n### HTML Structure\n```html\n\n\n\n \n \n Jelly Adventures\n \n \n \n \n\n\n \n \n \n \n \n\n\n```\n- Includes p5.js for drawing and sound, and Matter.js for physics.\n- Uses sliders to adjust the detail and color of the jelly structure.\n- Loads the JavaScript code from `script.js`.\n\n### JavaScript Code (`script.js`)\n#### Global Variables\n- **Sliders**: `redSlider`, `greenSlider`, `blueSlider`, `detailSlider` for user interaction.\n- **Matter.js Setup**: `engine`, `world` for physics simulation.\n- **Entities**: `jelly` for the structure, `frame` for boundaries.\n- **Sound**: `sound` for playing a sound effect when interacting with jelly.\n- **Mouse Interaction**: `selectedJelly` to keep track of the jelly piece being manipulated.\n\n#### Functions\n- **`preload()`**: Loads the sound asset for interaction feedback.\n- **`setup()`**: Initializes the canvas, physics engine, sliders, jelly, and frame structures.\n- **`draw()`**: Continuously renders the jelly structure and frame, applying the selected colors from sliders.\n- **`createFrame()`**: Creates the boundary walls using Matter.js bodies.\n- **`updateJelly()`**: Recreates the jelly structure when the detail slider changes.\n- **`createJelly()`**: Constructs a grid of jelly pieces based on the slider value, connecting them with constraints.\n- **`mousePressed()`**: Detects when a jelly piece is clicked and plays a sound.\n- **`mouseDragged()`**: Allows selected jelly to follow the mouse cursor.\n- **`mouseReleased()`**: Releases the selected jelly piece.\n\n### CSS Styling (`style.css`)\n```css\nbody { margin: 0; } \ncanvas { display: block; }\n\n#detailSlider {\n appearance: none;\n width: 200px;\n height: 10px;\n background: orange;\n border-radius: 5px;\n}\n\n#detailSlider::-webkit-slider-thumb,\n#detailSlider::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background: #fff;\n border: 2px solid orange;\n border-radius: 50%;\n cursor: pointer;\n}\n```\n- Styles the sliders used for interaction.\n\n### Key Concepts\n- **p5.js**: Used for rendering graphics and handling input.\n- **Matter.js**: A 2D physics engine used for collision detection and physical simulation.\n- **Sliders**: Allow users to adjust the level of detail and color of the jelly structure dynamically.\n- **Interactivity**: Mouse events allow users to click and drag jelly pieces, providing a tactile experience.\n\nIf there's anything specific you'd like to understand further or if you have any more questions, feel free to ask!","project_id":9771,"created_at":"2025-08-28T20:39:24.445828Z","output_tokens":947},{"code_id":279774,"deleted":0,"sender":"human","input_tokens":null,"id":169220,"message":"lets try to transform this jelly into a playable character that does things by using physics instead of random aplying things","project_id":9771,"created_at":"2025-08-28T23:19:53.224332Z","output_tokens":null},{"code_id":279774,"deleted":0,"sender":"ai","input_tokens":4522,"id":169221,"message":"Sure! We can transform the jelly structure into a playable character by using Matter.js for physics and adding controls to move the jelly with the keyboard. This will involve creating a single jelly body that you can control with physics.\n\nLet's break it down into steps:\n\n1. **Create a Single Jelly Body**: Instead of multiple small jelly squares, we will create one larger body to represent the character.\n\n2. **Add Controls**: Use keyboard input to apply forces to the jelly character to make it move.\n\n3. **Adjust Physics Properties**: Fine-tune the physics properties like friction and restitution to make the character feel more like jelly.\n\n### Step 1: Create a Single Jelly Body\n\nFirst, let's modify the `createJelly` function to create a single jelly character instead of multiple squares.\n\n```javascript\n// script.js\nlet jellyBody; // Declare a single jelly body\n\nfunction createJelly() {\n // Clear previous jelly bodies\n if (jellyBody) {\n World.remove(world, jellyBody);\n }\n\n let size = 50; // Size of the jelly character\n let startX = width / 2; // Start position at the center\n let startY = height / 2;\n\n // Create a single rectangle body for the jelly character\n jellyBody = Bodies.rectangle(startX, startY, size, size, {\n restitution: 0.8, // Bounciness\n friction: 0.1\n });\n World.add(world, jellyBody);\n}\n```\n\n### Step 2: Add Controls\n\nNow, let's add some controls to move the jelly character using the arrow keys.\n\n```javascript\n// script.js\nfunction keyPressed() {\n let forceMagnitude = 0.02; // The amount of force to apply\n\n if (keyCode === LEFT_ARROW) {\n Matter.Body.applyForce(jellyBody, jellyBody.position, { x: -forceMagnitude, y: 0 });\n } else if (keyCode === RIGHT_ARROW) {\n Matter.Body.applyForce(jellyBody, jellyBody.position, { x: forceMagnitude, y: 0 });\n } else if (keyCode === UP_ARROW) {\n Matter.Body.applyForce(jellyBody, jellyBody.position, { x: 0, y: -forceMagnitude });\n } else if (keyCode === DOWN_ARROW) {\n Matter.Body.applyForce(jellyBody, jellyBody.position, { x: 0, y: forceMagnitude });\n }\n}\n```\n\n### Step 3: Draw the Jelly Character\n\nWe need to modify the `draw` function to render the single jelly character.\n\n```javascript\n// script.js\nfunction draw() {\n background(0); // Set the background to black\n\n // Get RGB values from sliders\n let r = redSlider.value();\n let g = greenSlider.value();\n let b = blueSlider.value();\n\n // Draw the jelly character with the selected color\n fill(r, g, b);\n noStroke();\n rect(jellyBody.position.x - 25, jellyBody.position.y - 25, 50, 50); // Draw the jelly as a rectangle\n\n // Draw the frame\n fill(0); // Frame color\n for (let i = 0; i < frame.length; i++) {\n let body = frame[i];\n rect(body.position.x, body.position.y, body.bounds.max.x - body.bounds.min.x, body.bounds.max.y - body.bounds.min.y);\n }\n}\n```\n\n### Explanation\n\n- **Jelly Body**: We created a single `jellyBody` using `Matter.Bodies.rectangle` to represent the character.\n- **Controls**: The `keyPressed` function applies a force to the jelly body in the direction of the arrow keys.\n- **Draw Function**: We render the jelly body as a single rectangle and adjust its position using its `position` property.\n\nPlease go ahead and add these changes to your code, and let me know if you need further assistance!","project_id":9771,"created_at":"2025-08-28T23:19:53.463682Z","output_tokens":850}],"assets":[{"project_id":9771,"creator":null,"cloudinary_id":"yr84u4khmfg7bljc0shp","deleted":false,"id":85219,"name":"slimer","created_at":"2025-08-28T20:37:55.455405Z","resource_type":"image","tags":[]},{"project_id":9771,"creator":null,"cloudinary_id":"hau1ode1jdzekzrw6trb","deleted":false,"id":85218,"name":"jelly_drop","created_at":"2025-08-28T20:37:55.453461Z","resource_type":"audio","tags":[]}],"messages_sent":2,"comments":[],"steps":[]}