
Security News
Researcher Exposes Zero-Day Clickjacking Vulnerabilities in Major Password Managers
Hacker Demonstrates How Easy It Is To Steal Data From Popular Password Managers
catenary-curve
Advanced tools
One would assume it's easy to draw a hanging rope or chain between two points, but it's not, especially if you want it to look realistic.
This TypeScript/JavaScript library provides a function that, given two points and a chain length, returns an approximation of the catenary curve as quadratic curve points.
It also provides helper methods to draw the result to a 2D canvas.
npm install --save catenary-curve
import { getCatenaryCurve, drawResult, Point } from 'catenary-curve'
const p1: Point = { x: 200, y: 300 }
const p2: Point = { x: 250, y: 400 }
const context = canvas.getContext('2d')
context.beginPath()
context.lineWidth = 1
context.strokeStyle = 'black'
const result = getCatenaryCurve(p1, p2, 500)
drawResult(result, context)
context.stroke()
function getCatenaryCurve(
point1: Point,
point2: Point,
chainLength: number,
options?: CatenaryOptions
): CatenaryCurveResult
Provide the start and end point and the length of the chain. It returns an object with the approximated values.
{
"type": "quadraticCurve",
"start": [
480.3333333333333,
213.5920866272993
],
"curves": [
[
485.2094017094017,
237.1602015730591,
490.0854700854701,
258.6001522901396
],
[
846.0384615384615,
202.65311976627885,
850.9145299145299,
175.99552022287116
],
[
855.7905982905983,
149.33792067946348,
860.6666666666666,
120.05645761711651
]
]
}
This resulting object can be passed to the drawResult
method:
const result = getCatenaryCurve(p1, p2, 500)
drawResult(result, context)
Alternatively you can also do the drawing yourself:
const result = getCatenaryCurve(p1, p2, 500)
context.moveTo(result.start[0], result.start[1])
for (let i = 0; i < result.curves.length; i++) {
context.quadraticCurveTo(
result.curves[i][0], // cpx
result.curves[i][1], // cpy
result.curves[i][2], // x
result.curves[i][3], // y
)
}
Here both the start and end points have the same position on the Y axias and
their distance on the X axis is exactly 300, the same as the chain length. So
there is no curve, only a straight line. In this case the curve is not
calcuated and the line
result type is returned:
const result = getCatenaryCurve({ x: 100, y: 300 }, { x: 400, y: 300 }, 300)
{
"type": "line",
"start": [
100,
300
],
"lines": [
[
400,
300
]
]
}
The amount of segments used to approximate the curve. The higher the value the more accurate it will be, but will require more calculations.
A value of 25 is usually enough for a very realistic approximation. Values above that only show barely any noticeable differences.
The number of iterations used to determine the catenary parameter. A higher value will yield more accurate curves, but requires more calculations.
A value around 5 is usually enough.
The basis of this library is an ActionScript by poiasd, originally released on wonderfl.net, archived and preserved at http://wa.zozuar.org/code.php?c=8Bnl.
Unfortunately I wasn't able to find out who the original author was and ask them if and how they want to be mentioned/linked.
FAQs
Calculate the perfect catenary between two points
The npm package catenary-curve receives a total of 13,453 weekly downloads. As such, catenary-curve popularity was classified as popular.
We found that catenary-curve demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Hacker Demonstrates How Easy It Is To Steal Data From Popular Password Managers
Security News
Oxlint’s new preview brings type-aware linting powered by typescript-go, combining advanced TypeScript rules with native-speed performance.
Security News
A new site reviews software projects to reveal if they’re truly FOSS, making complex licensing and distribution models easy to understand.