A fairly complete HTML5/CSS3 Canvas + Web Audio clone of the 0x40 Hues Flash.
Should work on most modern browsers.
Default Hues
420 Hues
Halloween Hues
Christmas Hues
You can also have animations that sync perfectly with the beats of the songs. Inspired by Kepstin's Integral experiments.
420 Hues, Snoop Edition
"Montegral"
- Start by downloading the latest release. These are minified and load faster.
- Put your respack zips somewhere they can be found by your web server. My hues have a
respacks/
folder under the main directory. - Edit
index.html
: - If your html is in a different location to your
lib
folder: * EditworkersPath
to point to the correct (relative) location. - Edit the
defaults
object so therespacks
list contains the respacks you wish to load. - Optional: Add any extra settings to the
defaults
object. - Upload everything to your server!
var defaults = {
workersPath : "lib/workers/",
respacks : ["./respacks/Defaults_v5.0.zip",
"./respacks/HuesMixA.zip"
],
firstSong : "Nhato - Miss You",
};
See HuesSettings.js for the possible options you can put into the defaults
object.
Any setting that can go in the defaults
object can also be dynamically specified in the URL.
For example: http://0x40.mon.im/custom.html?packs=BIOS.zip,kitchen.zip¤tUI=v4.20
There are two special settings here:
firstSong
can just be written assong
.- Anything given as
packs
orrespacks
will be appended to the respacks specified in thedefaults
object, as opposed to overwriting them.
Install Node.js. I used v16, but it should work with newer releases. Install the required packages for the build:
npm install
Build with npx webpack
. It will create a dist
folder. For seamless development with auto-reload, npx webpack serve
.