adolfintel / warpspeed

Animated and tweakable starfield for HTML5 Canvas

WarpSpeed.js

WarpSpeed.js is a simple and lightweight library for drawing an animated and customizable starfield to an HTML5 Canvas element, with a good amout of settings that you can tweak. Settings can also be tweaked at run time.

See it in action

Play with the configurator

Compatibility

As far as I know, it works on browsers as old as IE9. Any browser that supports the Canvas element should be supported. Remember to include a fallback if you're planning to support older browsers too.

Basic usage

1. Include warpspeed.min.js into your page.
2. call new WarpSpeed('your canvas id here')

To tweak the settings, you can use editor.html, and copy the string at the bottom, then in your page you can call new WarpSpeed('<your canvas id here>','<string from editor>')

Usage with React

1. Copy warpspeed.js in react-integration folder, and paste it in your React file.
2. Add 'import WarpSpeed from "./warpspeed.js"' at the top of your React file.
3. Add 'const x = new WarpSpeed('your canvas id here')' in your componentDidMount() function.

Files

• warpspeed.js Source code
• warpspeed.min.js Compressed version to include in your pages. USE THIS ONE!
• editor.html Visual settings editor
• example[1-3].html Various usage examples

Screenshots

License

Copyright (C) 2016-2021 Federico Dossena

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along with this program. If not, see https://www.gnu.org/licenses/lgpl.

warpspeed's Issues

Impossible to push in a new branch

Hi,

I added the react integration for using warpspeed with React. But I cannot push, I have no persmission.

Not sure how to destroy/end

hey,

I'm running a single page app and trying to use the warpspeed for my endin screen. I get it to load up no problem using :

var ai_background = new WarpSpeed("bkFrame",{"speed":2,"speedAdjFactor":0.06,"density":1.7,"shape":"square","warpEffect":true,"warpEffectLength":5,"depthFade":false,"starSize":3,"backgroundColor":"hsl(263,45%,7%)","starColor":"#FFFFFF"});

How do I close/destroy the instance?

how to remove settings tab?

Idk how to remove the settings and the expansion of the settings i would like to know because i wanna put this on one of my websites

Question about handling multiple calls

Hi,
So i integrated WarpSpeed in a school project where the background gets activated after entering a button combination. This will call new WarpSpeed('kettlebg'). The thing is that afterwards, users are able to reenter the keys thus triggering new WarpSpeed('kettlebg') again. Does calling the function with the same id multiple times kill the previous instance? Or does it stack and keep using more and more resources?

Feature Request: What about some rotation!

Not an issue but what do you think about adding some slight rotation? Woudl that be hard.. it would really add to the effect.

THANKS!!

Dynamic parameter changes?

I've created WarpSpeed.prototype.update() method that takes in a complete config object (your copied config) and remaps it to this.VARS just like your prototype constructor.

I have moved the config to the index, and am allowing the user to dynamically change the config parameters by sending to the update method.

I have logs inside of draw() that show that the value has changed, but it doesn't redraw with the new parameters. IOW, if I change STAR_SCALE, the variable changes, but the screen does not.

Right now I'm just sending the config via update, but I've even tried to destroy and recreate the original.

Would you be so kind as to take a look at my source and see what I'm missing?

https://github.com/ogrotten/wallpapers/tree/warpspeed/star_drive (index and starry.js)