https://github.com/fralonra/star-time-lapse

Drawing a star-filled sky with time-lapse effect using canvas.
https://github.com/fralonra/star-time-lapse

canvas html5 time-lapse

Last synced: 2 months ago
JSON representation

Drawing a star-filled sky with time-lapse effect using canvas.

• Host: GitHub
• URL: https://github.com/fralonra/star-time-lapse
• Owner: fralonra
• License: mit
• Created: 2018-05-06T22:57:43.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-11-17T05:02:36.000Z (about 5 years ago)
• Last Synced: 2024-04-24T05:03:48.775Z (9 months ago)
• Topics: canvas, html5, time-lapse
• Language: JavaScript
• Homepage:
• Size: 252 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# star-time-lapse

[![Build Status](https://travis-ci.com/fralonra/star-time-lapse.svg?branch=master)](https://travis-ci.com/fralonra/star-time-lapse)

[![npm version](https://img.shields.io/npm/v/star-time-lapse.svg)](https://www.npmjs.com/package/star-time-lapse)

Using canvas to draw a star-filled sky with time-lapse effect. The color of the star is generated randomly by [star-colors](https://github.com/fralonra/star-colors).

## Demo

Visit the [demo](https://fralonra.github.io/star-time-lapse/demo/).

## Install

```bash

npm install --save star-time-lapse

```

## Usage

Include the `javascript` file in your **Html** and make a new `StarTimeLapse`:

```html

  const s = new StarTimeLapse({

    /* options */

    el: document.getElementById('sky'),

    sum: 30,

    pole: {

      x: 100,

      y: 100

    },

    duration: 12000

  });

```

## API

### methods

#### toggle()

To start or stop the animation. If `run` is set to `false` in options, you should manually call this function to start the animation.

### options

| Option | Description | Type | Default |

| --- | --- | --- | --- |

| el | The wrapper element. A sky element will be appended to it as a child element. | Element | document.body |

| sum | The amount of stars in the sky. Pole star excluded. | Number | 50 |

| pole | The polar coordinate. A valid value is an object with `x` and `y` as properties. For example, `{ x: 10, y: 10 }`. Default to the center of the sky element. | Object | - |

| poleStar | Draw a pole star or not. | Boolean | true |

| radiusMin | The minimum radius of a star in px. | Number | 3 |

| radiusMax | The maximum radius of a star in px. | Number | 9 |

| blink | Will the star blink or not. | Boolean | true |

| run | Will the animation start automatically when you create an instance. | Boolean | true |

| clockwise | Spin clockwise or not. | Boolean | true |

| arc | The percentage of the star's track remains in the sky as time flies. Range from 0 (no track) to 1 (a full circle track). | Number | 0.8 |

| duration | How long stars spin one turn in milliseconds. | Number | 10000 |

| top | The `top` CSS property of the sky element. | Number | 0 |

| left | The `left` CSS property of the sky element. | Number | 0 |

| bottom | The `bottom` CSS property of the sky element. | Number | 0 |

| right | The `right` CSS property of the sky element. | Number | 0 |

| background | The `background` CSS property for the sky element. | String | 'linear-gradient(#001, #232355)' |

| style | Other CSS properties applied on the sky element. | Object | { 'z-index': -1, opacity: 0.8 } |