Modulator Jane     Connect    

Modulator Jane setup


Modulator basics

Modulator Jane™ is made out of two main components : the modulator component and a light show component.

The modulator performs a deep analysis of the digital sound input, and decomposes the sound content into several frequency bands : each band represents an interval of wavelengths. For example, you may divide the sound into two bands : in this case, the high notes will be assigned to one band, and the low notes (bass) to the other band. The sound level of each band is then analyzed, and will determine the luminosity of the linked areas on the screen.

Implementing Modulator Jane, you are the one who decides how many bands there must be (from 1 to 15). If you ask for six bands, the amplitude of the sound waves will be continuously distributed into these six bands, according to the actual wavelengths in the sound.

The only difference between the light shows is the way in which the mesured sound level in the frequency bands will act on the screen image.


The Spotlights light show

The light show area is divided into regular geometric figures, each of them figuring a light spot of a particular color. There are as many light spots as frequency bands defined for the modulator : each frequency band is assigned to a single light spot, and the amplitude level of a band at any moment determines the intensity of the color displayed by the light spot. You are free to determine yourself the base color (that means the color at full saturation) of each light spot.

Geometric figures for the light spots include rectangular, rounded rectangular, oval, and octogonal masks (all included in the same component : SpotDemo.class)

To the Spotlights light show : Click here.


The Russian Dolls light show

This light show uses a different image for each song. The light show area is divided into concentric geometric figures that are interlocked in each other, like Russian dolls. There are as many concentric areas in the light show as frequency bands defined for the modulator : each frequency band is assigned to a single area, and the amplitude level of a band at any moment determines the level of the image color inversion that occurs in that area. In each area, image color inversion may take a different base color, representing the maximum inversion level allowed. Practically, the base color is the color you would see at full saturation, if no image is provided for a song.

Images are standard GIF or JPEG files. If necessary, the applet will cut the edges and the borders automatically, in order to match the limits of a specified concentric area.

Geometric figures include rectangular, rounded rectangular, octogonal, or oval masks (all included in the same component : RDollsDemo.class).

To the Russian Dolls light show : Click here.


The Grids light show

Like the Russian Dolls light show, this light show uses a different image for each song. The light show area is divided into horizontal and vertical grids, which delimit the area corresponding to the frequency bands. The number of grids is not limited by the actual number of bands in the modulator, since the same band may be linked to several grids. As in the Russian Dolls show, the amplitude level of a band at any moment determines the level of the image color inversion that occurs in the linked areas. For each band, image color inversion may take a different base color, which represents the maximum inversion level allowed on the image.

Images are standard GIF or JPEG files. If necessary, the image is automatically centered and/or cut on the borders, in order to match the limits of the displayed area.

To the Grids light show : Click here.




Materials

Here are the files you need in order to get this applet to work on your server or locally on your computer :

  • MJaneDemo.class : the modulator component.
  • LightShowDemo.class : the light show interface.
  • One (or more) light show component : SpotDemo.class (Spotlights), RDollsDemo.class (Russian Dolls), GridDemo.class (Grids).

All *.class files should stay in the same directory.
  • sound files : from 1 to an unlimited number of audio clips.

The audio clips should match the standard Sun's AU format (8-bit mu-law 8000 Hz mono). You may use the Modulator Jane's Sound Converter to convert your WAV, MP3, AIFF or AU files into the right format.

Audio clips should be located in the same directory, or a subdirectory of the *.class files directory, for browser security reasons. Do not weight your pages down with clips : audio data is heavy stuff to download ! (Tip : try to use samples that can be played in a loop, whenever possible : they don't have to be that heavy, and may be played forever).
  • image files : the ones for the light show.

Each audio clip item in the song menu can be linked to a different image file. This allows you to choose images related to each song theme. However, if you wish, the same image may be used by different clips, and it is even possible to offer a choice of different images for the same audio clip.

As images may be cut on their edges - depending on various parameters of the applet - by the light show, your best choice will be images where the main subject(s) stands right in the center.




Setting up the HTML

This is the simplest way to get your applet to work :

1. Copy the <APPLET> tag from any demo HTML file to your own HTML document.
2. Customize the HTML code to get what you want.

Full control of the Modulator Jane parameters - both for the modulator and the light show - is handled through the <APPLET> tag. In this tag, additional blank spaces may usually be added without problem.

You will find below an example HTML, considering the following file organization :



<APPLET
  CODEBASE="class/"

  CODE="MJaneDemo.class"
  WIDTH=500 HEIGHT=310> 		Applet tag
URL to the *.class files directory, from the HTML document.
Name of the applet class file.
Width and Height of the applet.
< PARAM
  NAME="BANDS"
  VALUE="4">

Optional applet parameter tag

Number of frequency bands for the modulator.

Possible values : 1 to 15

The sound wave is divided into a certain number of frequency bands that will range from low frequency (bass) to high frequency (sharp). Each band is associated with an area in the light show. Short waves are associated with the central parts and long waves (bass) with the peripherical parts.

This parameter automatically determines the number of 'dolls' in the light show.

Default : 6
<PARAM
  NAME="SONGS"
  VALUE=
  "Mona Lisa :
   class/snd/djingle.au @
  Rembrandt :    class/snd/dfunk2.au
   %loop @
  Souvenir 304 :     class/snd/dfunk1.au">

Applet parameter tag

List of the audio clips for this applet. Each song item is described by :

  • a generic memo that will be displayed in the song choice list on the control area of the applet. Should be short ! (example : Mona Lisa).
  • the URL of the sound file (example : class/snd/djingle.au), relative to the html page directory.
  • the audio mode, which can be set on PLAY (default), LOOP (the audio clip plays continuously in an infinite loop), or AUTO. AUTO only applies if there is one single song in the list : the clip is played automatically in an infinite loop when the WEB page is loaded, and the play button on the control area of the applet disappears.

If the list only contains one single song, the song choice list on the control area of the applet disappears.

No default. This parameter must be set.

Item separator : @;

<PARAM
  NAME="LIGHTSHOW"
  VALUE="RDollsDemo">

Applet parameter tag

Name of the current light show : write here the name of the chosen light show component file, without the ".class" suffix.

Possible values are SpotDemo (spotlights), RDollsDemo (Russian dolls), GridDemo (grids)

No default. this parameter must be set.

< PARAM
  NAME="BGCOLOR"
  VALUE="#000000">

Optional applet parameter tag

Background color of the applet : you can set this parameter just like the BGCOLOR parameter in the <BODY> tag of your HTML page.

Example (blue) : #0000FF (hexadecimal notation) or 255 (decimal notation)

Default : #000000 (black)

<PARAM
  NAME="SATURATION"
  VALUE="20">

Optional applet parameter tag

A fixed value for saturation, as an integer between 0 (no color modulation) and 100 (maximum saturation). Setting this parameter makes the saturation scroll bar disappear from the control area of the applet.

<PARAM
  NAME="SHOWPARAM"
  VALUE=
  "param1:values1;
   param2:values2;
   ...">

Applet parameter tag

This tag contains all the parameters that are specific to the particular light show component defined in the LIGHTSHOW parameter tag. The content of this tag may vary from one light show component to the other. The structures of this tag for the different light shows are listed below.

<PARAM
  NAME="SMARTLOAD"
  VALUE="0">

Optional applet parameter tag

Set this value to zero if you don't want the load panel to be displayed. Useful on your local file system, where the loading of the sound files is fast enough.

Default : 1024

</APPLET> End of the applet tag



Russian Dolls ShowParam Tag

<PARAM
  NAME="SHOWPARAM"
  VALUE="
   IMAGES :
class/img/mona.jpg@
class/img/rembrandt.jpg@
class/img/xan0304.gif;

Optional light show parameter tag

List of the images associated with the songs : this list contains the URL's of the image files. If present, this list must contain the same number of items as the SONGS list. Associated images and songs must share the same position in both lists. A URL called NULL means that no image is associated with the corresponding song.

The same image may appear more than once in the list : then, this image will be associated with several audio clips. Opposite case : in the song list, the same audio file may be associated with several memo names. Since these are considered as separate items, you may associate several images with the same clip.

URLs are relative to the location of the html page.

Item separator : @

Default : no images

   DESCRIPTORS :
    Leonardo :
     Mona Lisa @
    Rembrandt,
     by himself @
    NULL;

Optional light show parameter tag

List of descriptors that must be displayed on top of the light show area. If present, this list must contain the same number of items as the SONGS list. You may typically use it to display the name of the song, of the music band, of the image's author, but it will display any type of message anyway ! NULL means that no descriptor will be displayed for this song.

Item separator : @;

Default : no descriptors

   BANDMASKS : 0 @2 @1;

Optional light show parameter tag

List of masks to use with each image. If present, this list must contain the same number of items as the songs list. This parameter tells the light show which concentric area (puppy) should represent the limits of the images : 0 means no mask. 3 means a mask of 3 external concentric areas.

Images are first centered, then edges and borders are masked in order to keep empty the number of areas specified by this parameter.

Item separator : @;

Default : no mask

   GEOMETRY : oval;

Optional light show parameter tag

Determines the shape of the concentric areas.

Possible values are : RECTANGULAR, ROUNDRECT, OCTOGONAL, or OVAL

Default : OVAL

   COLORS :
    #6050A0 @
    #FFFFFF @
    #FFFFFF @
    #FFFFFF;

Optional light show parameter tag

List of the base colors to use in each concentric area. If present, this list must contain the same number of items specified in the applet's BANDS parameter. Description of the colors is similar to the BGCOLOR parameter, and supports decimal and hexadecimal notation. Each base color is associated with its corresponding concentric area. The list goes from the periphery (longest waves) to the center (shortest waves).

Default : white (#FFFFFF : maximum inversion)

Item separator : @;

   CENTERWIDTH : 300;

Optional light show parameter tag

Width of the smallest concentric area (the one in the middle).

Default : 30

   CENTERHEIGHT : 150;

Optional light show parameter tag

Height of the smallest concentric area (the one in the middle).

Default : 30

   TEXTCOLOR : #00FF00;

Optional light show parameter tag

Color of the descriptor's text

Default : green (#008000)

   TEXTSIZE : 16;

Optional light show parameter tag

Size of the descriptor's text

Default : 14

   LOADMESSAGE :

    Loading...


    @40">

Optional light show parameter tag

Message to be displayed on the load panel when loading the sound files.

Distance between the top of the light show and the top of the load panel (here : 40 pixels). If this (optional) value is not specified, the load panel is displayed in the center of the light show.

("> marks the end of the SHOWPARAM tag)

Default : Loading song...



Grids ShowParam Tag

<PARAM
  NAME="SHOWPARAM"
  VALUE="
   IMAGES :
class/img/mona.jpg@
class/img/rembrandt.jpg@
class/img/xan0304.gif;

Optional light show parameter tag

See Russian Dolls.
   DESCRIPTORS :
    Leonardo :
     Mona Lisa @
    Rembrandt,
     by himself @
    NULL;

Optional light show parameter tag

See Russian Dolls.
   COLORS :
    #FF80FF @
    #FFFFFF @
    #8080FF @
    #FFFFFF;

Optional light show parameter tag

List of the base colors to use in successive grid areas.

See Russian Dolls.

   HDIVISION : 5;

Optional light show parameter tag

Number of lines of grid areas (horizontal).

Range : 1-20
Default : 5

   VDIVISION : 10;

Optional light show parameter tag

Number of columns of grid areas (vertical).

Range : 1-20
Default : 5

   HSEPARATION : 1;

Optional light show parameter tag

Thickness of the horizontal grids (masked areas).

Range : 0-100
Default : 3

   VSEPARATION : 1;

Optional light show parameter tag

Thickness of the vertical grids (masked areas).

Range : 0-100
Default : 3

   TEXTCOLOR : #00FF00;

Optional light show parameter tag

See Russian Dolls.

   TEXTSIZE : 20;

Optional light show parameter tag

See Russian Dolls.

   LOADMESSAGE :
    Loading...
    @20">

Optional light show parameter tag

See Russian Dolls



Spotlights ShowParam Tag

   DESCRIPTORS :
    First experience @
    NULL @
    NULL;

Optional light show parameter tag

See Russian Dolls.
   COLORS :
    #FF00FF @
    #0000FF @
    #008000 @
    #FFFF00;

Optional light show parameter tag

List of the base colors to use in the spotlights.

See Russian Dolls.

   GEOMETRY : oval;

Optional light show parameter tag

Determines the shape of the spotlights.

Possible values are : RECTANGULAR, ROUNDRECT, OVAL or OCTOGONAL

Default : OVAL

   SPOTWIDTH : 40;

Optional light show parameter tag

Width of each spotlight.

Default : 30

   SPOTHEIGHT : 40;

Optional light show parameter tag

Height of each spotlight.

Default : 30

   TEXTCOLOR : #FFFF80;

Optional light show parameter tag

See Russian Dolls.

   TEXTSIZE : 20;

Optional light show parameter tag

See Russian Dolls.

   LOADMESSAGE :
    Loading...
    @20">

Optional light show parameter tag

See Russian Dolls.



Tips

  • Test your applet in every common screen resolution mode (640 x 480, 800 x 600, 1024 x 768) to check if the control panel is always fully visible. If not, you should increase the width of the applet (WIDTH).
  • Do not use heavy audio clips, as they take a long time to be loaded !
  • Images and audio clips may be copyrighted. Make sure to comply with copyright rules if you are not their author.




Copyright © 1999-2000 Neural Semantics sprl