{"id":16266213,"url":"https://github.com/dulnan/catenary-curve","last_synced_at":"2025-06-14T23:03:42.176Z","repository":{"id":57194991,"uuid":"145607320","full_name":"dulnan/catenary-curve","owner":"dulnan","description":"Calculate the catenary between two points. Useful for drawing hanging ropes, strings, chains and bridges","archived":false,"fork":false,"pushed_at":"2024-09-14T12:38:22.000Z","size":189,"stargazers_count":43,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T05:31:35.259Z","etag":null,"topics":["canvas","catenary","chain","game","javascript","rope","typescript"],"latest_commit_sha":null,"homepage":"https://catenary-curve.dulnan.net","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dulnan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-21T19:01:29.000Z","updated_at":"2025-06-04T16:31:50.000Z","dependencies_parsed_at":"2024-06-18T15:36:50.823Z","dependency_job_id":"50759673-f68b-477b-878f-7a9585bedaca","html_url":"https://github.com/dulnan/catenary-curve","commit_stats":{"total_commits":28,"total_committers":2,"mean_commits":14.0,"dds":0.2857142857142857,"last_synced_commit":"9cb7e53e2db4bd5c499f5051abde8bfd853d946a"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcatenary-curve","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcatenary-curve/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcatenary-curve/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcatenary-curve/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dulnan","download_url":"https://codeload.github.com/dulnan/catenary-curve/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcatenary-curve/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259210316,"owners_count":22822337,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","catenary","chain","game","javascript","rope","typescript"],"created_at":"2024-10-10T17:40:21.194Z","updated_at":"2025-06-14T23:03:42.148Z","avatar_url":"https://github.com/dulnan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Catenary Curve - Approximates the catenary curve between two points\n\n[![catenary-curve banner](public/og.png?raw=true \"Catenary Curves\")](https://catenary-curve.dulnan.net)\n\n**[Demo](https://catenary-curve.dulnan.net)** - **[NPM](https://www.npmjs.com/package/catenary-curve)** - **[In use](https://lazybrush.dulnan.net)**\n\nOne would assume it's easy to draw a hanging rope or chain between two points,\nbut it's not, especially if you want it to look realistic.\n\nThis TypeScript/JavaScript library provides a function that, given two points\nand a chain length, returns an approximation of the [catenary\ncurve](https://en.wikipedia.org/wiki/Catenary) as quadratic curve points.\n\nIt also provides helper methods to draw the result to a 2D canvas.\n\n## How to use\n\n```bash\nnpm install --save catenary-curve\n```\n\n```typescript\nimport { getCatenaryCurve, drawResult, Point } from 'catenary-curve'\n\nconst p1: Point = { x: 200, y: 300 }\nconst p2: Point = { x: 250, y: 400 }\n\nconst context = canvas.getContext('2d')\n\ncontext.beginPath()\ncontext.lineWidth = 1\ncontext.strokeStyle = 'black'\n\nconst result = getCatenaryCurve(p1, p2, 500)\ndrawResult(result, context)\n\ncontext.stroke()\n```\n\n## Exports\n\n### getCatenaryCurve\n\n```typescript\nfunction getCatenaryCurve(\n  point1: Point,\n  point2: Point,\n  chainLength: number,\n  options?: CatenaryOptions\n): CatenaryCurveResult\n```\n\nProvide the start and end point and the length of the chain. It returns an\nobject with the approximated values.\n\n```json\n{\n  \"type\": \"quadraticCurve\",\n  \"start\": [\n    480.3333333333333,\n    213.5920866272993\n  ],\n  \"curves\": [\n    [\n      485.2094017094017,\n      237.1602015730591,\n      490.0854700854701,\n      258.6001522901396\n    ],\n    [\n      846.0384615384615,\n      202.65311976627885,\n      850.9145299145299,\n      175.99552022287116\n    ],\n    [\n      855.7905982905983,\n      149.33792067946348,\n      860.6666666666666,\n      120.05645761711651\n    ]\n  ]\n}\n```\n\nThis resulting object can be passed to the `drawResult` method:\n\n```typescript\nconst result = getCatenaryCurve(p1, p2, 500)\ndrawResult(result, context)\n```\n\nAlternatively you can also do the drawing yourself:\n\n```typescript\nconst result = getCatenaryCurve(p1, p2, 500)\n\ncontext.moveTo(result.start[0], result.start[1])\n\nfor (let i = 0; i \u003c result.curves.length; i++) {\n  context.quadraticCurveTo(\n    result.curves[i][0], // cpx\n    result.curves[i][1], // cpy\n    result.curves[i][2], // x\n    result.curves[i][3], // y\n  )\n}\n```\n\n#### Straight lines\n\nHere both the start and end points have the same position on the Y axias and\ntheir distance on the X axis is exactly 300, the same as the chain length. So\nthere is no curve, only a straight line. In this case the curve is not\ncalcuated and the `line` result type is returned:\n\n```typescript\nconst result = getCatenaryCurve({ x: 100, y: 300 }, { x: 400, y: 300 }, 300)\n```\n\n```json\n{\n  \"type\": \"line\",\n  \"start\": [\n    100,\n    300\n  ],\n  \"lines\": [\n    [\n      400,\n      300\n    ]\n  ]\n}\n```\n\n### Options\n\n#### options.segments?: number\n\nThe amount of segments used to approximate the curve. The higher the value the\nmore accurate it will be, but will require more calculations.\n\nA value of 25 is usually enough for a very realistic approximation. Values\nabove that only show barely any noticeable differences.\n\n#### options.iterationLimit?: number\n\nThe number of iterations used to determine the catenary parameter. A higher\nvalue will yield more accurate curves, but requires more calculations.\n\nA value around 5 is usually enough.\n\n## Acknowledgement\n\nThe basis of this library is an ActionScript by poiasd, originally released on\nwonderfl.net, archived and preserved at http://wa.zozuar.org/code.php?c=8Bnl.\n\nUnfortunately I wasn't able to find out who the original author was and ask\nthem if and how they want to be mentioned/linked.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulnan%2Fcatenary-curve","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulnan%2Fcatenary-curve","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulnan%2Fcatenary-curve/lists"}