{"id":22965791,"url":"https://github.com/thenextweb/constellation","last_synced_at":"2025-08-13T08:32:40.328Z","repository":{"id":57206244,"uuid":"81267731","full_name":"thenextweb/constellation","owner":"thenextweb","description":"✨ Draws cute animated constellations","archived":false,"fork":false,"pushed_at":"2017-04-07T14:38:14.000Z","size":61,"stargazers_count":31,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-16T19:21:14.079Z","etag":null,"topics":["canvas","es6","frontend","javascript"],"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/thenextweb.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":"2017-02-07T23:59:55.000Z","updated_at":"2024-10-02T05:55:59.000Z","dependencies_parsed_at":"2022-09-11T05:01:53.693Z","dependency_job_id":null,"html_url":"https://github.com/thenextweb/constellation","commit_stats":null,"previous_names":["walaura/constellation"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thenextweb%2Fconstellation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thenextweb%2Fconstellation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thenextweb%2Fconstellation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thenextweb%2Fconstellation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thenextweb","download_url":"https://codeload.github.com/thenextweb/constellation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229749174,"owners_count":18118325,"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","es6","frontend","javascript"],"created_at":"2024-12-14T20:16:26.004Z","updated_at":"2024-12-14T20:16:26.533Z","avatar_url":"https://github.com/thenextweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# constellation-canvas\nDraws cute animated canvas constellations.\n\n[See it in action here!](https://thenextweb.github.io/constellation/)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://i.imgur.com/gLCMGoi.png\"\u003e\n\u003c/p\u003e\n\n\n\n\n## Usage (webpack+babel)\nGrab the code from here or npm\n\n    npm install constellation-canvas --save\n\n    #or#\n\n    git checkout git@github.com:thenextweb/constellation.git\n    npm install\n\nThen just import it and feed it some parameters. There's a full list below.\n\n    import Constellation from 'constellation-canvas';\n\n    const ellation = new Constellation({\n        size:[500,800],\n        canvas: document.querySelector('canvas'),\n        starCount: 30,\n        lineCount: 60,\n        style: {\n            starSize: 4,\n            starPadding: 5\n            lineSize: 2\n        }\n\n    });\n\n\n\n\n## Usage (browser)\nGrab the [latest release](https://github.com/thenextweb/constellation/releases) and drop it in as a script tag. `window.constellation` will appear\n\n\n\n\n## Parameters\nAll of them are optional but you might want to change some\n\n| Name | Type | Description |\n| --- | --- | --- |\n| **size** | `array [x,y]` | Pixel size for the canvas |\n| **padding** | `array [x,y]` | Space between the canvas edges and the stars, it can be negative to make a full background  |\n| **canvas** | `DOM element` | The canvas element to draw in. Will be created if it doesn't exist |\n| **starCount** | `number` | Total number of stars to draw |\n| **lineCount** | `number`  | Total number of lines drawn between stars |\n| \u003cbr\u003e\u003cbr\u003e🏃‍💨 |  |  |\n| **speed** | `object` | Speed options |\n| **speed.active** | `number` | Speed when the mouse is moving the stars |\n| **speed.passive** | `number` | Speed when the stars are jiggling by themselves |\n| \u003cbr\u003e\u003cbr\u003e👩‍🎨 |  |  |\n| **style** | `object` | Style options |\n| **style.starSize** | `number` | Size of the stars |\n| **style.starColor** | `string` | Color of the stars  |\n| **style.starPadding** | `number` | Space between stars and lines |\n| **style.lineColor** | `string` | Color of the lines |\n| **style.lineSize** | `number` | Size (line weight) of the lines |\n\n\n\n\n## Drawing things yourself\nFor further customization you can also pass an `onDraw` parameter with a number of callbacks. These will allow you to take over the drawing process of the canvas.\n\n    let constellation = Constellation({\n        size:[500,800],\n        canvas: document.querySelector('canvas'),\n        onDraw: {\n            afterStar: (ctx,style,star) =\u003e {\n                ctx.fillStyle = 'rgba(0,0,0,0)';\n                ctx.beginPath();\n                    ctx.arc(\n                        node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI\n                    );\n                    ctx.globalCompositeOperation = 'destination-over';\n                    ctx.shadowColor = '#999';\n                    ctx.shadowBlur = 20;\n                    ctx.shadowOffsetX = 0;\n                    ctx.shadowOffsetY = 15;\n                    ctx.fill();\n                ctx.closePath();\n                ctx.fillStyle = style.starColor;\n            }\n        }\n    });\n\nYou can see how these plug in at `src/class/Canvas.js` for yourself to better understand what's happening but here's a quick reference.\n\n| Callback | Description |\n| --- | --- |\n| **star**(ctx,style,star) | overrides star drawing. `star` contains the coordinates for the star to be drawn |\n| **afterStar**(ctx,style,star) | takes place after the default star drawing. `star` contains the coordinates for the star that was drawn |\n| **line**(ctx,style,line) | overrides line drawing. `line` contains the coordinates for the line to be drawn |\n| **afterLine**(ctx,style,line) | takes place after the default line drawing. `line` contains the coordinates for the line that was drawn |\n| **afterFrame**(ctx,style,objects) | takes place after drawing a full frame. `objects` contains all coordinates for stars \u0026 lines |\n\nFor `afterStar` \u0026 `afterLine` you have to reset all fillStyles and whatnot or otherwise they'll carry over into the built-in drawing code. Good news is that for performance reasons you'll probably want to avoid `afterStar` \u0026 `afterLine` anyway and instead provide a full drawing solution or plug into `afterFrame`.\n\n\n## Advanced\nThere are some extra advanced properties too! `fuzziness` for controlling how reactive to the mouse stars are and `scale`, for drawing the canvas at a different resolution (it's @2x by default). Check out the code (i mean it's like 5? files total) to see how they work.\n\nALSO!! should you ever need it, `Constellation` will return a promise containing `$constellation`, the canvas DOM object after everything there has been done.\n\n    const constellation = Constellation({\n        /*blah*/\n    });\n\n    constellation.then(function(data){\n        console.log(data.$constellation);\n    })\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenextweb%2Fconstellation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthenextweb%2Fconstellation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenextweb%2Fconstellation/lists"}