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":10,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:50:24.033075Z","updated_at":"2025-08-06T08:50:24.033078Z","user_id":60,"status":"DELETED","parent_id":null,"id":1312,"user":{"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","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},"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,"deleted":0,"code_id":74613,"sender":"human","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,"deleted":0,"code_id":74613,"sender":"ai","input_tokens":null,"id":39880}],"assets":[],"messages_sent":5,"comments":[],"steps":[{"step_number":0,"complete":false,"updated_at":"2024-05-01T20:34:41.250722","id":6989,"title":"Create Ragdoll Characters","instruction":"Design and animate ragdoll characters with independently movable limbs.","created_at":"2024-05-01T20:34:41.250719","project_id":1312},{"step_number":1,"complete":false,"updated_at":"2024-05-01T20:34:41.250778","id":6990,"title":"Implement Gravity Effects","instruction":"Incorporate gravity effects to make the characters' movements more realistic.","created_at":"2024-05-01T20:34:41.250778","project_id":1312},{"step_number":2,"complete":false,"updated_at":"2024-05-01T20:34:41.250820","id":6991,"title":"Add Mouse Control","instruction":"Enable users to control the characters' movements using the mouse.","created_at":"2024-05-01T20:34:41.250819","project_id":1312},{"step_number":3,"complete":false,"updated_at":"2024-05-01T20:34:41.250860","id":6992,"title":"Customize Characters","instruction":"Allow users to customize the appearance of the ragdoll characters.","created_at":"2024-05-01T20:34:41.250860","project_id":1312},{"step_number":4,"complete":false,"updated_at":"2024-05-01T20:34:41.250899","id":6993,"title":"Interactive Physics Interactions","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.","created_at":"2024-05-01T20:34:41.250898","project_id":1312},{"step_number":5,"complete":false,"updated_at":"2024-05-01T20:34:41.250936","id":6994,"title":"Interactive Environments","instruction":"Create interactive environments for the ragdoll characters to interact with.","created_at":"2024-05-01T20:34:41.250936","project_id":1312},{"step_number":6,"complete":false,"updated_at":"2024-05-01T20:34:41.250973","id":6995,"title":"Add Sound Effects","instruction":"Incorporate sound effects to enhance the interactive experience.","created_at":"2024-05-01T20:34:41.250972","project_id":1312},{"step_number":7,"complete":false,"updated_at":"2024-05-01T20:34:41.251010","id":6996,"title":"Save and Share Creations","instruction":"Implement functionality to save and share the user-created ragdoll scenes.","created_at":"2024-05-01T20:34:41.251009","project_id":1312}]}