{"id":19276110,"url":"https://github.com/hhogg/sysplot","last_synced_at":"2025-04-21T23:30:52.404Z","repository":{"id":57376245,"uuid":"134999375","full_name":"HHogg/sysplot","owner":"HHogg","description":"A library that systematically generates a plane for plotting shapes, with a variety of algorithms to choose from.","archived":false,"fork":false,"pushed_at":"2018-09-05T15:57:14.000Z","size":72,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T14:22:25.834Z","etag":null,"topics":["archimedes","concentric","fermat","plotting","ulam","vogel"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/HHogg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-26T22:40:55.000Z","updated_at":"2022-06-14T15:33:19.000Z","dependencies_parsed_at":"2022-09-05T19:12:05.724Z","dependency_job_id":null,"html_url":"https://github.com/HHogg/sysplot","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HHogg%2Fsysplot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HHogg%2Fsysplot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HHogg%2Fsysplot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HHogg%2Fsysplot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HHogg","download_url":"https://codeload.github.com/HHogg/sysplot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250150593,"owners_count":21383193,"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":["archimedes","concentric","fermat","plotting","ulam","vogel"],"created_at":"2024-11-09T20:52:53.387Z","updated_at":"2025-04-21T23:30:52.097Z","avatar_url":"https://github.com/HHogg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SysPlot\n\nA library that systematically generates a plane for plotting shapes, with a variety of algorithms to choose from.\n\n## Install\n\n```\n$ yarn add sysplot\n```\n\n## Usage\n\nSysPlot is used for generating XY coordinates for placing shapes. It is agnostic about the approach used for the visualisation, be it HTML, SVG, Canvas, WebGL.. etc.\n\nPositions will be given starting from the center and will attempt to fill as much\nspace as possible.\n\n```js\nimport SysPlot, { VogelSpiral /* any provided algorithm */ } from 'sysplot';\n\nconst sysPlot = new SysPlot();\n\nsysPlot.setConfig({\n  algorithm: VogelSpiral,\n  cover: true,\n  padding: 10,\n  proportional: true,\n  spread: 0.25,\n});\n\nsysPlot.setBounds(1000, 500);\n\nconst shapes = [{\n  radius: 20,\n}, {\n  width: 30,\n  height: 50,\n}]\n\n/** Give it the shapes to calculate the position for. */\nsysPlot.setShape(shapes);\n\n/** Get the positions for those shapes */\nconst positions = sysPlot.getPositions();\n\n/** Shapes that were unable to be placed will have no position */\nconst shapesWithValidPositions = zip(positions, shapes).filter(([, p]) =\u003e p);\n```\n\n## Algorithms\n\n#### `ArchimedesSpiral`\n\n\u003e The Archimedean spiral (also known as the arithmetic spiral) is a spiral named after the 3rd century BC Greek mathematician Archimedes. It is the locus of points corresponding to the locations over time of a point moving away from a fixed point with a constant speed along a line which rotates with constant angular velocity.\n\u003e\n\u003e [Wikipedia - Archimedes Spiral](https://en.wikipedia.org/wiki/Archimedean_spiral)\n\n#### `ConcentricCircles`\n\n\u003e  In geometry, two or more objects are said to be concentric, coaxal, or coaxial when they share the same center or axis.\n\u003e\n\u003e [Wikipedia - Concentric Circles](https://en.wikipedia.org/wiki/Concentric_objects)\n\n#### `FermatSpiral`\n\n\u003e Fermat's spiral (also known as a [parabolic spiral](https://en.wikipedia.org/wiki/Parabola)) was first discovered by Pierre de Fermat. It is a type of Archimedean spiral\n\u003e\n\u003e [Wikipedia - Fermat Spiral](https://en.wikipedia.org/wiki/Fermat%27s_spiral)\n\n#### `UlamSpiral`\n\n\u003e The Ulam spiral or prime spiral (in other languages also called the Ulam cloth) is a graphical depiction of the set of [prime numbers](https://en.wikipedia.org/wiki/Prime_number)...  It is constructed by writing the positive integers in a square spiral and specially marking the prime numbers.\n\u003e\n\u003e [Wikipedia - Ulam Spiral](https://en.wikipedia.org/wiki/Ulam_spiral)\n\n#### `VogelSpiral`\n\n\u003e In disc [phyllotaxis](https://en.wikipedia.org/wiki/Phyllotaxis), as in the sunflower and daisy, the mesh of spirals occurs in [Fibonacci numbers](https://en.wikipedia.org/wiki/Fibonacci_number) because divergence (angle of succession in a single spiral arrangement) approaches the [golden ratio](https://en.wikipedia.org/wiki/Golden_ratio).\n\u003e\n\u003e [Wikipedia - Vogel Spiral](https://en.wikipedia.org/wiki/Fermat%27s_spiral)\n\n## API\n\n#### Config Object\n\n```js\nconst config = {\n  /**\n   * One of the exported algorithm functions mentioned above.\n   *\n   * Defaults: ArchimedesSpiral\n   */\n  algorithm: Function,\n\n  /**\n   * An explicit aspect ratio, irrespective of the given bounds, for\n   * plotting the vectors.\n   *\n   * Defaults: 1\n   */\n  aspectRatio: Number,\n\n  /**\n   * Specifies to generate as many vector points needed to cover the entire\n   * area give.\n   *\n   * Defaults: true\n   */\n  cover: Boolean\n\n  /**\n   * The amount of padding to be used around the shapes when\n   * positioning.\n   *\n   * Defaults: 10\n   */\n  padding: Number,\n\n  /**\n   * Retains the aspect ratio (taking from the bounds) for plotting the vector points.\n   *\n   * Defaults: false\n   */\n  proportional: Boolean,\n\n  /**\n   * A number between 0.1 and 1 that affects the density of the\n   * vector points. 0.1 being very dense and 1 being very spread\n   * apart.\n   *\n   * Defaults: 0.25\n   */\n  spread: Number,\n}\n```\n\n#### SysPlot()\n\nThe main class for storing the environment and generating vectors and positions.\n\n```js\nnew SysPlot();\n```\n\n#### Sysplot.setConfig(configObject)\n\nUpdates the config and sets a flag to regenerate the plotting vectors and/or the positions on next `getPositions()` call.\n\n```js\nsysPlot.setConfig(configObject);\n```\n\n#### SysPlot.setBounds(width, height)\n\nSets the bounds to generate the plotting vectors for.\n\n```js\nconst width = 1000;\nconst height = 500;\n\nsysPlot.setBounds(width, height);\n```\n\n#### SysPlot.setShapes(shapes)\n\nSets the shapes and sets a flag to regenerate positions on next `getPositions()` call.\n\n```js\nconst shapes = [{\n  radius: 20,\n}, {\n  width: 30,\n  height: 50,\n}]\n\nsysPlot.setShapes(shapes);\n```\n\n#### SysPlot.getPositions()\n\nGets the positions for the set shapes. Returns XY coordinates in order of the shapes that were set. Any shapes they were unable to be positioned will be null.\n\n```js\nconst shapes = [...];\nconst positions = sysPlot.getPositions();\n\nconst shapesWithValidPositions = zip(positions, shapes).filter(([, p]) =\u003e p);\n```\n\n#### SysPlot.getVectors()\n\nGets the vector points used for positioning (as XY coordinates) that the algorithm generated, radiating out from the center.\n\n```js\nsysPlot.getVectors(); // [[x, y], [x, y] ...etc]\n```\n\n## Performance\n\nGenerating the vector points and positioning the shapes can be intensive depending on the algorithm used, the number of shapes and the spread option. **SysPlot will only generate new vectors and positions if it needs to**, which is determined when certain parts of the config, bounds or shapes change.\n\nUse the `setBounds`, `setConfig` and `setShapes` methods when the environment changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhhogg%2Fsysplot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhhogg%2Fsysplot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhhogg%2Fsysplot/lists"}