DiPiVJ - Video Tutorials

Welcome to the video tutorials for DiPiVJ - The Plug-and-Play Audio-Reactive Visuals Instrument for DJs, bands, video artists, VJs, music venues, installations, and other creative spaces. 

Page 1 consists of Chapter 1 - 11. 
For Chapters 12 - 18 please visit page 2. 

Chapter 1 - Getting Started 
Chapter 2 - Connecting to Web UI 
Chapter 3 - Web UI Overview 
Chapter 4 - Scene Tab Intro 
Chapter 5 - Brain Mode 
Chapter 6 - Playlist Mode
Chapter 7 - Auto Logo 
Chapter 8 - The Content Tab (How to Update)
Chapter 9 - The Create Tab 
Chapter 10 - The Mapping Tab 
Chapter 11 - The Network Tab 
Chapter 12 - LTC Timecode
Chapter 13 - MIDI 
Chapter 14 - OSC 
Chapter 15 - Art-Net/DMX 
Chapter 16 - Gang Mode 

 

Chapters 1, 2, and 3. Getting Started.

Hi it's Di, and welcome to the video tutorials for DiPiVJ, the audio-reactive visuals instrument for DJs, Bands, Video Artists, Music Venues, Galleries, and other creative spaces.

It comes with over 7 hours of visuals, and you can also easily add your own videos, logos, and GLSL shaders through USB.

All you have to do is connect it to an HDMI display, power it on, and it starts outputting audio-reactive visuals.

For audio input, the DiPiVJ comes with a USB microphone, but you can also use a USB audio interface for direct line in.

The DiPiVJ broadcasts its own hotspot. To customize and control the DiPiVJ, use any device with WIFI, connect it to the DiPiVJ hotspot, and then point your browser to DiPiVJ.local. The Web UI will then appear.

You can also connect the DiPiVJ to your own network using the network tab.

The Web UI is broken up into many sections. You will see tabs for Scene, Playlist, Auto Logo, Content, Edit, Mapping, and Network. The header and footer will be visible no matter what tab you are on. The header will show you the device name, what scene is currently playing, the audio input level, audio boost levels, and the blackout button. The footer is for system controls like the button to properly shut down the device.
We will cover the header and footer more thoroughly later. For now, we want to just go straight into the Scene tab.

Chapter 4 - Scene Tab Intro

The scene tab is where you can manually cue scene changes and customize the audio reactive FX stacks. You can also toggle on or off Brain Mode, which will automatically cue scene changes and control the audio reactive FX using intelligent audio analysis. For now, I am going to go ahead and toggle off Brain Mode.

Let's go ahead and cue a new scene. I will scroll down to a video scene. All I have to do is press on a scene card to cue it.

You can see there are three different sections. One is for logos and that section is here at the top. I will cue the "Digital Introspect" logo now. These are still images with transparent backgrounds that will be overlaid on top of video or shader content. I will turn this logo off for now.

This next section with this pink background is for GLSL shaders. GLSL shaders are not video at all. They are code. If you don't want to know anything about GLSL, that is fine. Just know you can press any shader scene card to activate it. I will cue "Edge Moiré" now. If you are into GLSL, we will cover how you can create and add your own GLSL in a later chapter. The Die Pie Vee Jay is really a great tool to begin learning GLSL with.

Underneath that, you will see the videos section. I will go ahead and cue the "Diatomaceous Earth" scene now. It will cue immediately. I can press this "FX" button, and a pop up will appear that allows us to see our FX stack. Each video scene card can have up to 3 audio reactive FX on it at once.

 Each FX in the stack has a slider for intensity and audio smoothness and also has toggle buttons to choose what band of the audio frequency to react to. These are real time controls that will affect your video output immediately. If you prefer to manually control all this with Midi, we will cover that in the external controls chapter later. To remove an effect just press the correlating X. We can then add a new effect by selecting one from the menu underneath. I will now add Wave Warp.

Shaders and videos are on the same layer. So cueing one or the other will completely change your video output. Logos are layered over top of shaders or video and operate independently. I'll also press the FX button for logos and show you that we have control over the scale, position, rotation, and opacity, and then they can also have one audio reactive effect.

Next, let's talk about Brain Mode!

Chapter 5 - Brain Mode

Brain mode uses advanced auto-analysis to automatically cue scene changes and control audio reactivity. It is based on timing, beat-counting, and perceived intensity of the music.

Before I turn on brain mode, I want to choose which scenes will be included. I am going to go to the very top and hit "Skip All". You'll see that now every scene card says "Skip". This is showing that they will not be cued by Brain Mode. I am also going to go ahead and collapse every folder with this "Collapse All" button at the very top of our Scenes Tab.

I will now open the SD card folder, then open the videos folder, and I will open this folder called "Of The Sun". I will hit Include for this folder. You can now see this folder will be included. But actually, I am going to choose to skip "Maya Fractal", "Maya Melt", and "Purple Fractal Sunset" individually. 

Now I will go back to the top and toggle on "Brain Mode".
Brain Mode will begin working immediately. Now you can see if I click on one of the FX buttons, all of the sliders are now greyed out since Brain Mode is controlling them.

Brain Mode also has a pace slider you can find here at the top. If you want Brain Mode to cue a new scene more often, then you slide this slider to the right. Slide it to the left to make it choose a new scene less often.

This "next" button right here will tell Brain Mode to immediately cue the next scene it had lined up.

Next we will talk about Playlist Mode. Playlist Mode and Brain Mode are mutually exclusive. Turning one on will automatically toggle the other one off.

Chapter 6 - Playlist Mode

A playlist is an ordered set list of scenes, each will loop for a length you choose.I will click on the Playlist tab. Now I will toggle the "Playlist Mode" toggle. Turning on Playlist Mode automatically turns Brain Mode off since they are mutually exclusive.

To create a new playlist click the button that says "new". Then we can see this new drop down bar. Once I click here we can see all of our content. I will choose "Diffraction". Now I will press the add button, and the Diffraction shader has now been added to the playlist. Now I will add "Embers" from down here from our "Faces of Greed" folder. I will also add "Greed Cloner".

You can drive the playlist through beats or time. Each playlist entry has a toggle to select either. You can see right now that Diffraction is set to beats. To the right we can see it says 300 beats. The scene will hold until that many beats have been counted, so it stretches and shrinks with the tempo.

Now I will change this from beats to time. When it is set to time the scene holds for that long in real seconds and then moves on, no matter what the audio is doing.

For manual mode you can use time or beats - just set the value to 9999 to ensure it never reaches the cue. Then you can just press the "cue" button for each scene to cue the scene manually. 

To the right of our Playlist Mode toggle, we also have buttons for previous and next. 

We will talk about controlling Playlist Mode with timecode in a later chapter dedicated to using Timecode.

We have already learned about the New button, but notice you can also save, load, and delete playlists here as well. Next, we will talk about the Auto Logo tab.


Chapter 7 - Auto Logo

Before we get into the Auto Logo Tab, I am going to go back here to the Scenes tab to cue a logo.

 I am going to turn on Brain mode using the Brain toggle which will automatically turn off Playlist Mode. I am going to go ahead and cue the Digital Introspect logo, and we will see that come up immediately. 

Now, I am going to toggle these 3 logos in the test folder to "include". Now I will press on the Auto Logo tab. The Auto Logo tab decides how the logo you picked in the Scenes Tab comes and goes, fading in and out on a repeating cycle, and if you like, swapping to a different logo each time.

 I want this logo to fade in over 1 second. I want it to hold for 5 seconds. Then I want it to fade out over 1 second, and then it will stay off for ten seconds. Now that fade in and out of the logo is automated.Below the cycle settings, I will press this Opacity, Size and FX button to customize the settings of whichever logo is showing, the same as the FX button on its card in the Scenes tab. 

Now I will close the pop up.If I want to cycle through multiple logos, then I can toggle on "Random Logo". It will now cycle through any logo that has been set to "Include" from the scenes tab.Next we will talk about the content tab. 

I am going to go ahead and turn off Random Logo and Auto Fade. I am going to go back to the scenes tab and press the "None" card to turn off any logos.

Chapter 8 - The Content Tab

You can add your own videos, logos, and GLSL shaders to the DiPiVJ two ways: with a USB drive, or straight from your browser over the hotspot.

Content lives in three folders, and the folder is what tells the unit what a file is. Videos go in "videos", shaders go in "glsl", and logos go in "logos". All lowercase. Each of those can hold one level of subfolders to organize your content.

Videos should be H264, 1920 by 1080, 30 frames per second, at 10 megabits per second. Set a keyframe every 30 frames, and remove the audio track completely.

Logos should be PNG with a real transparent background, sized to fit inside 1920 by 1080. A JPEG has no transparency, so it will be stretched to full screen as a solid rectangle and black out the video behind it.

Videos get thumbnails for the Scenes tab automatically. Shaders cannot, but you can put a JPEG next to it with exactly the same name and it will show as its thumbnail.

The easiest way to prepare content on a computer is the DiPiVJ Media Encoder for Windows. You can find the media encoder on the DiPiVJ support page at www.digitalintrospect.net/pages/dipivj-support

 It will also build a seamless loop for you, either with a crossfade or by bouncing the clip back and forth. A Linux version is coming soon.

I am going to take these video files here and put them in a folder on my computer. Now I am going to open up the Die Pie Vee Jay Media Encoder and select the folder with my content. I will make these loop with a crossfade of 1 second. And then I will hit Process.

You can also encode right on the unit, with no computer at all, with the Create tab. We will talk about the Create tab later.

Put three folders at the root of your drive: videos, logos, and glsl, in all lowercase. You can have one layer of subfolders to organize.

Since I used the DiPiVJ Media Encoder, my encoded files are already in the appropriate folders. I will now copy these over to my USB hard drive.

Plug the drive into the DiPiVJ and it is picked up automatically. Its content appears in the Scenes tab under "USB Drive".

From there you have two choices. You can leave the drive plugged in and play straight off it, or you can copy it onto the unit from the Content tab and then eject the drive. No need to reboot.

I will go ahead and cue this scene from the USB folder now.

The Content tab is the file manager. It shows what is on the unit, what is on any USB drive, and how much room is left for storage. I will press the Content tab now.

At the top is a storage bar. Any copy or upload that would push you past eighty percent is refused on purpose.

Below that, content is listed in three sections: Logos, GLSL Shaders, and Videos. The same order as the Scenes tab.

USB content sits right at the top. You can copy a single file, a whole folder, or scroll down to "Copy all USB content to SD" to bring everything over at once. Preview pictures are copied along with their files automatically, but since I am only uploading videos then I don't need to worry about that. The thumbnail images will be created automatically.

I am going to scroll all the way down and select "Copy all USB content to SD". The content is now stored internally on the Die Pie Vee Jay, so I can go ahead and eject this drive now. I will scroll up to the top of the USB drive, and press this eject button.

Every file row has a three-dot menu with Rename, Move to, and Delete, and each section header has a New Folder button. Nothing gets lost in a move or a rename. A file's effects, a logo's position, its place in every saved playlist, and any MIDI binding pointing at it all follow it.

"Upload to SD" sends files from the browser you are holding straight onto the unit. No USB required.

Keep in mind this all travels over the WiFi. It is fine for a handful of files, but it is slow and less dependable for a large transfer. For a big library, use a USB drive.

Next we will talk about the Create tab, where you can trim videos, turn them into loops, encode for the DiPiVJ directly on the device, and create custom GLSL shaders using an AI agent directly on the device. Now I will press on the "Create" tab to open it.



Chapter 9 - The Create Tab

The Create tab makes new content on the unit itself, with no other computer involved.You can see there are two halves, "Videos and Logos" and "Shaders".

Video and Logos turns any video or still image into DiPiVJ format. You can also trim the clips and make them loop, and it will automatically encode to match the DiPiVJ specifications.There is also a Windows application, the DiPiVJ Encoder, for encoding and looping on another computer. That is worth using for a large batch, since it is much faster and it never touches your show. You can find the DiPiVJ Encoder on the support page.

The right half is for custom Shaders, and it writes brand new shader scenes from a plain-language description, using AI.Let's prepare some videos. I will press Add Content, and the first thing it asks is what the display should do."Keep visuals running" means the show carries on. Converting is slower this way, and converting a video can make your output stutter. A logo costs almost nothing, so this is fine for dropping a new logo in mid-set.I will choose the faster option, which is "Stop Visuals".

For step two I will choose "From a USB drive" and then I will choose this file. My output is now frozen so I can edit and encode faster. You probably won't want to do this during a show, but freezing is what makes conversion fast. It runs roughly three times faster than with the visuals kept running.

The editor accepts far more than the unit plays, so you can feed it your masters directly. Phone video, Pro Rez and most other video formats work, along with all the common still image formats. You do not need to convert anything first.

I could trim from the beginning or end here, but this clip is fine the way it is. However I am going to add a crossfaded loop and choose 1 second for the crossfade. Ping Pong will bounce back and forth instead, but I prefer a crossfaded loop for this clip.

You do not have to switch anything back. The session ends by itself the moment the last clip finishes, and immediately if you back out without queueing anything. 

A banner sits in the page header the whole time, visible from any tab. Red while the display is frozen. It turns a calm cyan while the visuals keep running.

Step three is naming your clip and choosing where it goes. You will see the unit's own storage and any plugged-in drive, each listed with its free space, and a New button to make a folder.

Add Another Clip puts this one in the queue and takes you back to step one. Encode All tells you how long the whole batch will take before it commits. While it runs you get the current file, how far through it is, and a live estimate, with a Cancel button.The queue is listed by name, not just counted, so you can always see what you have chosen. To take something off it, tap the X on its row. The unit asks first, because removing an uploaded clip also deletes the upload, and getting it back means sending it again. 

Clips taken from a USB drive are never touched.

 Now let's make our own audio-reactive GLSL shader.

 I will press the Shader tab to switch the Create tab over to Shaders.Under AI settings, we have some things we need to configure first. Under provider, I am going to choose "Anthropic" since I already have purchased API tokens from them. 

I am going to leave the model set at "Claude Opus 5", and you will need to paste your API key right here where it says "API key". If you are using Anthropic, you get your API key from the Anthropic console.

Now, right here under "describe your shader" I am going to write: a neon pink and purple tunnel that surges on every kick. At the end of the tunnel you can see a slowly spinning yellow mandala that has a glow that reacts to the audio highs. When ambient mode is detected, the camera's field of view will ramp down to a very wide lens. When a groove state is detected, the camera's field of view will ramp up or down to a medium field of view. When a hype state is detected, the camera's field of view will ramp up to show mostly only the mandala in the center.

I can also upload a reference image, so I am going to do that by clicking this image button. I will select this image called "neon pink and purple" and make sure the "style reference" toggle is selected here. Now I will press generate. 

We can see right now it says "Writing shader".Now that it has finished we can see it says "Compiled" down here in green, and we can see our shader code underneath. 


Now I will press the "Save to library" button and we will move on over to the Scenes tab to view our new shader.Here in the Scenes tab you can see we have a new shader. 

I am going to go ahead and cue our new shader.In the next chapter we will talk about Projection mapping.

Chapter 10 - The Mapping Tab

Now we are going to check out the built-in projection mapping tools by heading over to the Mapping tab.

At the top we have our layers. A layer is one surface you are projecting onto, and right now we have one called Layer 1. The eye on the left hides a layer without deleting it, and the arrows on the right change their stacking order.

Just underneath is the slice. The slice is the part of your incoming picture that this layer shows. There is an X and a Y slider to move it around, a width and a height slider to size it, and a row of buttons beside each one to step a value a little or a lot. 

We will come back to this once we have something mapped. The first thing I am going to do is toggle our test pattern by pressing this button. That gives us a clean grid to aim with instead of whatever is playing .I am going to make sure our Warp, four corner, toggle is selected, and then I am going to toggle Warp On so we can start using warp mapping. Immediately our corner pin controls turn violet to show that warp mapping is active. Now I can start dragging those corner pins to pull our output into the shape I want.

I will simulate mapping one surface of a box. I am dragging each corner out to meet a corner of the face I am projecting onto. The output updates live while I drag, so I am not guessing. I can watch the test pattern land on the surface and keep adjusting until the grid sits square on it. Take your time with this part. Getting the four corners close is most of the work, and we will clean up the rest in a moment.

 If we need more control than the four corner pins allow, we can also create grids with the two by two, three by three, and four by four toggles just above. With a grid turned on you get interior points as well as corners, which is what you want on a surface that curves or bows rather than lying flat. For now I am going to leave this on Off. Instead, I am going to go up to the top and click Add to add another layer. Now you can see we have Layer 1 and Layer 2 listed here, with Layer 2 currently selected. 

Everything below the layer list applies to whichever layer is highlighted, so from here on I am working on Layer 2, and Layer 1 stays exactly as I left it.For this layer I am also going to toggle Warp On, and I will map another face of the box. The one turned away from the first, so the two layers together wrap the corner.

Just underneath our corner pin area you can see we have Fine Nudge buttons.I can either select the corner pin I want by clicking its anchor indicator, or I can click the matching button here in the Fine Nudge controls. I will choose the bottom right to select the bottom right corner pin. Now I have these directional controls to move that pin by one pixel or by ten. This is for the fine control that dragging cannot give you, and it is usually the difference between a projection that nearly fits and one that actually lands. I will demonstrate by nudging a few pixels with the one-pixel buttons. 

Let us go back up above to the slice controls. I will click on Layer 2 so that we are working on that layer.Remember the slice is the part of the incoming picture this layer is showing. 

Right now it is showing all of it. I am going to bring the X and the Y sliders in to move that region, and then pull the width and the height down, so this layer only takes a window out of the frame instead of the whole thing.

Watch the box while I do it. Layer 1 is still showing the entire picture, and Layer 2 is now showing just that window. That is what lets two faces carry two different things out of the same video.Now I will click back on Layer 1. 

Its slice is still the full frame, but the shape we warped it into is not that shape.We can hit this Fit to Shape button to resize the slice to the shape of the warp automatically, so the picture fills the surface without stretching. To demonstrate I will do that now for Layer 1.

If you want to start a layer's slice over instead, Reset Slice puts it back to the full frame.

There is one more thing this panel does. Beside the Warp, four corner, button there is a Mask button, and these are two different jobs. Warp changes the shape of your output. A mask hides part of it. 

I will press Mask to switch what I am editing, and then toggle Mask On. Where the grid choices were, we now have mask shapes. Quad, circle, triangle, and octagon. I will choose circle. Now I can drag these handles to put the mask where I want it, and the Fine Nudge buttons work here the same way they did on the corner pins. If I check Invert Mask, it flips which side is hidden. So instead of hiding what is outside the shape, it hides what is inside it. This is how you keep light off of something you do not want lit, like a doorway or a window in the middle of the surface you are projecting on.

Okay, now let us turn our test pattern off by clicking this bar that says Test Pattern On, and we can see our actual projection mapping.

To delete a layer, just click the red X to the right of its name. I will go ahead and delete Layer 2 now. If you only wanted to undo that last move, the Undo button up here steps you back one change at a time. And to clear everything and start over, press Reset Mapping on the upper right.

Next we will talk about the Network tab.

Chapter 11- The Network Tab

I will now press the Network tab.

This is where everything to do with networking lives. At the top is "This Device". The Name here is only a label you choose. I could call this one House Left, or Stage Right, so I know which unit I am looking at when I have more than one running.

The Address underneath it is fixed. It is derived from the serial number of the Raspberry Pi inside, and renaming the unit does not change it. This one answers at dipivj-13DD.local, and it always will. It is worth printing that on the enclosure.

Underneath is Device Password. That protects the unit once it is reachable from your own network. You are never asked for it over the unit's own hotspot, because the Why Fi password already covers that. I have one set here, and you will want to set one before you put a unit on a shared network.

Under WiFi you can see what the unit is doing right now. Mine says "Broadcasting its own hotspot", with its name and its address.

Below that is the Hotspot channel. There are three to choose from. 1, 6, and 11, and 6 is the default. If your hotspot flickers or keeps dropping out, it is usually a neighbor's WiFi sitting on the same channel as yours.

Press "Check channels" and it will scan the area. It takes a moment, and then it reports back and tells you which channel is quietest. If that is not the channel you are already on, you switch with this drop down. The hotspot moves across straight away, so whatever you are holding will drop for a second and then reconnect. All three of these channels work in every country, so this is a safe thing to experiment with.

 Next to the channel is Country. Set this to the country you are actually in.It tells the DiPiVJ which WiFi channels are in use where you are, and that matters when you go looking for your own network. If a network you know is there does not show up in the scan, the country setting is usually the reason why.

There is a long list in here, covering most of the places you are likely to be working. 

Mine is already set to the United States. This only affects scanning for other networks. 

The unit's own hotspot channels work anywhere, so changing this will never strand you.

You do not have to use the unit's own hotspot. You can put the DiPiVJ on your home or your venue network instead, and then whatever device you are holding keeps its own internet while you work.

 Depending on where the unit ends up sitting in the room, that is often the better option anyway.To do it, press "Scan for networks". Pick yours from the list, type in the Why Fi password, and press "Join this network". Once it has joined, you will find it at the same dot local address as before. And if that network is not there the next time you power up, the unit puts its own hotspot back automatically, so you are never locked out of it.

Underneath the Wi-Fi settings are Gang Mode and Nearby Units. 

Gang Mode is for running two or more units as one. You set one of them to Leader and the others to Follower with this control here. The leader drives the performance, the scene, blackout, Brain Mode, the playlist, the FX knobs, and the followers copy it. They even take the leader's audio, so one line input can drive the whole rig. What does not get copied is anything to do with the picture on each screen. Mapping, masks, layers and display settings always stay per unit, which is exactly what you want, because every unit is pointed at something different. 

We will cover Gang Mode properly in a later chapter.

 Nearby Units lists any other DiPiVJs it can see on the same network, and each one links straight through to its own Web UI. 

Next is OSC Feedback. This one is output only. It sends information out about what the DiPiVJ is doing: audio levels, beat and energy, the current scene, FX values, and which modes are switched on. You would use that to drive something else from the music this unit is already listening to, like a console, a media server, or a TouchOSC layout. You can type in a target address and a port, or you can leave the address blank and it will simply answer back to whatever is sending OSC to it. We will cover OSC properly in a later chapter.

Last is ArtNet and DMX Input, and this one goes the other direction. This is the DiPiVJ receiving instead of sending. 

Turn it on and you can drive the unit from a lighting desk, or from software, over ArtNet. It listens on a fixed layout of seventeen channels, covering things like FX intensity and smoothing, blackout, Brain Mode, the playlist, and scene select. You point your console at this unit's address, and that is it. 

We will cover ArtNet and DMX properly in a later chapter.

DiPiVJ Tutorials - Page 2

Continue on to chapters 12 through 16

Contact Digital Introspect