Skip to content

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

License

Notifications You must be signed in to change notification settings

fralonra/star-time-lapse

Repository files navigation

star-time-lapse

Build Status npm version

Using canvas to draw a star-filled sky with time-lapse effect. The color of the star is generated randomly by star-colors.

Demo

Visit the demo.

Install

npm install --save star-time-lapse

Usage

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

<script src="/path/to/star-time-lapse.min.js"></script>
<script>
  const s = new StarTimeLapse({
    /* options */
    el: document.getElementById('sky'),
    sum: 30,
    pole: {
      x: 100,
      y: 100
    },
    duration: 12000
  });
</script>

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 }

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published