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.
Start by downloading the latest release
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:
workersPath
to point to the correct (relative) locationEdit the defaults
object so the respacks
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_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¤tUI=v4.20
There are two special settings here:
firstSong
can just be written as song
.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 npx webpack
. It will create a dist
folder. For seamless
development with auto-reload, npx webpack serve
- 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:
HuesInfo.svelte
HuesEditor/Main.svelte
HuesCore.ts
Effect
enumbeater
functionHuesRender.ts
HuesCanvas.ts