Something I put together for fun with a little demo ;-)
The Stars.py script requires you to install both PIL and Numpy. You can install them with the following commands:
pip install Pillow
pip install numpy
The python script will take an image and find the pixels that are brighter than a certain threshold. Depending on the picture provided, you will most likely have clusters of pixels per star in the image. Therefor, the script will also calculate the average centers for each of these clusters. This result gets outputted to a json file that can then be used by wallpaper.js to animate the background.
In the init function of Wallpaper, the javascript will asynchronously get the JSON file for the coordinates you generated earlier. It will then start to build up the connections that will be drawn around the mouse on the canvas.
Much still needs more documentation, but this is the rough idea:
- Take an image, such as the one provided in /demo/images/background.png
- Open it in an editor, my suggestion would be GIMP since it's free and open source software (go FOSS!)
- Create an overlay for it, covering the parts that don't have stars in (see /demo/images/background-overlay.png)
- Run
python stars.py demo/images/background-overlay.png 0.7
- You get a result, move it to your webfolder like, for example, demo/json/background-0.7.json
- Adjust the parameter in wallpaper.js to the name of the json file (minus the extension)
- Refresh your browser and watch some constellations appear
Note that the stars.py script can be adjusted to your liking, if you want higher or lower thresholds just play with the target parameter.
Enjoy and feel free to share!