AV Clash

AV Clash is a Web-based project by Video Jack (André Carrilho and Nuno Correia, with Gokce Taskan), which allows for the creation of audiovisual compositions, consisting of combinations of sound and audio-reactive animation loops.

AV (AudioVisual) Clash is composed of 4 audiovisual “objects”, which enable playback and manipulation of four different loops of sound and audio-reactive visuals. Objects can be dragged and thrown, creating interactions (clashes) between them.

The sounds in AV Clash are retrieved from Freesound.org, an online sound database. Users can change which 4 sound and animation loops are contained in each of the objects, from a large variety of options.

On an initial level, AV Clash facilitates playfulness, discovery and randomness. But it also offers the possibility of going deeper into each object, customizing its sounds and animations.

With AV Clash, Video Jack develop further concepts explored in their previous project AVOL – AudioVisual OnLine (2007).

Credits and Acknowledgments

AV Clash is a Video Jack project, by André Carrilho (animation / graphic design),  Nuno Correia(interaction design) and Gokce Taskan (programming).

AV Clash was inspired by the work of visual music pioneers such as Oskar Fischinger, John Whitney and Norman McLaren; early computer games; and more recent works such as Toshio Iwai’s Electroplankton, IXI software, Tuomo Tarkiainen’s Audiotarium, Reactable, and Freesound Radio.

Video Jack would like to thank the developers of Freesound.org and its community of sound enthusiasts.


From Create Digital Motion:

What if you could witness the birth of life at a microscopic level in some alternate, digital universe? And what if it made a deliciously-raunchy racket?
That’s the sense I get looking at AVCLASH, a free audiovisual interactive artwork built in Flash that runs in your browser.

Full article:

From CreativeApplications.Net:

AV Clash is a Web-based project by Video Jack (André Carrilho and Nuno Correia, with Gokce Taskan) evolved AVOL – AudioVisual OnLine (2007), which allows the creation of audiovisual compositions, consisting of combinations of sound and audio-reactive animation loops.

Full article: http://www.creativeapplications.net/flash/av-clash-flash-webapp-sound/

From Gearfuse:

AV Clash lives up to its name, delightfully.
There’s a surprising amount of functionality hidden in those whorls and loops.

Full article: http://www.gearfuse.com/av-clash-lives-up-to-its-name-delightfully/

From The Awesomer:

This Flash-based interactive artwork lets you create mesmerizing audiovisual compositions which belong on a big screen at a rave.

Full article: http://theawesomer.com/avclash/

From The Creators Project:

Fancy turning your browser into a crackling audiovisual clashing of bold colour and whirring bass? Of course you do. For those days when YouTube videos just aren’t cutting it, artists Video Jack have created AV Clash, an in-browser interactive artwork (designed in Flash). The audio-reactive animation loops combine with sounds from Freesound.org to make for an addictive way to annoy your co-workers.

Full article: http://www.thecreatorsproject.com/en-uk/blog/make-audiovisual-mayhem



I. Objects and tags

1. There are 4 objects in AV Clash, distributed in a virtual “stage”.

2. Each object has a “tag” associated to it, which is retrieved from Freesound.org (for example: “voice”, “percussion”).

3. The tag is a filter to the possible 4 sounds and 4 animations it may contain on the main interface.

4. There are 8 animations and several dozens of sounds available per tag.

5. The sounds are retrieved based on their popularity rank in Freesound.org.

6. The user may change sounds and animations, and even the tag, of each object.

7. Each tag has its own color, to facilitate identification.

8. Currently, more than 10 of Freesound.org’s most popular tags are available.

9. There is also a special tag for the project, “avclash”.

10. Freesound.org users can bring sounds to the project by tagging them as “avclash”.

II. Object “ring” and buttons

1. Each object has a ring, which contains its main control elements.

2. The ring allows for dragging and throwing the object around the stage.

3. Rolling the cursor over the ring reveals the main interface for the object.

4. The ring also incorporates two faders (for volume, on the right, and audio effect intensity, on the left), shaped as semi circles.

5. The effect fader is colored according to the current active effect (cyan for echo, magenta for filter).

6. If an object is moving, clicking anywhere inside the ring will stop it. An info “balloon” gives additional information about the object and its buttons, on rollover.

7. Inside the ring there are 9 buttons:
– four white large loop selection buttons;
– red stop button and green “solo” button (only visible when object is playing);
– cyan “echo” effect button and magenta “filter” effect button (only visible when object is playing);

– tag-colored “settings” button in the center.

III. Object settings

1. By pressing the center button of the object, the 4 selection buttons expand into 4 larger rectangles, allowing to pick and adjust sounds and animations for the respective buttons, from drop-down menus.

2. Sliders on the sound thumbnail allow for trimming the sound loop.

3. A slider on the animation thumbnail allows for adjusting the reactivity of the animation to the sounds.

4. The tag can be changed by clicking on the tag name on top and choosing from a range of tags.

5. A cycle button (on/off) is available in the bottom. In cycle mode, the object plays the 4 active sounds sequentially, clockwise.

IV. Main stage menu and backstage

1. There are 2 buttons in the top left corner – “backstage” and “shuffle”.

2. Pressing backstage button aligns objects to their original sections on the screen, identifiable by background bars with respective tag color. This is called the “backstage”.

3. Pressing backstage button also stops movement of objects.

4. Therefore, backstage can be useful for controlling multiple settings in a more static environment.

5. Once in backstage, pressing backstage button again resumes the original “stage” view.

6. The shuffle button randomizes which sound is playing within each object (if any), and also its movement.

7. The shuffle button is not available on backstage.

V. Loading sounds

1. As previously mentioned, Freesound.org users can bring sounds to the project by tagging sounds in Freesound.org as “avclash”.

2. Freesound.org sounds tagged as “avclash” will become available in the “avclash” object.

3. This applies to sounds uploaded by the users, or any other sound in Freesound.org.

4. We recommend the use of WAV and MP3 formats.