Getting Started

Let's start making dope stuff ASAP. First off, you'll need Wavelength on an iOS device to participate in shows, and Resonator on your Mac to design them. You can download Wavelength on the App Store, and join our Resonator Beta here.

Wavelength

The free client app. iOS 8.0+

or search Wavelength on the App Store

Resonator

Desktop design and control. OSX 10.10+

Join our Beta

or log in to download

Find a bug? Want a new feature? Let us know!

Building Your First Show

Resonator look a little unfamiliar? Not to fear, we'll show you how to easily build your first show in the quick tutorial series below. You can even download the full demo project and a starter pack of GIF animations to get started right away.
  • Read this tutorial

    Name your project by clicking on its name at the top of the window and typing. Save the project by clicking "save" in the menu [⌘S].

    Click the "Add a Cue" button [⇧⌘N] in the Cue Editor (in the bottom right hand corner), and choose the Screen Color event type from the list.

    • The Screen Color event will now appear on the left side of the editor. You can edit the parameters of an event by clicking "edit" and delete events by clicking "delete." Click edit to begin building your first cue.

    • Inside the Screen Color editor, click on the box filled with black, this will bring up the color picker wheel. Moving the slider below the wheel controls brightness, and clicking on the wheel controls color. To add another color to your sequence, click the plus button next to the color box. Choose two colors for this cue.

    • The tempo setting determines how fast our full sequence will play back. To edit the tempo box, click on it and type in a value. For now let's leave it at 60bpm (beats per minute).

    Hit the "back" button in the top left to return to the cue editor. You'll see the event preview of the Screen Color (right above the "edit" button) now has color. Hover over it to reveal the play/pause controls, and click to see the event preview run. You'll notice that the main project preview located directly above it is not exactly synced up with this individual event preview. This is because you can also pause and play your main preview using the same method. As we add more events to our cues, these event previews will become very useful.

    Let's make another cue. Click the "+" button in the bottom right corner of the Cue Stack, located directly to the left of the cue editor.

    Pick Screen Color again and hit "edit." We're going to create a fade effect, so pick a range of colors that gradually progress (i.e. pink to purple) in some color boxes. This will fade from one color to the other and then jump back to the first color. To make it fade back at the end, create more color boxes and drag the colors from the first boxes you made into the new ones, but in reverse order. This will copy the colors to them. Now the first color will fade to the second color, and then fade back (a faster tool for this is currently in development).

    Increase the tempo to 120bpm to smooth out the fade.

  • Read this tutorial

    • Click on the Image event type, and hit edit. Add an image to the cue by dragging it into the box with the white border, or by double clicking to choose a file. You can add a series of images that will sequence through at the set tempo, just like Screen Colors, by pressing the plus button to create each new image slot. For now, let's just use one constant image. We can drag media in from anywhere on the computer, but let's use Resonator's File Browser to make things faster.

    Open the Demo Media folder in the file browser, located directly to the upper left of the Cue Stack, by pressing the "+" button in the bottom right corner and choosing it, or by dragging it into the File Browser from your computer.  The Demo Project includes a folder called DemoMedia, click this folder and press "open."

    Expand the DemoMedia folder by clicking the arrow on its left side, and then expand the internal folders using the same method. Drag "pixelBuild.gif" into the empty slot in the Images editor to add it to the cue.

    • Because this GIF has only transparent and black properties, the Screen Color will show through it when it is laid on top. Transparencies in Images and GIFs allow you play with Screen Color events for more creative control.

    • You'll notice that "pixelBuild.gif" is now displayed in the Media Bay directly below the File Browser. Any media added to a cue will appear in the Media Bay. The Media Bay contains all the media that will be uploaded with the show when you go Live. All media in the bay will be uploaded to the server and then downloaded to phones when they join your show. So if you want a piece of media to be available for quick adding during a show, even if it's not in a cue yet, you'll need to make sure it's in the Media Bay before uploading. To make this clear, the File Browser will grey out and become un-clickable when you're live, since no new media outside of the Bay can be added to your project without re-uploading the show. You can drag files directly into the Media Bay from the File Browser or anywhere else on your computer while offline (not Live), and you can add media from the Bay to cues any time.

    • (Just to phrase the Media Bay uploading/downloading concept differently: if I hand you a box of tools and send you off, I can then call you and tell you how/where to use the tools, but I can't give you any new tools since you've already left).

  • Read this tutorial

    Click on the Sound event type and hit "edit."  Now we can drag an audio file into the Sound slot (outlined in white). For this project we'll use the "RiserBuildDemo.mp3" file, located in the "Sound" folder of the Demo Project.

    • Next, click to check the "Loop" property on, so that our audio file will indefinitely loop back to the beginning of the file every time it plays through.

    • The preview window will now display pink animated bars in its bottom right corner to show that audio is playing in the cue. To mute this preview audio, you can click "Preview -> Mute Preview" in the menu [⇧⌘M]. This will simply mute preview audio in Resonator. It will not mute show audio on devices.

    • Let's rename our cues to make our Stack more clear. Click on the Cue names and type in new labels (let's name our first cue "Intro" and our second "Build"). We can also reorder cues similarly by clicking on their numbers and inputting new values. Cues will always order themselves numerically. For now let's leave those number values alone.

    • Now that we have a build, let's make a drop with some crazy strobes. Add a new cue and name it "Drop" and then click the Flashlight event type and hit "edit." The "starting state" determines whether the flashlight begins in the on or off state when the cue begins, and tempo determines the speed at which one cycle of this on-off or off-on happens each beat. For now let's turn the tempo up to 480bpm and check the Starting State on to get a strobe light effect.

    • Now quickly go back and create a Screen Color event. Make the first color white and the second black, then set the tempo to 480bpm so the screen and flashlight will be in sync. Since we know how to add GIFs, let's also add an image event and drag in our "hypnoSwirl.gif" file to create a hypnotic strobe effect. We also know how to add sound to our cues, so let's create a Sound event and drag in the "dropDemo.mp3" file from the Browser and make it loop.

  • Read this tutorial

    • Let's add a new cue and make an Image event. Hit "edit" and drag in the "paintSplatter.gif" and "eyeBallFill.gif" and set the tempo to a low number (i.e. 5bpm) so that they'll both play for a fair amount of time before switching on screen.

    • If you were to go Live and trigger the Drop cue directly before this, and then trigger this new cue, you would notice that on the phones the Image event has changed to our new GIFs, but the Screen Color, Flashlight, and Sound events have continued to run just as they did in the previous cue. This is because Resonator events Track. This means that they behave essentially like light switches. If you turn a light switch on, you have to explicitly turn it off for it to stop being on. So if you turn on a Screen Color event, or any other type of event, you must then trigger a new Screen Color event in another cue to change the state of the screen. This can be a blank Screen Color cue, turning the screen black, or a new series of colors. Just like the light switch, if you never add a cue either stopping or changing the Screen Color, it will continue to do as instructed. In this current cue's case, since we never told the Screen Color or Flashlight events to change after being set to strobe, they will continue to do so unless we tell them to stop or change.

    • Tracking creates lots of possibilities. For example: leave a Sound cue looping uninterrupted starting at Cue 1 and ending at Cue 10, while triggering different Screen Color and Image events in Cues in-between.

    • So in this cue, let's add a new Screen Color (maybe a red, green, blue flash) and a new Flashlight tempo (maybe 120bpm) to change the state of the screen and flashlight. If we wanted to stop the Flashlight, we would simply add a blank Flashlight event (starting state: "off" tempo: 0).

  • Read this tutorial

    Add another cue and name it "MIDI Jam." Click on the Video event type and hit "edit" and drag the "KaleidaTest.mov" file into the video slot (the box in the white outline). Check the "loop" box on to make the video  loop infinitely. This video file has no audio, but if a video file you use has audio, and you don't want it to play, you can check on "Mute Audio" in the editor.

    • Now go back and add a Flashlight event and hit edit. You'll see the Flashlight defaults to an "off" starting state and a "0bpm" tempo, which turns the flashlight off. Remember, we MUST do this to stop the Flashlight event due to the event TRACKING from the previous cue. Let's also drag the "BreakQuietMidiDemo.mp3" file into a Sound event in this cue and make it loop.

    • Now, my favorite part.  Your Live Panel is located in the upper right corner of Resonator. It houses your MIDI controls (as well as the live Blackout button, which will stop all active events on devices, and the GO button [spacebar], which will trigger the next cue in the Cue Stack). Click "Enable MIDI" to open up your i/o preferences, and then select an input device from the dropdown for your MIDI signals. This can be a physical controller or a virtual MIDI bus. You simply select it from the drop down and hit "Enable MIDI", which will begin transmitting notes as soon as you go Live and start playing.

    NOTE: as of 0.4.1 there are two buttons, labeled MidiGo and Live MIDI. Live MIDI is simply the renamed version of Enable MIDI. MidiGo, when activated, will cause Resonator to trigger Go button whenever it recieves note 127 at velocity 127 on the selected MID bus.

    • It is extremely easy to set up a virtual MIDI bus on Mac. You just open up Audio MIDI Setup (a built in system application), make sure your "Window" is set to "MIDI Studio" and then double click the IAC Driver box. In it, you hit the plus button in the bottom left corner to add a virtual bus, and then check on the "Device is Online" box to turn it on. Once this is online, you can send MIDI to the Bus from any DAW, allowing you to transmit MIDI from Ableton, Logic, Garageband, or anything, directly to the built in synth in Wavelength devices. For example: you could use arpeggiators and chord generators to modulate your MIDI signals being sent to the phone, or trigger MIDI loops during a performance so the phones play along to the music.

    • You can also fade effects live by moving the sliders in the Live Panel. You can adjust the wet/dry (the amount the effect changes the synth's sound) of Distortion, Delay, and Reverb, as well as Delay time, and the overall volume.

  • Read this tutorial

    Create a new cue and click on each event type in the list, except for Change Orientation. This will create a Blackout cue, stopping all active Screen Color,  Flashlight, Sound, Image, and Video events. Just remember that MIDI will only stop if you disable MIDI or stop sending signals from your controller.

    Create another cue and assign it a Screen Color and Image (in this case, pink and the "wavLogoDraw.gif"). You'll notice our GIF was designed for a landscape orientation on the device, so it appears very small in the preview's default portrait orientation. Choose the Change Orientation event type, hit "edit" and choose "landscape only" from the dropdown. The preview will rotate to show you the new orientation of the cue on devices, and we can see that our GIF now better fits the display. The Change Orientation event is cue only, so it does not track like all other event types. This is simply to make things easier, since most of your cues will likely be in Portrait, but this system will be improved in future updates.

    • Now we're ready to run our show! Click the "Upload" button in the top right corner of Resonator to upload your show to the Wavelength server. Once the progress bar fills, the Upload button will change to the "Live" button. Press the Live button to begin broadcasting your show to the Wavelength app, allowing Wavelength users to tap on your show to join and download all necessary media.

    • Now your first cue will have a pink outline, press the spacebar or the click the GO button, to trigger (or "GO" on) this first cue. Now the first cue will fill with pink to show that it is currently live on devices, and the next cue in the stack will outline in pink to show that it will trigger when [space] is pressed.

    To skip to a different cue, you can click on it to edit it (which will highlight it in white), and press [⇧space].

    • Remember, while live you can still drag media from the Media Bay into cues to make changes on the fly, but you cannot drag in any files from the Browser or anywhere else on your computer.

    • Now we have a full show that we can run through, congratulations! You can open up Wavelength on a device and play with your show.

    • Run through all your cues, and hit [space] again to loop back to the top of your Cue Stack, causing the first cue to outline in pink showing that it is the next to be triggered. Pay attention to what happens on the device when you hit space to "Go" on this first cue in your stack again. The device is displaying the Screen Color of the first cue, but the Image from our last cue is still playing. Remember that when the Cue Stack loops back, it does not blackout first, so it can be good practice to always start your shows with a Blackout if you plan on looping back.

  • Read this tutorial

    • In the Color Wheel, you can save your favorite colors as swatches in the small squares below the brightness fader. Just choose a color and drag it from the large square in the bottom left into one of the smaller squares.

    • When designing Images and GIFs, try using transparent values in order to let Screen Color events shine through and populate them with color. Video files will not support transparent values, so you'll need to use GIFs. You'll want to keep file size small so Wavelength users can quickly download your shows at performances. And if you design cool GIFs and want to share them with the Wavelength community as a featured artist, contact us and let us know!

    • You can find a pack of totally free Starter GIFs we've designed for you right below this tutorial on the Getting Started page, directly next to the download for the Demo Project file. Use them however you like!

    • If you want to quickly find more animations, you can easily find almost anything on sites like giphy.com, and even search for just GIFs with transparent values. You can use sites like ezgif.com to make quick adjustments to parameters in these GIFs to fit your project better. Do your best to sufficiently credit GIF creators when you download their work!

    • You can also very easily resize any window inside Resonator to customize the layout, by simply dragging their edges around.

    • Lastly, from the whole Wavelength team, we just want to thank you for using the Beta! PLEASE send us your feedback! This program is made for users. If you want something, we'll make it, and if you hate something, we'll fix it. So let us know! And if you create any cool projects with Resonator and Wavelength, tell us about that too!

Download Demo Project Download Starter GIFs
Planning something awesome with Wavelength? Tell us about it!

(We'd love to see it & share with the Wavelength community)

Resonator Guide

Need more info? Check out the full documentation below.
Still have questions, want us to walk you through something, have a live show emergency, or just wanna chat?
Hit us up anytime, day or night!