{"id":13575453,"url":"https://github.com/dwmkerr/starfield","last_synced_at":"2025-10-14T23:39:47.708Z","repository":{"id":10167191,"uuid":"12249852","full_name":"dwmkerr/starfield","owner":"dwmkerr","description":"A nice starfield background using built using HTML and vanilla JavaScript as a learning exercise.","archived":false,"fork":false,"pushed_at":"2020-03-24T03:08:00.000Z","size":1124,"stargazers_count":54,"open_issues_count":4,"forks_count":22,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-15T06:03:42.548Z","etag":null,"topics":["html","javascript","learning","space","starfield"],"latest_commit_sha":null,"homepage":"https://dwmkerr.github.io/starfield/","language":"HTML","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/dwmkerr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"dwmkerr"}},"created_at":"2013-08-20T17:50:51.000Z","updated_at":"2024-12-24T13:48:55.000Z","dependencies_parsed_at":"2022-08-29T17:01:19.151Z","dependency_job_id":null,"html_url":"https://github.com/dwmkerr/starfield","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwmkerr%2Fstarfield","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwmkerr%2Fstarfield/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwmkerr%2Fstarfield/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwmkerr%2Fstarfield/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwmkerr","download_url":"https://codeload.github.com/dwmkerr/starfield/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016622,"owners_count":21198832,"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":["html","javascript","learning","space","starfield"],"created_at":"2024-08-01T15:01:01.211Z","updated_at":"2025-10-14T23:39:42.660Z","avatar_url":"https://github.com/dwmkerr.png","language":"HTML","funding_links":["https://github.com/sponsors/dwmkerr"],"categories":["HTML"],"sub_categories":[],"readme":"# Starfield\n\nStarfield is a JavsScript class that displays an animated starfield in a `div` element.\n\nLive Example: https://dwmkerr.github.io/starfield/\n\n[![Starfield Screenshot](./images/starfield.gif \"Starfield Screenshot\")](https://dwmkerr.github.io/starfield/)\n\n\n## Quickstart\n\nCreate a HTML `div` initialize a `Starfield` like this:\n\n```js\nvar container = document.getElementById('container');\nvar starfield = new Starfield();\nstarfield.initialise(container);\nstarfield.start();\n```\n\n## Full-Code Example\n\n_Ensure starfield.js file is in the same directory as the HTML file._\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eStarfield\u003c/title\u003e\n        \u003cstyle\u003e\n            #container {\n                width: 100%;\n                height: 100%;\n                position: absolute;\n                left: 0px;\n                top: 0px;\n                z-index: -1;\n            }\n        \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003c!-- The main starfield container, fills the entire screen. --\u003e\n        \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n        \u003cscript src=\"starfield.js\"\u003e\u003c/script\u003e\n        \u003cscript\u003e\n            //  Get the container and turn it into a starfield.\n            var container = document.getElementById('container');\n            var starfield = new Starfield();\n            starfield.initialise(container);\n            starfield.start();\n        \u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Configuration\n\nYou can configure the Starfield by setting the following properties on the class:\n\n```js\nvar starfield = new Starfield();\nstarfield.stars = 200;      //  The number of stars.\nstarfield.minVelocity = 5;  //  The minimum star velocity in pixels per second.\nstarfield.maxVelocity = 15; //  The maximum star velocity in pixels per second.\t\n```\n\n## Learning More\n\nThis code was created for **[Create a Starfield](codeproject.com/Articles/642499/Learn-JavaScript-Part-1-Create-a-Starfield)**, the first article of my _Learn JavaScript_ series on CodeProject.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwmkerr%2Fstarfield","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwmkerr%2Fstarfield","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwmkerr%2Fstarfield/lists"}