Giter VIP home page Giter VIP logo

0x40-web's Introduction

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

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"

Install (Make your own Hues)

  1. Start by downloading the latest release. These are minified and load faster.
  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. If your html is in a different location to your lib folder: * Edit workersPath to point to the correct (relative) location.
  5. Edit the defaults object so the respacks list contains the respacks you wish to load.
  6. Optional: Add any extra settings to the defaults object.
  7. Upload everything to your server!

Example settings

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

Settings object

See HuesSettings.js 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, v5 preferred.
Install the required packages for the build:

npm install gulp -g
npm install

Build with gulp. Make a release folder with gulp release. For seamless development, auto-minify changed files with gulp watch.

0x40-web's People

Contributors

jerwuqu avatar mon avatar mseymour avatar notpushkin avatar rctdude2 avatar theamm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.