Here is a collection of javascript programming toys for you to try out. (heck you can even download it), where you can create algorithmic art using code. It was developed when I found that you can actually read the content of a url after the # sign.

Direct link to folder: link

  • urlhashloader.html : First file written. It's just a simple read and display kind of thing. Quite simply it is a platform for enabling remixable content shared via data embedded in the hash fields of urls (via javascript). E.g. shareable algorithmic music Feel free to remix and reuse, but please leave credit.

  • imageGen.html : This is a simple black and white image generator, with some gradient capability. It was my second experiment.

  • imageAlgoGen.html : This is a remixable algorithmic image generator.

  • algoCanvasPlayer.html : This is a remixable algorithmic animation generator. Uses similar codes to imageAlgoGen but includes a t for time variable, which allows for animated scenes.

  • algoMusicPlayer.html : Lets you play any algorithmic music. E.g. Try "Math.round(255 * Math.random());" . A test tone is played when this page is opened. ( 8Khz )

How does this 'save/load' to url work? If you look at the codes below from urlhashloader, it should make sense.

Essentially the informations after the hash in the url is stored in window.location.hash . It is exposed to javascript to enable the back button of a browser to work, even for a fully javascript based website. E.g. Facebook uses it so that you can still go back to a particular page in the site, even if it is dynamically loaded via javascript.

So what this script does, is first loads the hash content to a variable named hash. It is then saved to a global container via document.getElementById("hashContent").value. This is how we "load url hash" process.

Do note that you cannot change the window.location.hash in the url field without having to refresh the page. This is why we have the loadHash() function, to change window.location.hash first, and then reload the entire page. This is how we "save url hash", since the url is now updated (because we refreshed the page) and thus is now copyable by the user.

Just note that there is an issue of firefox converting %25 to %%, which messes the encoding up. Thus until it is fixed, I am using a hack to work around it.