{"id":18284528,"url":"https://github.com/colinmeinke/points","last_synced_at":"2025-04-05T07:31:46.891Z","repository":{"id":6129205,"uuid":"54836625","full_name":"colinmeinke/points","owner":"colinmeinke","description":"A specification for storing shape data in Javascript, and some handy manipulation functions","archived":false,"fork":false,"pushed_at":"2023-01-28T18:10:37.000Z","size":1635,"stargazers_count":45,"open_issues_count":26,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T15:05:01.679Z","etag":null,"topics":["javascript","shapes"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colinmeinke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-27T16:06:39.000Z","updated_at":"2025-01-23T15:46:49.000Z","dependencies_parsed_at":"2023-02-15T18:05:46.832Z","dependency_job_id":null,"html_url":"https://github.com/colinmeinke/points","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colinmeinke","download_url":"https://codeload.github.com/colinmeinke/points/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305872,"owners_count":20917197,"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":["javascript","shapes"],"created_at":"2024-11-05T13:13:50.331Z","updated_at":"2025-04-05T07:31:41.883Z","avatar_url":"https://github.com/colinmeinke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Points\n\nA specification for storing shape data in Javascript. Includes\n[functions](#functions) for adding, removing, reordering,\nconverting and manipulating points.\n\nIf working with SVG you might find it well paired with [svg-points](https://github.com/colinmeinke/svg-points).\n\nIf you are looking to convert a SVG DOM node directly to points,\nthen check out the `frameShape` function of\n[Wilderness DOM node](https://github.com/colinmeinke/wilderness-dom-node#readme).\n\n**4.0kb gzipped.**\n\n## Example shape\n\n```js\nconst shape = [\n  { x: 50, y: 30, moveTo: true },\n  { x: 50, y: 70, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } },\n  { x: 50, y: 30, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } }\n]\n```\n\n## Functions\n\n- [`add()`](#add) – add additional points to a shape\n- [`boundingBox()`](#boundingBox) – get a shape's bounding box and\n  center coordinates\n- [`cubify()`](#cubify) – convert shape's curves to cubic beziers\n- [`length()`](#length) – get a shape's length\n- [`moveIndex()`](#moveIndex) – change the starting point of a shape\n- [`offset()`](#offset) – offset a shape\n- [`position()`](#position) – find the coordinates and angle at a\n  specific point of a shape\n- [`remove()`](#remove) – remove unrequired points of a shape\n- [`reverse()`](#reverse) – reverse the order of points of a shape\n- [`rotate()`](#rotate) – rotate a shape\n- [`scale()`](#scale) – scale a shape\n\n## Specification\n\nA shape is an array of 2 or more point objects.\n\nA line should be drawn between each point in a shape.\n\nAdding a `moveTo` property to a point indicates that\na line should *not* be drawn to that point from the\nprevious.\n\nThe first point in a shape must include the `moveTo`\nproperty.\n\n### Point types\n\nEach point is somewhere on an `x`, `y` plane. Therefore, at\nthe very least each point object requires `x` and `y`\nproperties. Values should be numeric.\n\n#### Basic\n\n```js\n{ x: 10, y: 25 }\n```\n\n#### Arc\n\n```js\n{\n  x: 80,\n  y: 35,\n  curve: {\n    type: 'arc',\n    rx: 2,\n    ry: 2,\n    xAxisRotation: 45,\n    sweepFlag: 1,\n    largeArcFlag: 1\n  }\n}\n```\n\nThe curve properties `xAxisRotation`, `sweepFlag` and\n`largeArcFlag` are all optional and if missing are assumed to\nbe `0`.\n\n#### Quadratic bezier\n\n```js\n{\n  x: 100,\n  y: 200,\n  curve: {\n    type: 'quadratic',\n    x1: 50,\n    y1: 200\n  }\n}\n```\n\n#### Cubic bezier\n\n```js\n{\n  x: 5,\n  y: 10,\n  curve: {\n    type: 'cubic',\n    x1: 2,\n    y1: 0,\n    x2: 3,\n    y2: 10\n  }\n}\n```\n\n## Installation\n\n```\nnpm install points\n```\n\n## Function usage\n\n### add\n\n```js\nimport { add } from 'points'\nconst newShape = add(shape, 25)\n```\n\nTakes an existing shape array as the first argument, and the\ntotal number of desired points as the second argument. Adds\npoints without changing the shape and returns a new shape\narray.\n\n### boundingBox\n\n```js\nimport { boundingBox } from 'points'\nconst { top, right, bottom, left, center } = boundingBox(shape)\n```\n\nTakes an existing shape array, or an array of shape arrays,\nas the only argument and returns an object of bounding\ncoordinates including a `center` property containing the\n`x`, `y` values.\n\n### cubify\n\n```js\nimport { cubify } from 'points'\nconst newShape = cubify(shape)\n```\n\nTakes an existing shape array as the only argument, or an\narray of shape arrays, and converts any arc or quadratic\nbezier points to cubic bezier points.\n\nReturns a new shape array or an array of shape arrays,\ndepending on input.\n\n### length\n\n```js\nimport { length } from 'points'\nconst value = length(shape, 1)\n```\n\nTakes an existing shape array as the first argument. The\noptional second argument takes a number above 0 but below\n180. This second argument is the accuracy (in degrees) used\nto calculate when a curve is *straight enough* to be\nconsidered a straight line. Returns the length of the shape.\n\n### moveIndex\n\n```js\nimport { moveIndex } from 'points';\nconst newShape = moveIndex(shape, 3);\n```\n\nTakes an existing shape array as the first argument, and the\ndesired number of points to shift the index as the second\nargument (this can be a negative integer too). Returns a new\nshape array.\n\n### offset\n\n```js\nimport { offset } from 'points'\nconst newShape = offset(shape, 10, 20)\n```\n\nTakes an existing shape array, or an array of shape arrays,\nas the first argument, the horizontal offset as the second\nargument, and the vertical offset as the third argument.\n\nReturns a new shape array or an array of shape arrays,\ndepending on input.\n\n### position\n\n```js\nimport { position } from 'points'\nconst { angle, x, y } = position(shape, 0.5, 1)\n```\n\nTakes an existing shape array as the first argument, and\nan interval (a number from 0 to 1) as the second argument.\nThe optional third argument takes a number above 0 but below\n180. This third argument is the accuracy (in degrees) used\nto calculate when a curve is *straight enough* to be\nconsidered a straight line. Returns an object that includes\nthe `x` and `y` coordinates at the interval of the shape,\nand the `angle` of that point with the vertical.\n\n### remove\n\n```js\nimport { remove } from 'points'\nconst newShape = remove(shape)\n```\n\nTakes an existing shape array, or an array of shape\narrays, as the only argument, and removes any points that\ndo not affect the shape.\n\nReturns a new shape array or an array of shape arrays,\ndepending on input.\n\n### reverse\n\n```js\nimport { reverse } from 'points'\nconst newShape = reverse(shape)\n```\n\nTakes an existing shape array, or an array of shape\narrays, as the only argument, and reverses the order of\nthe points.\n\nReturns a new shape array or an array of shape arrays,\ndepending on input.\n\n### rotate\n\n```js\nimport { rotate } from 'points'\nconst newShape = rotate(shape, 45)\n```\n\nTakes an existing shape array, or an array of shape arrays,\nas the first argument. Takes the clockwise angle of rotation\nas the second argument.\n\nReturns a new shape array or an array of shape arrays,\ndepending on input.\n\n### scale\n\n```js\nimport { scale } from 'points'\nconst newShape = scale(shape, 0.5, 'topLeft')\n```\n\nTakes an existing shape array, or an array of shape arrays,\nas the first argument. Takes the scale factor as the second\nargument and an anchor point as the third argument.\n\nThe anchor point can take any of the following strings:\n\n- center (default)\n- topLeft\n- topRight\n- bottomRight\n- bottomLeft\n\nReturns a new shape array or an array of shape arrays,\ndepending on input.\n\n## CommonJS\n\nThis is how you get to the good stuff if you're using\n`require`.\n\n```js\nconst Points = require('points')\nconst add = Points.add\nconst boundingBox = Points.boundingBox\nconst cubify = Points.cubify\nconst moveIndex = Points.moveIndex\nconst offset = Points.offset\nconst position = Points.position\nconst remove = Points.remove\nconst reverse = Points.reverse\nconst scale = Points.scale\n```\n\n## UMD\n\nAnd if you just want to smash in a Javascript file you're\nalso covered. Drop this in place ...\n\n[https://unpkg.com/points/dist/points.min.js](https://unpkg.com/points/dist/points.min.js)\n\nThen access it on the `Points` global variable.\n\n```js\nconst add = Points.add\nconst boundingBox = Points.boundingBox\nconst cubify = Points.cubify\nconst moveIndex = Points.moveIndex\nconst offset = Points.offset\nconst position = Points.position\nconst remove = Points.remove\nconst reverse = Points.reverse\nconst scale = Points.scale\n```\n\n## Help make this better\n\n[Issues](https://github.com/colinmeinke/points/issues/new)\nand pull requests gratefully received!\n\nI'm also on twitter [@colinmeinke](https://twitter.com/colinmeinke).\n\nThanks :star2:\n\n## License\n\n[ISC](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinmeinke%2Fpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolinmeinke%2Fpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinmeinke%2Fpoints/lists"}