# constellation-canvas

> draws cute animated canvas constellations

Latest version **1.5.6** (published 2017-04-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install constellation-canvas
pnpm add constellation-canvas
yarn add constellation-canvas
bun add constellation-canvas
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.6 |
| Published | 2017-04-07 |
| First published | 2017-02-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 18 |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 30 |
| Author | Laura mayhem |
| Maintainers | walaura |
| Keywords | canvas, es6, frontend, javascript |

## Links

- npm: https://www.npmjs.com/package/constellation-canvas
- Repository: https://github.com/walaura/constellation
- Homepage: https://walaura.github.io/constellation/
- Issues: https://github.com/walaura/constellation/issues
- npm.io page: https://npm.io/package/constellation-canvas

## Dependencies (18)

- [gulp](https://npm.io/package/gulp.md) ^3.9.1
- [webpack](https://npm.io/package/webpack.md) ^2.2.1
- [fs-extra](https://npm.io/package/fs-extra.md) ^2.0.0
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8
- [babel-core](https://npm.io/package/babel-core.md) ^6.11.4
- [raw-loader](https://npm.io/package/raw-loader.md) ^0.5.1
- [es6-promise](https://npm.io/package/es6-promise.md) ^4.0.5
- [gulp-header](https://npm.io/package/gulp-header.md) ^1.8.8
- [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^2.0.1
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.4
- [worker-loader](https://npm.io/package/worker-loader.md) ^0.8.0
- [webpack-stream](https://npm.io/package/webpack-stream.md) ^3.2.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.9.0
- [es6-promise-promise](https://npm.io/package/es6-promise-promise.md) 1.0.0
- [gulp-mocha-phantomjs](https://npm.io/package/gulp-mocha-phantomjs.md) ^0.12.0
- [document-ready-promise](https://npm.io/package/document-ready-promise.md) ^3.0.1
- [wrapper-webpack-plugin](https://npm.io/package/wrapper-webpack-plugin.md) 0.1.11
- [babel-plugin-transform-object-assign](https://npm.io/package/babel-plugin-transform-object-assign.md) ^6.22.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.5.6 (latest) — 2017-04-07
- 1.5.5 — 2017-03-02
- 1.5.4 — 2017-03-02
- 1.5.3 — 2017-03-01
- 1.5.2 — 2017-02-19
- 1.5.1 — 2017-02-17
- 1.5.0 — 2017-02-17
- 1.4.3 — 2017-02-17
- 1.4.2 — 2017-02-17
- 1.4.1 — 2017-02-17

## README

# constellation-canvas
Draws cute animated canvas constellations.

[See it in action here!](https://thenextweb.github.io/constellation/)

<p align="center">
  <img src="http://i.imgur.com/gLCMGoi.png">
</p>




## Usage (webpack+babel)
Grab the code from here or npm

    npm install constellation-canvas --save

    #or#

    git checkout git@github.com:thenextweb/constellation.git
    npm install

Then just import it and feed it some parameters. There's a full list below.

    import Constellation from 'constellation-canvas';

    const ellation = new Constellation({
        size:[500,800],
        canvas: document.querySelector('canvas'),
        starCount: 30,
        lineCount: 60,
        style: {
            starSize: 4,
            starPadding: 5
            lineSize: 2
        }

    });




## Usage (browser)
Grab the [latest release](https://github.com/thenextweb/constellation/releases) and drop it in as a script tag. `window.constellation` will appear




## Parameters
All of them are optional but you might want to change some

| Name | Type | Description |
| --- | --- | --- |
| **size** | `array [x,y]` | Pixel size for the canvas |
| **padding** | `array [x,y]` | Space between the canvas edges and the stars, it can be negative to make a full background  |
| **canvas** | `DOM element` | The canvas element to draw in. Will be created if it doesn't exist |
| **starCount** | `number` | Total number of stars to draw |
| **lineCount** | `number`  | Total number of lines drawn between stars |
| <br><br>🏃‍💨 |  |  |
| **speed** | `object` | Speed options |
| **speed.active** | `number` | Speed when the mouse is moving the stars |
| **speed.passive** | `number` | Speed when the stars are jiggling by themselves |
| <br><br>👩‍🎨 |  |  |
| **style** | `object` | Style options |
| **style.starSize** | `number` | Size of the stars |
| **style.starColor** | `string` | Color of the stars  |
| **style.starPadding** | `number` | Space between stars and lines |
| **style.lineColor** | `string` | Color of the lines |
| **style.lineSize** | `number` | Size (line weight) of the lines |




## Drawing things yourself
For 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.

    let constellation = Constellation({
        size:[500,800],
        canvas: document.querySelector('canvas'),
        onDraw: {
            afterStar: (ctx,style,star) => {
                ctx.fillStyle = 'rgba(0,0,0,0)';
                ctx.beginPath();
                    ctx.arc(
                        node.pos[0], node.pos[1], style.starSize,0, 2 * Math.PI
                    );
                    ctx.globalCompositeOperation = 'destination-over';
                    ctx.shadowColor = '#999';
                    ctx.shadowBlur = 20;
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 15;
                    ctx.fill();
                ctx.closePath();
                ctx.fillStyle = style.starColor;
            }
        }
    });

You 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.

| Callback | Description |
| --- | --- |
| **star**(ctx,style,star) | overrides star drawing. `star` contains the coordinates for the star to be drawn |
| **afterStar**(ctx,style,star) | takes place after the default star drawing. `star` contains the coordinates for the star that was drawn |
| **line**(ctx,style,line) | overrides line drawing. `line` contains the coordinates for the line to be drawn |
| **afterLine**(ctx,style,line) | takes place after the default line drawing. `line` contains the coordinates for the line that was drawn |
| **afterFrame**(ctx,style,objects) | takes place after drawing a full frame. `objects` contains all coordinates for stars & lines |

For `afterStar` & `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` & `afterLine` anyway and instead provide a full drawing solution or plug into `afterFrame`.


## Advanced
There 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.

ALSO!! should you ever need it, `Constellation` will return a promise containing `$constellation`, the canvas DOM object after everything there has been done.

    const constellation = Constellation({
        /*blah*/
    });

    constellation.then(function(data){
        console.log(data.$constellation);
    })

---
_Source: https://npm.io/package/constellation-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._