AH Squared

Creating a synth toy in HTML5 and Javascript

ahsquared — Sun, 18 Jul 2010 13:00:30 +0000

It’s been a while since posting…life eh! Anyway, I’ve been actively working on a synth toy/tool that works in the browser using only HTML5 and Javascript (and jQuery [yes this is also js ], mainly to speed things up). It is here: http://ahsquared.com/synth/audiogen.html.

I have made no attempt yet at UI design or even any kind of prettiness, just getting the functionality squared away. This borrows heavily from a blog post by Steven Wittens for how to create and manipulate the audio samples.

I had been separately working on a little processing.js app that was going to make use of soundmanager2. I decided to change it to use html5 (although that is now also supported by sm2).

I am writing the audio directly to the tags as base64-encoded data URIs (audio samples wrapped in a wave file header), so I can generate them on the client side taking into consideration user choices about frequency, panning, volume, filter sweep to a second frequency, duration, and adsr envelope. There is also a waveform display, using the

You can name the samples you create, and play them back, yay…boring unless you’re a synth geek! So you can also choose a sound from a dropdown and then click in the dark grey box and create a ball that plays back your sound when it hits something. You can make as many sounds as you want, and attach them to different balls. The balls also absorb other balls and their sound (when I get it working properly) when they collide with smaller ones.

This is all very rough at this point, the UI is god-awful, but will be worked and prettified soon.

Until then have fun.

Note: there is definite bugginess still, let’s say this is alpha stage.

While I was looking around last night, I came across Pulsate, which would have been very inspiring had I seen it before I got this far. I had played with Tonematrix previously. Everything Andre does is pretty sweet (even if it is Flash )

Cheers,

Andre

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Connecting Visual Studio to IE6 in a Virtual Machine

ahsquared — Fri, 14 May 2010 05:15:21 +0000

So, you’re developing web applications using Visual Studio and you’re a good boy or girl and are making sure you’re code is cross-browser compatible (as well as standards compliant of course, right, riiight?). We’ll it gets tricky right. You want to check Firefox, Chrome, Safari, Opera (for the 5 people that use it ;P), IE8, IE7, IE6, etc…and then all of that on PC/MAC (you could even check on linux, but come on really, who has that kind of time.) Well, you start installing browsers, and all goes well until you hit IE6.

Actually you probably thought to yourself that you might want a couple different versions of Firefox: you can do that with the Firefox portable versions and by following the directions here to modify firefox to allow multiple instances. For Safari and Opera on PC you can look at Browserseal.BrowserPack. On MAC you can check Michel Fortin’s site where he has packaged different versions of Safari and documented the process. IE8 allows you to switch between IE8 rendering and IE7, but not IE6. BrowserPack allows you to install all three versions of IE, but they are not native. I prefer to use a Windows XP mode Virtual PC with IE6 on my Windows 7 (64-bit) machine. This is well documented elsewhere (including how to get it to run on Win 7 Home).

Now you may or may not be aware that the web server built in to Visual Studio will not allow you to connect to it from another machine (which it considers the Virtual PC to be). So we have to configure a different server to test our project on. We could use IIS (which I found to be ridiculously finicky to set up, although I did get it working), but there is an easier, free way: Cassini Web Server.

It couldn’t be much simpler. Give your site a name, generate an ID for it with the button, and enter the physical path to the project files. Click save and you are done. Now this can be accessed by the virtual machine (or any machine that has access to yours) by the machine name: and the port assigned by Cassini or you.

There is one caveat and that is that if you’re project is strictly a 32-bit application Cassini (when installed on a 64-bit machine) will return an error. But if you go to this forum post on the Cassini website and ask for the 32-bit .exe (you will have to log-in) they will not only gladly email them to you, but also give you code samples on how to programmatically switch between the two different .exes as required by your project. I am only doing front-end development so I have chosen to change them manually for now.

I hope that helps someone.

Cheers,
Andre

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Looking for a place to live

ahsquared — Thu, 25 Feb 2010 11:23:53 +0000

Well the hunt continues for an apartment here in lovely Sydney. Could you believe (if you are not from here) that it has been a month of looking? We have inspected a score of apartments at prices ranging from $450 to $550 a week (yes, for those of you in TN who may be reading this, that is dollars and per week!!) and found only 1 place worth living in and someone else got it. Even once you have found a place, inspected it, applied for it (the process is almost more grueling than looking for work!), you are competing against others that want it. At the upper end of the range the competition is not so fierce, whereas at the lower end you can be viewing an apartment with 40 other people! Well we’re on the line for a couple places and with luck we will have a home by early to mid march.

Cheers,
Andre

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Facebook Select All Bookmarklet

ahsquared — Sun, 10 Jan 2010 20:03:33 +0000

For some reason Facebook seems to think that its users love clicking and so refuses to give us a Select All button (is that part of the monetization scheme? are they going to charge for it?) Anyway I can’t stand it, so I found a little bookmarklet that will invite all your friends.

The one I found worked well but it selected everyone, even those who were already members, so I altered it so it would only select friends who needed the invite. Follow the steps below to create the bookmarklet that makes this work. The instructions are for Firefox, but should be similar for other browsers.

How to create a Firefox Bookmarklet The best way to do it would be to add this as a browser bookmarklet. So in FireFox:

Right click next to your other bookmarklets and select New Bookmark.
In the Name field type: FaceBook Select All (or whatever you want)

In the Location field copy and paste the code you see below in the code box exactly as it is. You can leave the KEYWORDS and DESCRIPTION field blank. They aren’t necessary.

javascript:elms=document.getElementById('friends').getElementsByTagName('li');for(var fid in elms){if(typeof elms[fid] === 'object' && elms[fid].className != 'disabled'){fs.click(elms[fid]);}}

Hit Add.

You can also just drag this link to your bookmark toolbar: FB Select All

Now wherever you are adding friends to an event or group using the Facebook friend selector you can click the bookmarklet and it will select everyone who is not already a member.

Enjoy.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Merry and Happy Christmas to all!

ahsquared — Thu, 24 Dec 2009 16:38:05 +0000

Hi all,
New Years resolution is to blog a lot more. Shouldn’t be hard as I haven’t been on here much in the last few months. I will begin by trying to catch up on the travels and adventures that AH cubed have been sharing. But for now let me just say Happy Christmas to the Aussies and an early Merry Christmas to the Yanks and Brasileiros.

Cheers,
Andre

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

When it rains it pours

ahsquared — Tue, 05 May 2009 12:57:23 +0000

I made up a patch in Pure Data that allows me to control the elements…mwaahhaahaha! Well, it allows me to create the sounds of the elements actually. Angela and I led a master class at Sydney Dance studios today. Angela led and I accompanied. I created music with a mixture of beats running from Ableton Live and played Bass and Tenor Bass (this is my Samick Bass with tenor strings…basically guitar strings long enough and thick enough to put on a bass). I love the sound of my tenor bass. It’s like a guitar with tons of fundamental! It’s a bit hard to play, but worth it. With this setup I created a mix of algorithmic glitch and techno and rock and even a bit of afrobeat.

There was one section of the class however that featured an improv based on the four elements (earth, air, fire and water). So for that part I layered some ambient musical sounds with sounds of…earth, air, fire and water.

So here is a bit of playing around with this patch to create a rainstorm (no music here). There are no samples used, it is all generated in real time and manipulated by me. The sounds are all created by the filtering and other mangling of white noise generators.

This patch borrows heavily from Andy Farnell’s tutorials on those sounds. Here is the patch.

Experiments with Pure Data and Karplus Strong synthesis This is just a short sample of a very basic...
Karplus-Strong synthesis and randomness This is the second installment of a sound a day....
Algorithms and Ambience I spent a couple hours this evening putting together a...

Related posts brought to you by Yet Another Related Posts Plugin.

Algorithms and Ambience

ahsquared — Mon, 27 Apr 2009 13:26:58 +0000

I spent a couple hours this evening putting together a track that uses some algorithmically generated (although I use that term loosely, as most of the variation is from randomness…see this post for details) sound. I recorded some of that sound from a Pure Data patch. One thing to note is that the sound is all tempo synced to 120 bpm, but the rhythms vary randomly within that, but always on beat. So the rhythms can be on any 32^nd note or 16^th note, etc. Then I imported this into Ableton Live 7 (i have 8 also but it is really buggy at the moment, grrr).

I then used a cool plugin from Koen at smartelectronix called KTDrumTrigger to generate a sort of beat (I wanted it to be loose and fugly). This plugin is a lot like Drumagog (or so I assume not owning or having played with Drumagog!) in that you can feed it audio and dissect it into bands and then trigger midi notes according to the envelope and velocity of the incoming audio. If that doesn’t make sense just check out the plugin, it’s free. Then I turned the plugin off, slowed the loop down by a factor of 8, and ran it through some AutoPan.

I then duplicated the track (which is stereo) and offset it a bit and ran both through some reverb (another free plugin called reverbering from nusofting). It’s a nice lightweight reverb that does a good job…no need fro pristine convolved reverb on a track like this. So now I had some glitchy low and high end with a funky (not as in James Brown, as in squarepusher, but gentler) rhythm track. Well I wasn’t happy with the drumminess of it so I replaced the samples with some string bass.

Time for another free plugin, this time a synth: Oatmeal. It’s not much to look at (and the website is even less!), but it has a sound that I like and almost infinite tweakability (presets are for the lazy). Some simple chords and some filtering and off we go.

Now let’s compliment that with some nice (but very cheap, and not at all realistic, but that’s why I like it) flute from another free plugin called Tapeworm from tweakbench. A slow melodic line, with some more filtering and we are getting something that sounds like some sort of song! Finally I brought in a percussion loop that has been seriously filtered, Beat-Repeated, and delayed, and the original drum loop that was generated from the original algo loop and again destroyed beyond recognition. Mixed it all up with some reverb, then sequenced the different parts coming in to give it some flow.

Now if you’ve listened to it you’ll notice an effect that I enjoy a lot (although all good things in moderation!) called TapeStop (free…makes you wonder why you should buy plugins, huh…just kidding…there are still some things worth paying for) from DBlue (Illformed) also known as Kieran Foster. This plugin is a small subpart of a larger, really amazing plugin called Glitch, that you should download and try right now!

So that’s the process. The reasoning was that I wanted to start with something algorithmic and rhythmic and make something ambient, and listenable. I think I’ve done that. I call it “Algo Ambo.”

Enjoy.

Experiments with Pure Data and Karplus Strong synthesis This is just a short sample of a very basic...
Karplus-Strong synthesis and randomness This is the second installment of a sound a day....
When it rains it pours I made up a patch in Pure Data that allows...

Related posts brought to you by Yet Another Related Posts Plugin.

Karplus-Strong synthesis and randomness

ahsquared — Fri, 24 Apr 2009 16:11:57 +0000

This is the second installment of a sound a day. It is a bit longer. I have now implemented a continuous randomization of the note values and durations in the sequencer, as well as the delay times in the K-S algorithm. It has an intriguing quality now. It never repeats and yet is quite rhythmic which makes your mind try to assign patterns. There are fleeting bits of pattern that are tantalizing without actually going anywhere and yet I find it quite fascinating to listen to. I have created two copies with independent timings and sent one to the left channel and one the right. The polyrhythms and occasional harmony add to the nagging feeling that something is happening that makes some sense, and yet it is driven by random number generators and filtered noise generators. It feels a bit fractal to me although there is nothing really fractal about it. It will be interesting to see if adding a fractal nature to the “patterns” sounds more interesting. By this I mean creating nested rhythmical and harmonic blocks. I’ll give it a go and post the results here soon.

Again this is the dry sound coming out of Pure Data. I have attached the patch for anyone who is interested.

Experiments with Pure Data and Karplus Strong synthesis This is just a short sample of a very basic...
Algorithms and Ambience I spent a couple hours this evening putting together a...
When it rains it pours I made up a patch in Pure Data that allows...

Related posts brought to you by Yet Another Related Posts Plugin.

Experiments with Pure Data and Karplus Strong synthesis

ahsquared — Thu, 23 Apr 2009 14:51:03 +0000

This is just a short sample of a very basic (and mostly uninteresting to listen to) sequence. What IS interesting about it is the way it was created. I used Pure Data to generate the sound and create the sequence. There are no samples used here, and no “soft-synths” although strictly speaking I created a simple “soft-synth” here. There is only one sound source here, a sine wave oscillator being fed back into a 2^nd order lowpass filter and a delay line. This is in fact the Karplus-Strong method of physically modeling a string. I have left the burst of sine wave very short here so the attack is a bit stronger than it would be with a normal string I think. But it’s quite remarkable how nice it sounds, with so little going into it. There are no additional effects. This is the dry sound coming out of Pure Data. I have attached the patch for anyone who is interested.

The sequencer I copied from the excellent tutorial/manual site: Floss Manuals. I got turned on to the K-S method by Alex McLean who runs a fascinating blog at yaxu.org, and who implemented it using HaXe, Javascript and Flash. “Babble” is a really fun sound/pattern generator based on sound poetry and vocable words. You should really check it out!

There are a few other things going on in the patch as well. You can select white noise instead of a sine wave which is actually the original way of doing things.

Pure Data Karplus-Strong Patch

And finally, I just want to note that this is the first installment in my effort to create a new sound every day or as near as I can. With the additional goal of creating something out of those sounds every week and then every month making something usable and listenable. This is an idea i got from http://audiocookbook.org which is another great site.

Karplus-Strong synthesis and randomness This is the second installment of a sound a day....
When it rains it pours I made up a patch in Pure Data that allows...
Algorithms and Ambience I spent a couple hours this evening putting together a...

Related posts brought to you by Yet Another Related Posts Plugin.

Interfaces- what are they and what do they do?

ahsquared — Thu, 23 Apr 2009 06:08:33 +0000

Interfaces are everywhere. Every time we interact with something in order to achieve something else we are using an interface. This statement is intentionally vague to represent the fact that this can take an almost unlimited number of forms. Interfaces between humans and machines are cleverly called HMI’s (Human-Machine Interfaces). Computer Interfaces are characterized today by the use of GUI’s (Graphical User Interfaces). However these are just the tip of the iceberg in terms of interfaces, even within their own classification. Wikipedia lists 20 different types of interfaces and this is not meant to be an exhaustive list. There is a whole spectrum of interfaces from cryptic CLI’s (Command Line interfaces) that require the user to learn abstract commands to what are called Zero-Input Interfaces which attempt to ascertain what the users want without any direct input, through the use of sensors. I will illustrate several of these types of interfaces with the following examples.

image from http://en.wikipedia.org/wiki/Dvorak_Simplified_Keyboard

To read more of my thoughts developed during a course in the spring of 2007 (southern hemisphere’s spring…man that is hard to get used to!) at COFA, UNSW taught by Anna Munster, read the miniblog.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.