WebGL port of Flurry screensaver
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 55 commits ahead of calumr:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
docs
js
original
res
.gitignore
LICENSE.md
README.md
browserconfig.xml
favicon.ico
index.html

README.md

This is a WebGL/Javascript port of Flurry from the original code by Calum Robinson ( website ).

This was my first excercise in OpenGL, WebGL, Three.JS, reading Obj-/C/++ code, reading AltiVec code and porting a legacy app, all at once. As such, this port is unoptimal, buggy and may not be a 1:1 perfect implementation of flurry. But it works!

Demo

Demo can be found on this page. Press H to hide the settings GUI and press F11 for full-screen.

License

Flurry-WebGL is licensed under the MIT license. See LICENSE.md for full notice.

Structure

This is run through a single HTML page that links to many javascript files, using some external libs from a CDN. The file structure matches similarly to the original C code:

  • Flurry.js - Entry point and holds the main namespace (Flurry) and objects (renderer, gui, etc)
  • GLSaver.js - Holds Flurry state, config, 3D setup and render loop
  • Renderer.js - WebGL rendering code and helper functions for loading shaders, setting up buffers, etc
  • Star.js - Represents the physical core of a "flurry", where all "streams" attach to
  • Spark.js - Represents a single physical "stream" attached to a flurry's star.
  • Smoke.js - Represents the particle emitter that gives physics to and draws the particle meshes, making use of the flurry's star and sparks
  • SmokeParticle.js - Represents a group of four particle quads (unsure why particles are grouped in fours)
  • Texture.js - Generates and holds the texture that the smoke particles use (actually an 8x8 grid of spots, each one with added speckle)
  • data/ - Holds pre-defined data, such as presets
  • enums/ - Holds enums, such as those for colors and blend modes
  • util/ArrayOf.js - Helper methods for creating an Array of something (with each element already initialized)
  • util/Colors.js - Helper method for parsing dat-gui's color controller values
  • util/Math.js - Extension to Javascript standard Math to provide some Clib-like functions
  • util/Vectors.js - Helper methods for creating "vectors" using typed arrays

Dev notes

See docs/DevNotes.md for rough notes jotted down during the porting process.

TODO

  • Restructure and clean up the code
  • Multiple/per-monitor flurry? (perhaps package Flurry as a web component?)
  • Better support for mobile (alternative GUI to dat.gui?)