Categories
Audio-Visuals AVVX

AVVX – About / Instructions

ABOUT AVVX

AVVX (Audio Visual Vector eXchange) is a visual sequencer for VJing and audiovisual performances, using vector graphics. Based on the open image standard SVG (Scalable Vector Graphics) and JavaScript. Free, open source. Project by Nuno Correia and collaborators. To contribute visuals, send an email to: mail[at]nunocorreia.com.

(More AVVX videos)

Why use Scalable Vector Graphics (SVGs) for live visuals?

  • SVG is an open standard
  • The format is supported by most vector graphics drawing apps
  • Vector graphics are very light and flexible, quick to create, and easily animated
  • There is a long tradition of using simple geometric elements for visual music
  • “Less is more” approach, instead of / in addition to using more powerful tools

Credits

INSTRUCTIONS

AVVX combines “groups” of SVGs retrieved from the XML database, and animates them using several possible behaviors. AVVX uses random files from the SVG “groups”. The SVG “groups” can also be single files. Up to 100 groups are supported. AVVX runs in a browser. Google Chrome is recommended.

1. Keyboard commands

Change vector graphics:

  • Row 1-0 : change first digit of the SVG group number (for example, “2” in group “21”).
  • Row Q-P: change second digit of the SVG group number (for example, “1” in group “21”, or 1 in group “01”).
  • The group number is shown in the top-left text box, immediately after the behavior name.

Change behavior:

  • Row A-K
  • The behavior name is shown in the first line of the text box.
  • Currently, there are 4 behaviors implemented: Trail, Slide, Zoom and ZoomOut.

Parameters (depending on the behavior):

  • Up-Down: Parameter 1
  • Left-Right: Parameter 2
  • Z-X: Parameter 3
  • C-V: Parameter 4
  • B-N: Parameter 5
  • The possible parameters for each behavior are listed, in order, in the bottom of the screen.

Special on/off keys:

  • Return (enter): toggle play/pause sound
  • Shift: Show/hide background
  • Space : Show/hide text box
  • Ctrl: Shuffle images on/off
  • M: Microphone input on/off
  • L: Show/hide buttons and sliders

2. Graphical User Interface (GUI)

All the above functions have GUI counterparts. Useful for mouse or touch interfaces (tablets etc).

Change vector graphics:

Buttons on the right edge of the screen. Click to change digit 2, press and hold to change digit 1.

Change behavior:

Buttons on the left edge of the screen.

Parameters (depending on the behavior):

Sliders above the respective parameter name in the bottom of the screen.

Special on/off buttons:

  • Top right: play sound
  • Top right: mic on/off (press and hold)
  • Bottom right: Show/hide background
  • Top left : Show/hide text
  • Top left: Show/hide buttons and sliders (press and hold)
  • Bottom left: Shuffle images on/off

3. Adding, changing and removing images and sounds

SVG images can be added to the “images” folder. To have them appear in AVVX, they have to be listed in a “group” in the media.xml file, which uses the XML format.

Images and groups

To add a SVG image to a group in media.xml, simply add the image file name inside a group (after a <group> tag), preceded by a <image> start tag and followed by a </image> end tag.

To create a new group in media.xml, simply add <group> start tag and end tag </group>, and include at least an image in that group.

Example:

<group author="Nuno Correia" url="http://www.nunocorreia.com">
<image>hexa.svg</image>
<image>star.svg</image>
<image>spikes.svg</image>
</group>

You can add author and author URL attribution to each group of images, after “author=” and “url=” in the “group”. If you choose not to add author or URL, leave the two quotes after the respective “=” sign.

Example:

<group author="" url="">

Please note: all groups need to have at least one image, or else AVVX won’t run.

Backgrounds

You can change the default background image by changing the file name after bgimage under the tag <media>. If you prefer not to have a background, you can leave this name empty (simply “”).

Example:

<media sound="Coden-AVOL1.mp3" soundauthor="Coden" soundurl="http://www.avvx.org" 
bgimage="background.svg">

or:

<media sound="Coden-AVOL1.mp3" soundauthor="Coden" soundurl="http://www.avvx.org" 
bgimage="">

Each group can also have its own background. If no background is specified in the <group> tag, the default background will be used. It’s good practice to have a default background if you’re using backgrounds in groups (to be fixed in the future).

Additionally, a video can be used as background. To do so, uncomment the following line in index.htm:

<!-- video src="videos/myvideo.mp4" autoplay loop style="width:100%" / -->

and add a video to the “videos” folder – replacing the filename above with the appropriate name.

Sound

To add a sound, place an mp3 in the “sounds” folder, and change the sound file name in the XML, under the tag <media>.

Example:

<media sound="Coden-AVOL1.mp3" soundauthor="Coden" soundurl="http://www.avvx.org">

You can add author and author URL attribution to a sound, after “soundauthor=” and “soundurl=” in the “group”. If you choose not to add author or URL, leave the two quotes after the respective “=” sign. Example:

<media sound="Coden-AVOL1.mp3" soundauthor="" soundurl="">

Editing the XML file

The media.xml file includes examples, and it might be easier to simply copy-paste existing elements. A simple text editor such as TextEdit on the Mac or NotePad on the PC can be used to edit the XML, or a more powerful tool. However, once you chance the XML, typos might occur, resulting in a blank AVVX screen. If that happens, please open the XML with a browser (Chrome recommended) to check for typos.

4. Creating SVG images

Most vector graphic editors, including free ones, export SVG format. Check this list for SVG export compatibility: http://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors#Export

SVGs are also XML-based files, and can be edited in a text editor in the same way as a XML file (useful for small fixes). Some software (such as Inkscape) adds substantial unnecessary text to the SVG, producing large files that don’t work well in AVVX. This can be cleaned up manually, or with SVG cleanup software.

Notes:

  • Please create your images with center in the upper-left corner of the document (coordinate 0,0). The (0,0) center is used for positioning and rotation. For reference, check the SVG examples on the “images” folder. Backgrounds are usually centred though.
  • AVVX only works smoothly with simple shapes. Complex shapes lead to slowness and glitches (which might be attractive to some). Programs such as illustrator have simplification functionalities that should be used in these cases.
  • It’s good practice after creating your vector graphics to “select all” and “group”. It’s easier for the browser to handle that.

SVG can contain animations. These can be added in the SVG code (more on this in the Extensions page).

5. Downloading SVG images

Visuals (SVGs + XML files) are available for download below, under Creative Commons Attribution license. The .zip files contain an “images” folder with SVGs and an XML index. The default “images” folder and XML can be simply replaced with the downloaded ones, or you can add SVGs to your “images” folder, and copy-paste XML groups to your XML file (read more above about the “images” folder and the XML file). Please keep the attribution metadata.

6. Configuring the server and browser

Due to security restriction on the browser, it is not possible to run AVVX in a browser using local files without configuring a web server. An embeddable web server such as Mongoose (https://code.google.com/p/mongoose/) is recommended.

Alternatively, you can upload AVVX to a server, or use a web service such as Google Drive to host your version of AVVX. You might want to use a URL shortener such as Goo.gl for the resulting URL.

You might need to do a “hard refresh” on the browser occasionally – refresh the browser while emptying the cache. More info: http://wiki.scratch.mit.edu/wiki/Hard_Refresh

To run AVVX in full screen, simply use the full screen option of a browser such as Chrome.

7. Using AVVX on a tablet

AVVX is tablet-compatible. To use it in fullscreen with an iPad for example, you  can access your AVVX URL, then press “share” in Safari, and “Add to Home Screen”. An icon will then appear on the home screen, allowing to run AVVX in fullscreen.

In the iPad, it’s a good idea to disable the Control Centre to avoid swiping conflicts.

Please note that, due to limitations of browsers in tablets, sound reactivity and mic input is not working in tablets.

There are some “hidden” shortcuts for tablets, such as swiping horizontally/vertically for changing group/behavior.

8. Using AVVX at avvx.org, using the AVVX online library

The default AVVX can be played online at: avvx.org/app

Visuals (folder names) can be loaded into avvx.org/app from avvx.org/library, by typing an address following this structure:

avvx.org/app#Folder_Name
(replace Folder_Name by a folder name in avvx.org/library, case-sensitive)

Notes:

  1. Due to server media uploading limitations, avvx.org/app does not yet support video backgrounds or sound playback (only microphone input).
  2. At the moment, not all the material at avvx.org/library is compatible with avvx.org/app. Only materials that have a “folder” icon can be uploaded to avvx.org/app. We’re working in making all (older) materials compatible with the new AVVX, but it will take time.

9. Extensions

It is possible to extend AVVX using other compatible technologies. Other verions of AVVX, besides JavaScript, may also be developed.

Processing

Currently, the 5th AVVX behavior (key “g” or 5th button) is a “Processing” behavior that allows running Processing sketches inside AVVX. The sketches are selectable in the same way as normal groups.

You can add sketches to the “Sketches” folder. It will look better if you copy these 2 lines of code to the begining of your Processing sketch:

void avvx_init() { return "sketchName"; }
void avvx_resize(canvasWidth, canvasHeight) { size(canvasWidth, canvasHeight); }

(replace sketchName by anything you would like to be shown)

In the draw() method of the sketch, add background(0,0) to make it transparent
Add another line in the end of media.xml,  under <sketches>, for example:

<sketch id="0" url="http://www.openprocessing.org/sketch/74380">slash.pde</sketch>

Flash

The old, Flash-based, version of AVVX can still be downloaded: https://code.google.com/p/avvx/

SVG animations

If you open SVGs with a text/code editor, you can add animation behaviors, such as rotation, movement (translation), scale, and opacity/color changes. Links:

Categories
Audio-Visuals AVVX

2014/02 AVVX – Audiovisual Exchange workshop (Helsinki) report

The project “AVVX – Web Platform and Workshop” concluded with a workshop taking place 10-13 February 2014 at Aalto University’s Media Factory. Media Factory also provided the financial support for its production. Nuno Correia (Aalto University School of Arts, Design and Architecture) and Jari Kleimola (Aalto University School of Science) formed the team responsible for the project.

Categories
Audio-Visuals AVVX

2013/10 AVVX Visual Music Workshop @ CC4AV, Riga


Links for the AVVX Visual Music workshop @ CC4AV, Riga 1-5/Oct/2013:

Links

Audio-visual composition: theory, history and state of the art

Workshop links

Baltic Diving Co. photos

Categories
Audio-Visuals AVVX

2013/04 AVVX Visual Music Workshop @ PixelAche/AAVE Festival, Helsinki

The 2 day “AVVX – Visual Music with Vector Graphics” workshop took place at Aalto FabLab, Helsinki, as part of the CCLV – Creative Coding for Live Visuals event – organised by PixelAche/AAVE Festival, 10-11 April 2013. During the workshop, we discussed visual music; participants were introduced to the AVVX app; and prepared visuals for the software.

As per suggestion of the organisers, the sound source for the visualisations would come from one single musician/group. I proposed music by my project Baltic Diving Co (SoundCloud link), with Joel Tammik.

On the 3rd day, 13/April, we had a final performance at Sandro Bar, Helsinki.

Videos from the workshop and showcase (includes other CCLV events):

Photos from the workshop and showcase:

Baltic Diving Co. photos:

AVVX app (free, open source) available at www.avvx.org.

Thank you to course participants, AAVE and PixelAche (in particular Irina Spicaka).

Categories
Audio-Visuals AVVX

2013/03 AVVX Visual Music Workshop @ Estonian Academy of Music and Theatre, Tallinn

The 3 day “AVVX – Visual Music with Vector Graphics” workshop took place at Estonian Academy of Music and Theatre in March 2013. During the workshop, we discussed visual music; participants were introduced to the AVVX app; and prepared audio and visuals for the software.

On the 4th day (8/March), we had a performance at Estonian History Museum, Tallinn, with: Markus Robam, Domenico de Cesare, Malle Maltis, Manus Olesk, Aleksandr Zedeljov, Sander Tuvikene, Taavi Tulev (also performing their own music).

The following video collects several lo-fi recordings captured at the showcase:

Photos from the workshop and showcase:

AVVX app (free, open source) available at www.avvx.org.

Thank you to course participants, Taavi Varm for iPhone filming, EAMT, and in particular Malle Maltis and Paolo Girol.

Categories
Audio-Visuals AVVX

AVVX – Proposal

The workshop intends to bring awareness to the interconnections between the different senses, namely between sight and hearing. Specially developed software, free and open-source, will be used (www.avvx.org). The software analyses audio in real-time, and manipulates visuals according to that analysis.

Participants will develop the visuals during the workshop, and will propose sounds to be used together with those visuals. The visuals are built using static 2D graphics, using any vector graphics software (for example, Adobe Illustrator). Participants should bring their computers and vector graphics software.

There will be a final performance, combining and sonic and visual outcomes of the workshop, via the special software.

The proposed duration of the workshop is of 3 days (approximately 20 hours in total). It can be organized in 3-5 days. For example:

  • Day 1: lecture about visual music and synesthesia; demonstration of the software with pre-prepared sound and visuals.
  • Day 2: development of visuals by participants; proposal of sonic material.
  • Day 3: integration of sound, visuals and software; final performance.

Technical notes:

  • The visuals will consist of 2D vector graphics. I will assist in the production of these graphics, and suggest software for its production or digitization / conversion.
  • One or multiple projections can be used. For each projection, a computer and a projector will be needed.
  • A sound system (amplifier/microphone/speakers/cables/adaptors) will be needed for sound. In the case of multiple computers, a mixer will be needed as well.
Categories
Audio-Visuals AVVX

2012/06 AVVX Visual Music Workshop @ Marmelada 2 / Independent Biennial, Ljubljana

The 3 day “AVVX – Visual Music with Vector Graphics” workshop took place at Marmelada 2 / Independent Biennial in Ljubljana, Slovenia, June 2012. We discussed visual music; participants were introduced to the AVVX app; and prepared audio and visuals for the software. They played with the code, and explored other software. On the 3rd day (4/June), we had a showcase @ Kino Siska, Ljubljana. Eight days later (12/June), we had another showcase @ Krizanke, an old monastery in the center of Ljubljana, as part of the UF! Festival.

The following video collects several lo-fi recordings captured at the first showcase, and reflects a large variety of music and visual styles:

The next video focuses on the second showcase, with several interviews:

More on AVVX (free, open source): www.nunocorreia.com/apps/avvx
More on the Independent Biennial: www.bienaleneodvisneilustracije.com/