Ragdoll Physics Playground

{"name":"Ragdoll Physics Playground","description":"Create an interactive playground of animated ragdoll characters with independently movable limbs and fun physics interactions.","photo":null,"view_count":11,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:50:24.033075Z","updated_at":"2025-08-06T08:50:24.033078Z","user_id":246,"status":"DELETED","parent_id":null,"id":1312,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"const points = [], sticks = [];\nlet headTarget;\n\nfunction setup() {\n canvas = createCanvas(windowWidth, windowHeight);\n let u = height / 16;\n points.push(new VerletPoint(createVector(0, u * 2))); // 0\n points.push(new VerletPoint(createVector(-u * 2, u * 3))); // 1\n points.push(new VerletPoint(createVector(u * 2, u * 3))); // 2\n points.push(new VerletPoint(createVector(-u * 1.5, u * 8))); // 3\n points.push(new VerletPoint(createVector(u * 1.5, u * 8))); // 4\n points.push(new VerletPoint(createVector(-u * 5, u * 3))); // 5\n points.push(new VerletPoint(createVector(-u * 8, u * 3))); // 6\n points.push(new VerletPoint(createVector(u * 5, u * 3))); // 7\n points.push(new VerletPoint(createVector(u * 8, u * 3))); // 8\n points.push(new VerletPoint(createVector(-u * 1.5, u * 12))); // 9\n points.push(new VerletPoint(createVector(-u * 1.5, u * 16))); // 10\n points.push(new VerletPoint(createVector(u * 1.5, u * 12))); // 11\n points.push(new VerletPoint(createVector(u * 1.5, u * 16))); // 12\n\n sticks.push(new VerletStick(points[0], points[1]));\n sticks.push(new VerletStick(points[0], points[2]));\n sticks.push(new VerletStick(points[1], points[2]));\n sticks.push(new VerletStick(points[1], points[3]));\n sticks.push(new VerletStick(points[2], points[4]));\n sticks.push(new VerletStick(points[3], points[4]));\n sticks.push(new VerletStick(points[1], points[4]));\n\n sticks.push(new VerletStick(points[1], points[5]));\n sticks.push(new VerletStick(points[5], points[6]));\n sticks.push(new VerletStick(points[2], points[7]));\n sticks.push(new VerletStick(points[7], points[8]));\n\n sticks.push(new VerletStick(points[3], points[9]));\n sticks.push(new VerletStick(points[9], points[10]));\n sticks.push(new VerletStick(points[4], points[11]));\n sticks.push(new VerletStick(points[11], points[12]));\n\n}\n\n\n\nclass VerletPoint {\n constructor(p) {\n this.setPosition(p);\n }\n\n setPosition(p) {\n this.position = p;\n this.prevPosition = this.position.copy();\n }\n\n update() {\n let temp = this.position.copy();\n this.position.add(this.getVelocity());\n this.prevPosition = temp;\n }\n\n setVelocity(v) {\n this.prevPosition = this.position.copy().sub(v);\n }\n\n getVelocity() {\n return this.position.copy().sub(this.prevPosition);\n }\n\n draw() {\n ellipse(this.position.x, this.position.y, 8, 8);\n }\n}\n\nclass VerletStick {\n constructor(a, b) {\n this.pa = a;\n this.pb = b;\n this.length = this.pa.position.dist(this.pb.position);\n }\n\n update() {\n let dist = this.pa.position.dist(this.pb.position);\n let diff = this.length - dist;\n let offset = p5.Vector.sub(this.pa.position, this.pb.position).mult(diff / dist / 2);\n this.pa.position.add(offset);\n this.pb.position.sub(offset);\n }\n\n draw() {\n let p0 = this.pa.position;\n let p1 = this.pb.position;\n line(p0.x, p0.y, p1.x, p1.y);\n }\n}\n\nfunction draw() {\n clear();\n background(131, 49, 254);\n points.forEach((p, i) => {\n p.update();\n p.position.y += 0.1;\n p.position.y = min(p.position.y, height);\n });\n\n for (let i = 0; i < 5; i++) {\n sticks.forEach((s) => {\n s.update();\n });\n }\n\n let f = (frameCount - 1) % 60;\n if (f == 0) {\n let u = height / 16;\n headTarget = createVector(random(-u * 4, u * 4), random(u * 2) + u);\n }\n\n if (f < 30) {\n points[0].position.add(headTarget.sub(points[0].position).normalize().mult(3));\n }\n\n push();\n translate(width / 2, 0);\n fill(255); stroke(0); strokeWeight(3);\n\n strokeWeight(8);\n sticks.forEach((s) => { s.draw(); });\n points.forEach((p) => { p.draw(); });\n noFill();\n ellipse(points[0].position.x, points[0].position.y, 64, 64);\n pop();\n}","style.css":"","index.html":"\n\n\n \n \n \n Ragdoll Physics Playground\n\n\n \n \n\n"},"chat_history":[{"project_id":1312,"message":"check out my new approach with verlet integration","created_at":"2024-05-01T20:49:52.826815Z","output_tokens":null,"code_id":74613,"sender":"human","deleted":0,"input_tokens":null,"id":39879},{"project_id":1312,"message":"```javascript\nfunction setup() {\n createCanvas(600, 400);\n // Initialize points\n points = [\n new VerletPoint(createVector(width / 2, height / 2)), // Center point\n new VerletPoint(createVector(width / 2 - 50, height / 2)), // Left point\n new VerletPoint(createVector(width / 2 + 50, height / 2)), // Right point\n new VerletPoint(createVector(width / 2, height / 2 - 50)), // Top point\n new VerletPoint(createVector(width / 2, height / 2 + 50)) // Bottom point\n ];\n \n // Initialize sticks\n sticks = [\n new VerletStick(points[0], points[1]), // Center to left\n new VerletStick(points[0], points[2]), // Center to right\n new VerletStick(points[0], points[3]), // Center to top\n new VerletStick(points[0], points[4]) // Center to bottom\n ];\n}\n\nfunction draw() {\n background(51);\n \n // Update and draw sticks\n for (let stick of sticks) {\n stick.update();\n stick.draw();\n }\n \n // Update and draw points\n for (let point of points) {\n point.update();\n point.constrain();\n point.draw();\n }\n}\n\nclass VerletPoint {\n constructor(position) {\n this.position = position.copy(); // Current position\n this.prevPosition = position.copy(); // Previous position\n }\n \n update() {\n let velocity = p5.Vector.sub(this.position, this.prevPosition);\n this.prevPosition = this.position.copy();\n this.position.add(velocity);\n this.position.add(createVector(0, 0.5)); // Gravity\n }\n \n constrain() {\n this.position.x = constrain(this.position.x, 0, width);\n this.position.y = constrain(this.position.y, 0, height);\n }\n \n draw() {\n fill(255);\n ellipse(this.position.x, this.position.y, 10, 10);\n }\n}\n```\n- The `setup` function initializes a simple ragdoll structure with a central point and four surrounding points connected by sticks.\n- The `draw` function updates and draws each point and stick, applying gravity to each VerletPoint by modifying its position in the `update` method.\n- The `VerletPoint` class now includes a `constrain` method to keep the points within the canvas bounds, addressing potential issues where the points could move outside the visible area.","created_at":"2024-05-01T20:49:52.832279Z","output_tokens":null,"code_id":74613,"sender":"ai","deleted":0,"input_tokens":null,"id":39880}],"assets":[],"messages_sent":5,"comments":[],"steps":[{"instruction":"Design and animate ragdoll characters with independently movable limbs.","title":"Create Ragdoll Characters","created_at":"2024-05-01T20:34:41.250719","project_id":1312,"complete":false,"step_number":0,"updated_at":"2024-05-01T20:34:41.250722","id":6989},{"instruction":"Incorporate gravity effects to make the characters' movements more realistic.","title":"Implement Gravity Effects","created_at":"2024-05-01T20:34:41.250778","project_id":1312,"complete":false,"step_number":1,"updated_at":"2024-05-01T20:34:41.250778","id":6990},{"instruction":"Enable users to control the characters' movements using the mouse.","title":"Add Mouse Control","created_at":"2024-05-01T20:34:41.250819","project_id":1312,"complete":false,"step_number":2,"updated_at":"2024-05-01T20:34:41.250820","id":6991},{"instruction":"Allow users to customize the appearance of the ragdoll characters.","title":"Customize Characters","created_at":"2024-05-01T20:34:41.250860","project_id":1312,"complete":false,"step_number":3,"updated_at":"2024-05-01T20:34:41.250860","id":6992},{"instruction":"Enable grabbing individual points on the character and hanging them, and methods to manipulate specific parts of the character, such as popping its arms up or down.","title":"Interactive Physics Interactions","created_at":"2024-05-01T20:34:41.250898","project_id":1312,"complete":false,"step_number":4,"updated_at":"2024-05-01T20:34:41.250899","id":6993},{"instruction":"Create interactive environments for the ragdoll characters to interact with.","title":"Interactive Environments","created_at":"2024-05-01T20:34:41.250936","project_id":1312,"complete":false,"step_number":5,"updated_at":"2024-05-01T20:34:41.250936","id":6994},{"instruction":"Incorporate sound effects to enhance the interactive experience.","title":"Add Sound Effects","created_at":"2024-05-01T20:34:41.250972","project_id":1312,"complete":false,"step_number":6,"updated_at":"2024-05-01T20:34:41.250973","id":6995},{"instruction":"Implement functionality to save and share the user-created ragdoll scenes.","title":"Save and Share Creations","created_at":"2024-05-01T20:34:41.251009","project_id":1312,"complete":false,"step_number":7,"updated_at":"2024-05-01T20:34:41.251010","id":6996}]}