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"

More Cowbell

For some examples of fast, complicated and fancy maps, here are some of my personal creations:
Black Banshee - BIOS
Drop It
Atols - Eden (buildup only)
AAAA - Hop Step Adventure
MACROSS 82-99 - ミュン・ファン・ローン
MDK - Press Start (VIP Mix)
Alex Centra - Roguebot [Inspected]
Elenne - Vertical Smoke
Nicky Flower - Wii Shop Channel (Remix)
Nhato - Logos
Massive New Krew - HADES

Finally there's these, which hook into the Hues javascript events to do something fresh:
Doors
Does Lewis Have A Girlfriend Yet (xox love ya)

0x40 Hues comes with an integrated editor to create new songs and inspect existing ones. Read how to use it here - it's easier than you think!

There is an extremely basic respack editor at respack_edit.html. I also host it on my site. It does not support adding images, nor does it support adding songs. You can, however, edit all properties of an existing respack's songs and images. If this is lacking features you would like, please open a ticket. It was mostly made for editing centerPixel values.

1. Start by downloading the latest release
2. Put your respack zips somewhere they can be found by your web server. My hues have a respacks/ folder under the main directory
3. Edit index.html:
4. Edit the defaults object so the respacks list contains the respacks you wish to load
5. Optional: Add any extra settings to the defaults object
6. Upload everything to your server!

var defaults = {
  respacks: ["./respacks/Defaults_v5.0_Opaque.zip", "./respacks/HuesMixA.zip"],
  firstSong: "Nhato - Miss You",
};

See HuesSettings.ts 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: https://0x40.mon.im/custom.html?packs=BIOS.zip,kitchen.zip&currentUI=v4.20

There are two special settings here:

• firstSong can just be written as song.
• Anything given as packs or respacks will be appended to the respacks specified in the defaults object, as opposed to overwriting them.

Install Node.js. I currently use v18, but it should work with newer releases.

Install the required packages for the build:

npm install

Build with npm run build. It will create a dist folder. For seamless development with auto-reload, npm run dev - if you do this, put any respacks in public/respacks so they're found by the local server.

There's a few places to change, here's a list:

• The documentation in the INFO tab. Found in HuesInfo.svelte
• The mouseover documentation & button for the beat in EDITOR. Found in HuesEditor/Main.svelte
• The list of beats in HuesCore.svelte.ts
• If you've added some new display behaviour:
  • A new beat type in the Effect enum
  • A handler in the beater function
  • Appropriate state for the effect in HuesRender.ts
  • Appropriate rendering code in HuesCanvas.ts