!Starbackjs
!Starbackjs Demo Night

Click for more examples

Starback.js

Getting Started

You can use starback.js directly with

# Using downloaded files

`

- With import

Install via NPM first:

`bash
npm install starback
`

and then

`js
import Starback from 'starback'
`

Example Usage

`html




`

You can check the more options in Options section

Options


| Key | Type | Description | Required | Default Value|
| --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------- |
| type | String | Required. Star type to use. The values are 'dot' or 'line' | true | |
| width| Number | Canvas width to set | no | 800 |
| height | Number | Canvas height to set | no | 600 |
| backgroundColor | String|Array | Color of the background, use string for solid color, or array of colors for linear gradient | no | #ccc |
| quantity | Number | Number of stars to show | no | 100 |
| showFps | Boolean | Show FPS on the top left screen | no | false |
| speed | Number | Star speed | no | 0.5 |
| starSize | Number|Array | Use number for fixed star size. Use [minSize, maxSize] value for random the size within the range | no | [0, 3] for type: dot, 100 for type: line |

Additional options for type: 'dot'


| Key | Type | Description | Required | Default Value |
| ---- | ------ | -------------------- | -------- | ------------- |
| direction | Number | Use 360 degree to set the direction | no | 225 |
| randomOpacity | Boolean|Array | If true, random star will get random opacity. Use array [minOpacity, maxOpacity] to limit the random opacity | no | false |
| starColor | String | Color of the stars, you can use rgb or hex like css color. | no | white |

Additional options for type: 'line'

| Key | Type | Description | Required | Default Value |
| ---- | ------ | -------------------- | -------- | ------------- |
| directionY | Number | The direction the star to move vertically (1 = to bottom, 0 = to top) | no | 1 |
| directionX | Number | The direction the star to move vertically (1 = to right, 0 = to left) | no | 1 |
| distanceX | Number | Distance horizontally the star should reaching at | no | 0.1 |
| frequency | Number | The frequency of star will be rotated | no | 10|
| slope | Object | The quadraticCurve coordinate that will be applied to stars. Read MDN | no | {x: 1, y: 1} |
| starColor | String|Array | Color of the stars, use string for solid color, or array of colors for linear gradient | no | ['#fb00ff', '#00dde0'] |
| spread | Number | The spread level of the stars | no | 1 |

Methods

| Name | Parameter | Description |
| ---------------------------- | --------------------------------------- | ------------------------------------------------- |
| generateStar(amount) | amount: number | The quantity of stars that will be shown |
| addToFront(callback(ctx)) | function(ctx: CanvasRenderingContext2D) | Add to front of the falling star by given context |
| addToBehind(callback(ctx)) | function(ctx: CanvasRenderingContext2D) | Add to back of the falling star by given context |

Example method usage: adding image to front

`js
let starback = new Starback(canvas, options)

let mountainImage = new Image()
mountainImage.src = 'images/mountain.png'

mountainImage.onload = () => {
starback.addToFront((ctx) => {
ctx.drawImage(
mountain,
0,
0,
mountain.width,
mountain.height,
0,
canvas.height - mountain.height,
canvas.width,
mountain.height
)
})
}
``

Contributing

You can contribute to this repository. See CONTRIBUTING.md

Donate

If you have used this library and it's useful for you, please consider to donate:

Ko-fi | Trakteer

License

This library is under MIT license.