https://github.com/nout-kleef/starry-night

Simulation of a star-filled sky using JS and CSS, to be used as a background
https://github.com/nout-kleef/starry-night

animation art css js simulation star stars website

Last synced: about 2 months ago
JSON representation

Simulation of a star-filled sky using JS and CSS, to be used as a background

• Host: GitHub
• URL: https://github.com/nout-kleef/starry-night
• Owner: nout-kleef
• License: mit
• Created: 2019-06-20T21:33:46.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T07:09:38.000Z (about 2 years ago)
• Last Synced: 2024-10-13T04:21:05.827Z (3 months ago)
• Topics: animation, art, css, js, simulation, star, stars, website
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@nout-kleef/starry-night
• Size: 19 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# starry-night

Take a look at the night sky, right here in your browser.

This module adds some pretty looking stars to your html document's background, complete with

* parallax scrolling

* random flickering (Perlin noise)

* dynamic rendering based on display size

All without serious effects on your website's performance.

# demo

You can find a demo of this module by navigating your browser to `./dist/index.html`

![demo gif showing starry-night module](demo-assets/starry-night.gif)


the quality is quite poor due to this being a GIF image

# dependency usage

1) add `` to your html page's ``


    to prevent the possibility of including p5.js twice, you must include it as a separate script (if you're not using it already)

## load starry-night using JsDelivr CDN

2) add `` to your html page's ``

3) load `https://cdn.jsdelivr.net/npm/@nout-kleef/starry-night@2/dist/img/stars-sprite-12.png`, which holds the stars' images

## load starry-night using local file

note: you should probably move these files from `node_modules` to your `public_html` folder first, using Gulp, Grunt etc.

2) add `node_modules/@nout-kleef/starry-night/dist/starry-night.min.js` as a script to your html page's ``

3) copy/load `node_modules/@nout-kleef/starry-night/dist/img/stars-sprite-12.png`

# development usage

1) `sudo npm install`

2) `gulp`

3) `python -m SimpleHTTPServer` (only way to fetch the assets is over http(s))

4) navigate to `http://0.0.0.0:8000/dist/` or something similar - see terminal

5) use either the demo page or your own project to make some improvements to this module!