Skip to content

JavaScript generated Aurora Effect, using Value noise

Notifications You must be signed in to change notification settings

Btsan/Aurora-Effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Aurora-Effect

Demo: JavaScript generated Aurora Effect, using value noise:

Multiple noise objects (found in js/Noise.js) are used to generate the 4 RGBA values for each Aurora particle.

Value noise is used, because it produces a seemingly smooth enough transition between the aurora colors and is simple to implement. In truth, value noise isn't smooth, but that probably can't be seen here.

If you pay close attention to the demo, you might notice what seems like the occasional horizontal line, scanning downwards. That is due to the roughness of value noise

The JavaScript code for value noise here is a 2D implmentation. My other project extends it for 3D noise sampling.

Aurora

The aurora effect is produced with multiple particles, rendered in HTML Canvas, so performance may be an issue. All particles are generated at the top of the screen and slowly fade away, as they fall downwards. As a result, something that looks like an aurora is produced.

Since many particles are used, it's not at all the most efficient method for creating such an effect, but it does have the advantage of having color changes both vertically and horizontally.

Smoother color changes could be performed using gradient noise, but the current demo seems fine, so the computationally cheaper value noise is used. Additionally, colors are currently chosen by randomizing the RGB channels, but can also be represented as hue, as in HSL values. Using HSL values would produce color transitions that are more logical to humans, yet that doesn't mean RGB values are inferior. RGB values are used, because the effect is more vivid than the overly smooth HSL transitions.


The demo runs best on desktop devices, with landscape screen orientation.

About

JavaScript generated Aurora Effect, using Value noise

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published