Categories
AV 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:

Leave a Reply