0x40-web

A fairly complete HTML5/CSS3 Canvas + Web Audio clone of the 0x40 Hues Flash.

Should work on most modern browsers.

Example pages:

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

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)

Creating your own songs

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!

Editing respacks

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.

Install (Make your own Hues website)

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: * Edit workersPath to point to the correct (relative) location.
Edit 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!

Example settings

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

Settings object

See HuesSettings.ts for the possible options you can put into the defaults object.

Query string

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&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.

Building

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 - if you do this, put any respacks in public/respacks so they're found by the local server.

Adding a new beat character

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.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

shinmai/0x40-web