Bone Builder Game

{"name":"Bone Builder Game","description":"Build and link bones together in this fun and interactive game! Customize the size and color of your bones and see how they interact with each other.","photo":null,"view_count":7,"fork_count":0,"expires_at":null,"created_at":"2024-05-01T19:21:48.498041Z","updated_at":"2024-05-01T20:28:54.433393Z","user_id":60,"status":"PUBLIC","parent_id":null,"id":1310,"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":"// Bone class definition\nclass Bone {\n constructor(x, y, width, height) {\n this.position = createVector(x, y); // The center of mass\n this.width = width;\n this.height = height;\n this.velocity = createVector(0, 0);\n this.rotation = 0;\n this.angularVelocity = 0;\n this.gravity = createVector(0, 0.1);\n this.mass = 1;\n this.momentOfInertia = (this.mass * (this.width ** 2 + this.height ** 2)) / 12;\n this.dragOffset = createVector(0, 0);\n this.isDragging = false;\n }\n\n applyGravity() {\n this.velocity.add(this.gravity);\n }\n\n update() {\n this.applyGravity();\n\n if (!this.isDragging) {\n this.position.add(this.velocity);\n this.rotation += this.angularVelocity;\n\n // Ground collision detection\n let lowestPoint = this.position.y + this.height / 2 * abs(cos(this.rotation));\n if (lowestPoint >= windowHeight) {\n this.position.y = windowHeight - this.height / 2 * abs(cos(this.rotation));\n this.velocity.y *= -0.5; // Simulate bounce\n this.velocity.x *= 0.5; // Reduce horizontal speed\n \n // Adjust angular velocity based on the bone's orientation\n if (abs(this.rotation) % PI < PI / 4 || abs(this.rotation) % PI > 3 * PI / 4) {\n // Edges are hitting, induce rotation\n this.angularVelocity += (this.rotation > 0 ? -1 : 1) * 0.05;\n } else {\n // Flat sides are hitting, reduce rotation\n this.angularVelocity *= -0.5;\n }\n\n // Stop rotation if too slow, simulating friction stopping the bone\n if (abs(this.angularVelocity) < 0.01) {\n this.angularVelocity = 0;\n }\n }\n } else { // If dragging\n this.position.x = mouseX + this.dragOffset.x;\n this.position.y = mouseY + this.dragOffset.y;\n }\n }\n\n display() {\n push();\n translate(this.position.x, this.position.y); // Move to the center of mass\n rotate(this.rotation); // Apply rotation\n rectMode(CENTER); // Draw from the center\n fill(255); // White color for the bone\n stroke(0); // Black stroke color\n rect(0, 0, this.width, this.height); // Draw the rectangle\n pop();\n }\n\n containsPoint(px, py) {\n let d = dist(px, py, this.position.x, this.position.y);\n return d < Math.max(this.width, this.height);\n }\n\n // Called when the mouse is pressed\n startDrag() {\n if (this.containsPoint(mouseX, mouseY)) {\n this.isDragging = true;\n // Calculate the offset from the center of mass to the mouse position\n this.dragOffset.x = this.position.x - mouseX;\n this.dragOffset.y = this.position.y - mouseY;\n }\n }\n\n // Called when the mouse is dragged\n drag() {\n if (this.isDragging) {\n // Update the position based on the mouse position plus the offset\n this.position.x = mouseX + this.dragOffset.x;\n this.position.y = mouseY + this.dragOffset.y;\n }\n }\n\n // Called when the mouse is released\n stopDrag() {\n this.isDragging = false;\n }\n}\n\n// Setup and draw functions remain unchanged\nlet bones = [];\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n // Example bone creation\n bones.push(new Bone(200, 100, 80, 20));\n}\n\nfunction draw() {\n background(220);\n for (let bone of bones) {\n bone.update()\n bone.display();\n }\n}\n\nfunction mousePressed() {\n for (let bone of bones) {\n bone.startDrag();\n }\n}\n\nfunction mouseDragged() {\n for (let bone of bones) {\n bone.drag();\n }\n}\n\nfunction mouseReleased() {\n for (let bone of bones) {\n bone.stopDrag();\n }\n}","style.css":"","index.html":"\n\n\n \n \n Bone Builder Game\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"code_id":74464,"input_tokens":null,"id":39807,"project_id":1310,"sender":"human","message":"Let's get started!","created_at":"2024-05-01T19:21:50.726200Z","output_tokens":null},{"deleted":0,"code_id":74464,"input_tokens":null,"id":39808,"project_id":1310,"sender":"ai","message":"```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(220);\n let boneWidth = prompt(\"Enter bone width:\", 50);\n let boneHeight = prompt(\"Enter bone height:\", 100);\n drawBone(boneWidth, boneHeight);\n}\n\nfunction drawBone(width, height) {\n fill('white'); // Color of the bone\n stroke('black'); // Border color of the bone\n rect(50, 50, width, height); // Draws the bone\n}\n```\n\n- The `setup` function now includes prompts to ask the user for the width and height of a bone, storing the responses in `boneWidth` and `boneHeight`.\n- A new function `drawBone` is defined, which takes width and height as parameters and draws a rectangle using these dimensions to represent the bone.\n- The `drawBone` function is called within `setup`, passing the user-provided dimensions to visualize the bone on the canvas.","created_at":"2024-05-01T19:21:50.733707Z","output_tokens":null},{"deleted":0,"code_id":74466,"input_tokens":null,"id":39809,"project_id":1310,"sender":"human","message":"just make the bones 10 pixels by 100 pixels for now","created_at":"2024-05-01T19:22:17.621223Z","output_tokens":null},{"deleted":0,"code_id":74466,"input_tokens":null,"id":39810,"project_id":1310,"sender":"ai","message":"```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(220);\n drawBone(10, 100); // Set bone size to 10x100 pixels\n}\n\nfunction drawBone(width, height) {\n fill('white'); // Color of the bone\n stroke('black'); // Border color of the bone\n rect(50, 50, width, height); // Draws the bone\n}\n```\n\n- Adjusted the `setup` function to directly call `drawBone` with a width of 10 pixels and a height of 100 pixels, removing the prompts for user input.\n- The `drawBone` function remains unchanged, as it already accepts width and height parameters to draw the bone.\n- This directly sets the size of the bone to be drawn without needing user input, making the bone consistently 10 pixels by 100 pixels.","created_at":"2024-05-01T19:22:17.628152Z","output_tokens":null},{"deleted":0,"code_id":74473,"input_tokens":null,"id":39811,"project_id":1310,"sender":"human","message":"let's make a bone class that also has a center of mass and velocity, acceleration, and angular v/a properties","created_at":"2024-05-01T19:24:12.348146Z","output_tokens":null},{"deleted":0,"code_id":74473,"input_tokens":null,"id":39812,"project_id":1310,"sender":"ai","message":"```javascript\nclass Bone {\n constructor(width, height) {\n this.width = width;\n this.height = height;\n this.centerOfMass = createVector(width / 2, height / 2);\n this.velocity = createVector(0, 0);\n this.acceleration = createVector(0, 0);\n this.angularVelocity = 0;\n this.angularAcceleration = 0;\n }\n\n display() {\n fill('white');\n stroke('black');\n rect(50, 50, this.width, this.height);\n }\n\n update() {\n this.velocity.add(this.acceleration);\n this.centerOfMass.add(this.velocity);\n this.angularVelocity += this.angularAcceleration;\n // Reset acceleration each frame\n this.acceleration.mult(0);\n this.angularAcceleration = 0;\n }\n}\n```\n\n- The `Bone` class is designed to represent a bone with physical properties like width, height, center of mass, velocity, acceleration, angular velocity, and angular acceleration.\n- The `constructor` initializes these properties. The center of mass is set based on the bone's dimensions, assuming the top-left corner as the origin. Velocity and acceleration vectors start at 0. Angular velocity and acceleration are also initialized to 0.\n- `display` method is responsible for drawing the bone on the canvas using the `rect` function, with its position fixed at `50, 50` for now.\n- `update` method updates the bone's physical properties each frame. It adds acceleration to velocity and velocity to the center of mass for both linear and angular movements. Accelerations are reset at the end of each update to prevent continuous acceleration without further force applied.","created_at":"2024-05-01T19:24:12.354070Z","output_tokens":null},{"deleted":0,"code_id":74475,"input_tokens":null,"id":39813,"project_id":1310,"sender":"human","message":"now display and update for each bone in draw","created_at":"2024-05-01T19:24:54.595195Z","output_tokens":null},{"deleted":0,"code_id":74475,"input_tokens":null,"id":39814,"project_id":1310,"sender":"ai","message":"```javascript\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(220);\n bone = new Bone(10, 100); // Create a new Bone object\n}\n\nfunction draw() {\n background(220); // Clear the screen for redrawing\n bone.update(); // Update bone's physics properties\n bone.display(); // Draw the bone\n}\n```\n\n- Modified `setup` to create a `Bone` object with a fixed size of 10x100 pixels instead of directly calling a `drawBone` function.\n- Added a `draw` function that continuously clears the canvas and redraws the bone at its updated position each frame. This allows the bone to be animated based on its physical properties.\n- The `draw` function calls `update` on the bone to adjust its position according to its velocity and acceleration, then calls `display` to redraw the bone at its new position.","created_at":"2024-05-01T19:24:54.601481Z","output_tokens":null},{"deleted":0,"code_id":74481,"input_tokens":null,"id":39817,"project_id":1310,"sender":"human","message":"give bone class inputs for starting pos","created_at":"2024-05-01T19:26:01.383738Z","output_tokens":null},{"deleted":0,"code_id":74481,"input_tokens":null,"id":39818,"project_id":1310,"sender":"ai","message":"```javascript\nclass Bone {\n constructor(width, height, x, y) {\n this.width = width;\n this.height = height;\n this.position = createVector(x, y); // Starting position\n this.centerOfMass = this.position.copy().add(createVector(width / 2, height / 2));\n this.velocity = createVector(0, 0);\n this.acceleration = createVector(0, 0);\n this.angularVelocity = 0;\n this.angularAcceleration = 0;\n }\n\n display() {\n fill('white');\n stroke('black');\n rect(this.position.x, this.position.y, this.width, this.height);\n }\n\n update() {\n this.velocity.add(this.acceleration);\n this.position.add(this.velocity);\n this.angularVelocity += this.angularAcceleration;\n // Reset acceleration each frame\n this.acceleration.mult(0);\n this.angularAcceleration = 0;\n }\n}\n```\n\n- Added `x` and `y` parameters to the `Bone` constructor for specifying the starting position of the bone.\n- Updated the `position` property to use these `x` and `y` values, creating a `p5.Vector` for position handling.\n- Adjusted the `centerOfMass` calculation to account for the new dynamic starting position by adding the starting position vector to the half-dimension vector.\n- The `display` method now uses `this.position.x` and `this.position.y` to draw the bone at its updated position.\n- The `update` method modifies the `position` vector directly, allowing the bone to move based on its velocity.","created_at":"2024-05-01T19:26:01.389396Z","output_tokens":null},{"deleted":0,"code_id":74485,"input_tokens":null,"id":39819,"project_id":1310,"sender":"human","message":"make bones draggable","created_at":"2024-05-01T19:30:16.721372Z","output_tokens":null},{"deleted":0,"code_id":74485,"input_tokens":null,"id":39820,"project_id":1310,"sender":"ai","message":"To make the bones draggable, we need to update the `Bone` class to include functionality for detecting mouse interaction and then modifying the bone's position based on mouse movement. We'll add methods to handle mouse press, drag, and release actions.\n\nFirst, we add a method to check if the mouse is over a bone. Then, we update the `setup` and `draw` functions in `script.js` to handle mouse interactions.\n\n### Step 1: Update the Bone Class\nAdd methods to the `Bone` class for detecting mouse interactions and moving the bone.\n\n```javascript\nclass Bone {\n constructor(width, height, x, y) {\n this.width = width;\n this.height = height;\n this.position = createVector(x, y);\n this.centerOfMass = this.position.copy().add(createVector(width / 2, height / 2));\n this.velocity = createVector(0, 0);\n this.acceleration = createVector(0, 0);\n this.angularVelocity = 0;\n this.angularAcceleration = 0;\n this.isDragging = false; // New property to track if the bone is being dragged\n }\n\n display() {\n fill('white');\n stroke('black');\n rect(this.position.x, this.position.y, this.width, this.height);\n }\n\n update() {\n this.velocity.add(this.acceleration);\n this.position.add(this.velocity);\n this.angularVelocity += this.angularAcceleration;\n this.acceleration.mult(0);\n this.angularAcceleration = 0;\n }\n\n // Check if the mouse is over the bone\n mouseOver() {\n return mouseX > this.position.x && mouseX < this.position.x + this.width &&\n mouseY > this.position.y && mouseY < this.position.y + this.height;\n }\n\n // Start dragging\n startDrag() {\n if (this.mouseOver()) {\n this.isDragging = true;\n this.offsetX = mouseX - this.position.x;\n this.offsetY = mouseY - this.position.y;\n }\n }\n\n // Dragging the bone\n drag() {\n if (this.isDragging) {\n this.position.x = mouseX - this.offsetX;\n this.position.y = mouseY - this.offsetY;\n }\n }\n\n // Stop dragging\n stopDrag() {\n this.isDragging = false;\n }\n}\n```\n\n### Step 2: Update `script.js` to Handle Mouse Events\nImplement mousePressed, mouseDragged, and mouseReleased functions to interact with the bones.\n\n```javascript\nfunction mousePressed() {\n bone.startDrag();\n bone2.startDrag();\n}\n\nfunction mouseDragged() {\n bone.drag();\n bone2.drag();\n}\n\nfunction mouseReleased() {\n bone.stopDrag();\n bone2.stopDrag();\n}\n```\n\n- The `mouseOver` method checks if the mouse cursor is over the bone.\n- `startDrag` initiates dragging if the mouse is over the bone, setting `isDragging` to true and calculating the offset between the mouse and the bone's top-left corner.\n- `drag` moves the bone based on the mouse's position, adjusting for the initial offset.\n- `stopDrag` stops the dragging action by setting `isDragging` to false.\n- In `script.js`, `mousePressed`, `mouseDragged`, and `mouseReleased` functions call the corresponding methods for each bone to enable dragging behavior.","created_at":"2024-05-01T19:30:16.728617Z","output_tokens":null},{"deleted":0,"code_id":74492,"input_tokens":null,"id":39825,"project_id":1310,"sender":"human","message":"now let's have the bones affected by gravity and rotate around their center of gravity. collision detection with the ground","created_at":"2024-05-01T19:32:46.390115Z","output_tokens":null},{"deleted":0,"code_id":74492,"input_tokens":null,"id":39826,"project_id":1310,"sender":"ai","message":"To have the bones affected by gravity, rotate around their center of gravity, and detect collision with the ground, we'll need to make a few updates to the `Bone` class and the `update` function. \n\nFirst, we introduce gravity and add functionality to handle rotation and collision detection.\n\n### Step 1: Update the Bone Class\n\n```javascript\nclass Bone {\n constructor(width, height, x, y) {\n this.width = width;\n this.height = height;\n this.position = createVector(x, y);\n this.centerOfMass = createVector(x + width / 2, y + height / 2);\n this.velocity = createVector(0, 0);\n this.acceleration = createVector(0, 0.1); // Gravity applied as constant acceleration downwards\n this.angularVelocity = 0;\n this.angularAcceleration = 0;\n this.isDragging = false;\n this.rotation = 0; // New property for rotation angle in radians\n }\n\n display() {\n push(); // Save current drawing settings\n translate(this.centerOfMass.x, this.centerOfMass.y); // Move the origin to the bone's center of mass\n rotate(this.rotation); // Rotate the canvas by the bone's rotation angle\n fill('white');\n stroke('black');\n rect(-this.width / 2, -this.height / 2, this.width, this.height); // Draw the bone centered on the new origin\n pop(); // Restore original drawing settings\n }\n\n update() {\n if (!this.isDragging) {\n this.velocity.add(this.acceleration);\n this.position.add(this.velocity);\n this.centerOfMass.add(this.velocity);\n this.angularVelocity += this.angularAcceleration;\n this.rotation += this.angularVelocity;\n this.checkCollision();\n }\n this.acceleration.mult(0); // Reset acceleration\n this.angularAcceleration = 0; // Reset angular acceleration\n }\n\n checkCollision() {\n let groundY = windowHeight - 10; // Position of the ground\n if (this.centerOfMass.y + this.height / 2 >= groundY) {\n this.position.y = groundY - this.height / 2 - (this.centerOfMass.y - this.position.y);\n this.centerOfMass.y = groundY - this.height / 2;\n this.velocity.y *= -0.5; // A simple bounce effect by inverting and reducing velocity\n this.angularVelocity *= -0.5; // Reduce angular velocity upon collision\n }\n }\n}\n```\n\n### How It Works:\n\n- Introduced an `acceleration` vector with a constant positive y-component to simulate gravity.\n- Added a `rotation` property to track the bone's rotation angle in radians.\n- The `display` method now uses `translate` and `rotate` to draw the bone rotated around its center of mass.\n- The `update` method applies gravity when not dragging, updates position, rotation, and checks for collision with the ground.\n- `checkCollision` detects collision with the ground, adjusts position and center of mass to prevent the bone from going below the ground, and simulates a bounce by inverting and reducing the velocity and angular velocity.\n\nThis implementation will make the bones fall due to gravity, rotate, and bounce slightly when they hit the bottom of the window, simulating a basic physical interaction with the ground.","created_at":"2024-05-01T19:32:46.395768Z","output_tokens":null},{"deleted":0,"code_id":74497,"input_tokens":null,"id":39829,"project_id":1310,"sender":"human","message":"LOG: \n🌸 p5.js says: There's an error as \"drag\" could not be called as a function (on line 23 in 1156d604-635c-4953-96e2-afc8978d07d6 [blob:https://www.jippity.pro/1156d604-635c-4953-96e2-afc8978d07d6:23:14]).\nVerify whether \"bone\" has \"drag\" in it and check the spelling, letter-casing (JavaScript is case-sensitive) and its type.\nFor more: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong","created_at":"2024-05-01T19:37:54.667410Z","output_tokens":null},{"deleted":0,"code_id":74497,"input_tokens":null,"id":39830,"project_id":1310,"sender":"ai","message":"The error messages indicate that the methods `startDrag`, `drag`, and `stopDrag` are not recognized as functions on the `bone` objects. This suggests the code attempting to call these methods was executed before the methods were defined in the `Bone` class, or there might have been an issue with how the class was updated or instantiated.\n\nGiven the provided code and the error logs, it seems that the `Bone` class definition with the `startDrag`, `drag`, and `stopDrag` methods was correctly implemented. Therefore, the issue might lie in how and when the `Bone` objects are being created and used.\n\nTo address the error, double-check the following:\n\n1. Ensure that the `Bone` class with the new methods (`startDrag`, `drag`, `stopDrag`) is fully defined before any `Bone` objects are instantiated in the `setup` function.\n2. Ensure that the class definition is not being overwritten or re-defined without these methods after the initial definition.\n3. Confirm that the script file (`script.js`) containing the `Bone` class definition is correctly linked in the HTML file and loaded before any script that attempts to use it.\n\nGiven that the initial setup should have already accounted for these considerations, let's review and confirm that the `Bone` class along with its methods is correctly defined and accessible by the time `setup()` runs. Ensure that the entire `Bone` class, including the new methods, is present and correctly spelled within your `script.js` file.\n\nIf the issue persists, ensure there are no additional JavaScript files or `