{"_id":"@amirabet/canvas-skymap","_rev":"2-abc68770f61673d38bd51d2407b2b3b9","name":"@amirabet/canvas-skymap","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.4":{"name":"@amirabet/canvas-skymap","version":"1.0.4","keywords":["canvas","skymap","stars","constellations","astronomy","planetarium","tweakpane"],"author":{"name":"amirabet"},"license":"MIT","_id":"@amirabet/canvas-skymap@1.0.4","maintainers":[{"name":"amirabet","email":"arturmirabet@gmail.com"}],"homepage":"https://github.com/amirabet/html5Canvas_skymap#readme","bugs":{"url":"https://github.com/amirabet/html5Canvas_skymap/issues"},"dist":{"shasum":"37bd0c6bcf490f3ed955ab492c014c5cab2266b5","tarball":"https://registry.npmjs.org/@amirabet/canvas-skymap/-/canvas-skymap-1.0.4.tgz","fileCount":6,"integrity":"sha512-bBD9GtNJiUBSF7tg03ze5w79srg9qFj+ZdsBBWlLeMXDXTDTNB40He6ghEyH/JtsyEyatU+q91TCZQyfNbslww==","signatures":[{"sig":"MEYCIQCibLnjdKIM2tflSOTUbN0U6O1Pg4vsfUvNEVK7h224cAIhAK4FhDIApmPrsEg1tFJ5PmcMODew6PQP4QGgbJrdosNc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":706531},"main":"dist/skymap.min.js","module":"dist/skymap.esm.js","exports":{".":{"import":"./dist/skymap.esm.js","require":"./dist/skymap.min.js"}},"gitHead":"38d6eb6395813fe33d205b9bd45407f454b13020","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"node build.js","start":"canvas-sketch canvas-skymap.js --open","build:all":"node build.js --all","build:plugin":"rollup -c rollup.config.mjs","version:sync":"node -e \"const fs=require('fs');const m=fs.readFileSync('CHANGELOG.md','utf8').match(/##\\s+\\[([\\d]+\\.[\\d]+\\.[\\d]+[^\\]]*)]/) ;if(!m){console.error('No version found in CHANGELOG.md');process.exit(1)}require('child_process').execSync('npm version '+m[1]+' --no-git-tag-version --allow-same-version',{stdio:'inherit'})\""},"_npmUser":{"name":"amirabet","email":"arturmirabet@gmail.com"},"repository":{"url":"git+https://github.com/amirabet/html5Canvas_skymap.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated HTML5 Canvas star map with constellation search, themes and a Tweakpane control panel. Embeddable via CDN or npm.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"tweakpane":"^3.1.10","canvas-sketch":"^0.7.7","tweakpane-plugin-search-list":"^0.0.10"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.61.0","terser":"^5.48.0","@rollup/plugin-json":"^6.1.0","@rollup/plugin-terser":"^1.0.0","@rollup/plugin-commonjs":"^29.0.3","@rollup/plugin-node-resolve":"^16.0.3"},"_npmOperationalInternal":{"tmp":"tmp/canvas-skymap_1.0.4_1780304597043_0.944185995530388","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@amirabet/canvas-skymap","version":"1.0.5","description":"Animated HTML5 Canvas star map with constellation search, themes and a Tweakpane control panel. Embeddable via CDN or npm.","author":{"name":"amirabet"},"license":"MIT","keywords":["canvas","skymap","stars","constellations","astronomy","planetarium","tweakpane"],"homepage":"https://github.com/amirabet/html5Canvas_skymap#readme","repository":{"type":"git","url":"git+https://github.com/amirabet/html5Canvas_skymap.git"},"bugs":{"url":"https://github.com/amirabet/html5Canvas_skymap/issues"},"main":"dist/skymap.min.js","module":"dist/skymap.esm.js","exports":{".":{"import":"./dist/skymap.esm.js","require":"./dist/skymap.min.js"}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"scripts":{"start":"canvas-sketch canvas-skymap.js --open","build":"node build.js","build:all":"node build.js --all","build:plugin":"rollup -c rollup.config.mjs","version:sync":"node -e \"const fs=require('fs');const m=fs.readFileSync('CHANGELOG.md','utf8').match(/##\\s+\\[([\\d]+\\.[\\d]+\\.[\\d]+[^\\]]*)]/) ;if(!m){console.error('No version found in CHANGELOG.md');process.exit(1)}require('child_process').execSync('npm version '+m[1]+' --no-git-tag-version --allow-same-version',{stdio:'inherit'})\"","test":"echo \"Error: no test specified\" && exit 1"},"dependencies":{"canvas-sketch":"^0.7.7","tweakpane":"^3.1.10","tweakpane-plugin-search-list":"^0.0.10"},"devDependencies":{"@rollup/plugin-commonjs":"^29.0.3","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-terser":"^1.0.0","rollup":"^4.61.0","terser":"^5.48.0"},"_id":"@amirabet/canvas-skymap@1.0.5","gitHead":"b1423137c148b877b9276a7719b9f358a6b95061","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-bTW1odYIFwtaJ1ywA4WwEuiUzhNzxFImWODLth3vP71XNayFhePcNCe0qNF+9uuatdG4eZl2UmSSyZAp2dpLmQ==","shasum":"11f2ad70cf4e33f37615ee3c69bb8d74b747c71b","tarball":"https://registry.npmjs.org/@amirabet/canvas-skymap/-/canvas-skymap-1.0.5.tgz","fileCount":6,"unpackedSize":703695,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBdOiqrc/BKHFU68xH2oQJYXeXcEB2da3tZxhnbGV85gAiEA6rKCaR+l1Tutg3jRC9DjzPjoiqTuOgbSrAArqKwc+dk="}]},"_npmUser":{"name":"amirabet","email":"arturmirabet@gmail.com"},"directories":{},"maintainers":[{"name":"amirabet","email":"arturmirabet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/canvas-skymap_1.0.5_1780308173531_0.36363752916631964"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-01T09:03:16.868Z","modified":"2026-06-01T10:02:53.961Z","1.0.4":"2026-06-01T09:03:17.177Z","1.0.5":"2026-06-01T10:02:53.843Z"},"bugs":{"url":"https://github.com/amirabet/html5Canvas_skymap/issues"},"author":{"name":"amirabet"},"license":"MIT","homepage":"https://github.com/amirabet/html5Canvas_skymap#readme","keywords":["canvas","skymap","stars","constellations","astronomy","planetarium","tweakpane"],"repository":{"type":"git","url":"git+https://github.com/amirabet/html5Canvas_skymap.git"},"description":"Animated HTML5 Canvas star map with constellation search, themes and a Tweakpane control panel. Embeddable via CDN or npm.","maintainers":[{"name":"amirabet","email":"arturmirabet@gmail.com"}],"readme":"# HTML5 Canvas Planetarium Star Map\n\nAn animated star map rendered on a 2160 × 1080 canvas using **canvas-sketch**. Stars and constellation lines rotate with the day of year, simulating the night sky's annual cycle. A **Tweakpane** panel provides live controls for search, themes, labels, autoplay and layout.\n\nCheck the [demos here](https://amirabet.github.io/html5Canvas_skymap/)!\n\n## Packages\n\nThis project is distributed both on **npm** and **GitHub Packages**.\n\n### npm\n\n```bash\nnpm install @amirabet/canvas-skymap\n```\n\n### GitHub Packages\n\n```bash\nnpm install @amirabet/canvas-skymap --registry=https://npm.pkg.github.com\n```\n\nIf you install from GitHub Packages, make sure your npm client is authenticated for the GitHub Packages registry.\n\n---\n\n## Running\n\n```bash\nnpx canvas-sketch canvas-skymap.js --open\n```\n\n---\n\n## Configuration (`CONFIG`)\n\nEdit the `CONFIG` object in `canvas-skymap.js` to pre-configure the sketch before it opens. Every field maps 1-to-1 to a control in the Tweakpane panel.\n\n### Sky display\n\n| Field                    | Type      | Default  | Values                                                            |\n| ------------------------ | --------- | -------- | ----------------------------------------------------------------- |\n| `viewScale`              | `string`  | `\"sky\"`  | `\"sky\"` — cropped panoramic view · `\"1:1\"` — full square map      |\n| `showGrid`               | `boolean` | `true`   | `true` / `false`                                                  |\n| `showConstellationName`  | `boolean` | `true`   | `true` / `false`                                                  |\n| `showConstellationLines` | `boolean` | `true`   | `true` / `false`                                                  |\n| `showStarNames`          | `string`  | `\"none\"` | `\"none\"` · `\"on_hover\"` · any constellation name (e.g. `\"Orion\"`) |\n\n`showStarNames` accepts any constellation name present in `constellations_v3.json` — those stars' names will always be visible.\n\n---\n\n### Date / time\n\n| Field       | Type      | Default | Values                                                   |\n| ----------- | --------- | ------- | -------------------------------------------------------- |\n| `dayOfYear` | `integer` | today   | `1` (Jan 1) – `365` (Dec 31)                             |\n| `autoplay`  | `boolean` | `false` | `true` — advances one day every 50 ms · `false` — static |\n\n---\n\n### Theme\n\n| Field   | Type     | Default  | Values                                                                           |\n| ------- | -------- | -------- | -------------------------------------------------------------------------------- |\n| `theme` | `string` | `\"blue\"` | `\"blue\"` · `\"monochrome\"` · `\"nightmode\"` · `\"light\"` · `\"elegant\"` · `\"custom\"` |\n\nSetting `theme: \"custom\"` unlocks the individual colour pickers in the panel. When any built-in preset is selected the colour pickers are read-only.\n\n**Preset reference**\n\n| Preset       | Look                                                     |\n| ------------ | -------------------------------------------------------- |\n| `blue`       | Deep midnight blue sky, pale gold lines, sky-blue stars  |\n| `monochrome` | Pure black background, white/grey stars                  |\n| `nightmode`  | Black background, deep red palette (dark-room safe)      |\n| `light`      | White background, navy/indigo lines                      |\n| `elegant`    | Dark navy, antique gold constellation lines, cream stars |\n\n---\n\n### Panel\n\n| Field         | Type      | Default          | Values                                                            |\n| ------------- | --------- | ---------------- | ----------------------------------------------------------------- |\n| `panelCorner` | `string`  | `\"bottom-right\"` | `\"top-left\"` · `\"top-right\"` · `\"bottom-left\"` · `\"bottom-right\"` |\n| `showPane`    | `boolean` | `true`           | `true` — panel visible on load · `false` — hidden                 |\n\n---\n\n### Search (initial selection)\n\nThese fields control which object the sky is centred on when the sketch first opens.\n\n| Field                 | Type     | Default | Values                                                |\n| --------------------- | -------- | ------- | ----------------------------------------------------- |\n| `searchConstellation` | `string` | `\"\"`    | Any constellation name, e.g. `\"Orion\"` · `\"\"` to skip |\n| `searchStar`          | `string` | `\"\"`    | Any star name, e.g. `\"Sirius\"` · `\"\"` to skip         |\n\n#### Startup priority\n\nWhen the sketch initialises it applies a strict hierarchy — only the highest-priority non-empty field takes effect:\n\n```\n1. searchStar          ← wins if non-empty; constellation field is cleared\n2. searchConstellation ← wins if searchStar is empty\n3. dayOfYear           ← used if both search fields are empty\n```\n\nThe sky animates to the chosen object on load. After that, runtime behaviour is unchanged: moving the day slider clears both search fields, and selecting one search field clears the other.\n\n**Examples**\n\n```js\n// Start centred on Sirius (star priority wins)\nsearchStar: \"Sirius\",\nsearchConstellation: \"\",   // ignored\n\n// Start centred on Orion (no star set)\nsearchStar: \"\",\nsearchConstellation: \"Orion\",\n\n// Start at a specific date, no search pre-selection\nsearchStar: \"\",\nsearchConstellation: \"\",\ndayOfYear: 355,            // late December sky\n```\n\n---\n\n## Data\n\nStar and constellation data is loaded from `constellations.json`. Each constellation entry contains:\n\n- `name` — display name (used as the value for `searchConstellation` and `showStarNames`)\n- `stars[]` — array of `{ name, ra, dec, magnitude }` objects\n- `paths[]` — arrays of star name sequences that define the line art\n\n`ra` is right ascension in hours (0 – 24). `dec` is declination in degrees (−90 – +90). `magnitude` is apparent magnitude; lower = brighter.\n\nFor a full reference of all 43 constellation names and 269 star names available as CONFIG values, see [docs/star-data.md](docs/star-data.md).\n\n---\n\n## Building\n\nThe sketch can be compiled into a single self-contained HTML file using `build.js`, which wraps `canvas-sketch-cli` and adds post-processing (CONFIG injection, custom page title, output renaming).\n\n### Scripts\n\n| Command             | Description                                  |\n| ------------------- | -------------------------------------------- |\n| `npm run build`     | Default build → `docs/canvas-skymap.html`    |\n| `npm run build:all` | Build one HTML file per config in `configs/` |\n\n### Single build\n\n```bash\nnode build.js [--title \"Title\"] [--config <file-or-json>] [--out <filename.html>]\n```\n\n| Flag       | Description                                                           |\n| ---------- | --------------------------------------------------------------------- |\n| `--title`  | Sets the `<title>` tag. Defaults to the `--out` filename stem.        |\n| `--config` | CONFIG overrides — a path to a `.json` file or an inline JSON string. |\n| `--out`    | Output filename inside `docs/`. Defaults to `canvas-skymap.html`.     |\n\n**Examples:**\n\n```bash\n# Default build (no overrides)\nnode build.js\n\n# Named output with a config file\nnode build.js --title \"Orion\" --config configs/orion.json --out orion.html\n\n# Inline JSON (use a config file on Windows to avoid quoting issues)\nnode build.js --title \"Stars Only\" --config configs/stars-only.json --out stars-only.html\n```\n\n### Build all configs at once\n\n```bash\nnpm run build:all\n# or\nnode build.js --all\n```\n\nIterates over every `configs/*.json` file alphabetically, builds a separate HTML file for each one, and renames the output to match the config filename. The page title is derived automatically from the filename.\n\n**Output in `docs/`:**\n\n| Config file                       | Output file                    | Title              |\n| --------------------------------- | ------------------------------ | ------------------ |\n| `configs/nightmode-autoplay.json` | `docs/nightmode-autoplay.html` | Nightmode Autoplay |\n| `configs/orion.json`              | `docs/orion.html`              | Orion              |\n| `configs/print.json`              | `docs/print.html`              | Print              |\n| `configs/sirius.json`             | `docs/sirius.html`             | Sirius             |\n| `configs/stars-only.json`         | `docs/stars-only.html`         | Stars Only         |\n\n### Config files\n\nConfig files in `configs/` are plain JSON objects whose keys are a subset of `CONFIG` fields. Any field not present falls back to the `CONFIG` default.\n\n**Example — `configs/orion.json`:**\n\n```json\n{\n  \"searchConstellation\": \"Orion\",\n  \"theme\": \"elegant\",\n  \"showPane\": false\n}\n```\n\nTo add a new build variant, create a new `.json` file in `configs/` and run `npm run build:all`.\n\n### How CONFIG injection works\n\n1. `build.js` runs `canvas-sketch-cli --inline` to produce a single-file HTML bundle\n2. It inserts `<script>window.__SKETCH_CONFIG__ = {...};</script>` before the main bundle\n3. The sketch reads it via `...(window.__SKETCH_CONFIG__ || {})` at the end of `CONFIG`\n4. The page title is replaced with the value from `--title`\n\nIn dev mode (`npm start`) `window.__SKETCH_CONFIG__` is never set, so all CONFIG defaults apply unchanged.\n\n---\n\n## Quick use via plugin\n\nThe plugin distribution (`dist/`) lets you embed the sky map in any page without the canvas-sketch build pipeline.\n\n### Build the plugin\n\n```bash\nnpm run build:plugin\n```\n\nProduces two files:\n\n| File                 | Format                  | Use case                   |\n| -------------------- | ----------------------- | -------------------------- |\n| `dist/skymap.min.js` | UMD (minified, ~208 KB) | `<script>` tag / CDN       |\n| `dist/skymap.esm.js` | ES module (~416 KB)     | `import` / modern bundlers |\n\n### npm\n\n```bash\nnpm install @amirabet/canvas-skymap\n```\n\n```js\nimport SkyMap from \"@amirabet/canvas-skymap\";\n\nconst map = SkyMap.init({ target: \"#my-map\", theme: \"nightmode\" });\n```\n\nThe package ships the same two bundles as the CDN release — `dist/skymap.min.js` (CJS/UMD) and `dist/skymap.esm.js` (ESM). Modern bundlers (Vite, webpack, Rollup) will automatically pick the ESM build via the `module` / `exports.import` fields.\n\n### GitHub Packages\n\n```bash\nnpm install @amirabet/canvas-skymap --registry=https://npm.pkg.github.com\n```\n\n```js\nimport SkyMap from \"@amirabet/canvas-skymap\";\n\nconst map = SkyMap.init({ target: \"#my-map\", theme: \"nightmode\" });\n```\n\nUse GitHub Packages if you prefer consuming the package from the repository's GitHub package registry instead of the public npm registry.\n\n### CDN / `<script>` tag\n\nOnce published to npm, the package is available on **jsDelivr** — a proper global CDN with edge caching:\n\n| URL                                                                             | Resolves to    |\n| ------------------------------------------------------------------------------- | -------------- |\n| `https://cdn.jsdelivr.net/npm/@amirabet/canvas-skymap/dist/skymap.min.js`       | latest release |\n| `https://cdn.jsdelivr.net/npm/@amirabet/canvas-skymap@1/dist/skymap.min.js`     | latest 1.x     |\n| `https://cdn.jsdelivr.net/npm/@amirabet/canvas-skymap@1.0.2/dist/skymap.min.js` | pinned version |\n\nGitHub releases also expose a version-agnostic redirect (no CDN caching, but no npm required):\n\n```\nhttps://github.com/amirabet/html5Canvas_skymap/releases/latest/download/skymap.min.js\n```\n\n**Recommended usage (jsDelivr, always latest):**\n\n```html\n<!-- 1. A sized container -->\n<div id=\"my-map\" style=\"width:100%; height:500px;\"></div>\n\n<!-- 2. Load the bundle -->\n<script src=\"https://cdn.jsdelivr.net/npm/@amirabet/canvas-skymap/dist/skymap.min.js\"></script>\n\n<!-- 3. Initialise -->\n<script>\n  const map = SkyMap.init({\n    target: \"#my-map\", // CSS selector, bare id, or DOM Element\n    theme: \"nightmode\",\n    autoplay: true,\n    showGrid: true,\n    panelCorner: \"top-right\",\n  });\n</script>\n```\n\n### ES module\n\n```js\n// from npm or GitHub Packages\nimport SkyMap from \"@amirabet/canvas-skymap\";\n\n// or directly from the dist file\nimport SkyMap from \"./dist/skymap.esm.js\";\n\nconst map = SkyMap.init({\n  target: document.querySelector(\"#my-map\"),\n  theme: \"elegant\",\n  searchConstellation: \"Orion\",\n  showPane: false,\n});\n```\n\n### `SkyMap.init(config)` — all options\n\n`init()` accepts the same fields as the dev `CONFIG` object (see tables above), plus:\n\n| Field    | Type                | Default                          | Description                                                                                                               |\n| -------- | ------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |\n| `target` | `string \\| Element` | new `<div>` appended to `<body>` | Where to mount the canvas. Accepts a CSS selector (`'#id'`, `'.cls'`), a bare id string (`'my-map'`), or a DOM Element. |\n| `theme`  | `string`            | `'blue'`                         | Built-in preset: `'blue'` · `'monochrome'` · `'nightmode'` · `'light'` · `'elegant'` · `'custom'`                         |\n| `colors` | `object`            | —                                | Custom colour overrides when `theme: 'custom'`. Keys match the colour fields listed in `SkyMap.themes.blue`.              |\n\n### Instance API\n\n`SkyMap.init()` returns an instance handle:\n\n```js\nmap.update({ theme: \"light\", autoplay: false }); // live config change\nmap.destroy(); // stop animation, remove pane & listeners\n```\n\n`SkyMap.themes` exposes all built-in colour definitions so you can inspect or extend them:\n\n```js\n// Derive a custom theme from an existing preset\nSkyMap.init({\n  theme: \"custom\",\n  colors: { ...SkyMap.themes.elegant, background: { r: 5, g: 5, b: 20 } },\n  target: \"#my-map\",\n});\n```\n\n### Demo\n\n[docs/plugin-demo.html](docs/plugin-demo.html) shows two independent instances (Night Mode with autoplay, Elegant centred on Auriga) side by side. Open it directly in a browser from the project root after running `npm run build:plugin`.\n\n### Pending tasks\n\n- Add speed toggle for autoplay\n- Improve stars and constellation data\n","readmeFilename":"README.md"}