Visual Poetry: Animate 3D in sync with sound using Touch Designer

1. Visual Poetry: Class Intro: did you ever wanted to play with three D beer on Beecher Work with interactive sound into skill shirt class will be playing with the magic of collar and geometry to create interactive officials that respond to live or recorded sound. You will give your first steps with this fun and simple project that uses interactive animation parameters linked to geometric officials. What you will need for this course is a computer that meets the requirements for Touch the Signer, a three button mouse with a scroll wheel, all your files or a microphone and an Internet connection so you can download Touch the signer from the official website Are you ready? Then a role and let's get started. 2. Installing Touch Designer: welcome to this glass. In this lesson, we will go over the system requirements that are needed to install Touch a signer and how you can install in your computer. First off, let's get familiar with Touch the Signers official website, which you can currently find at www dot derivative dot c A. This is because the company that developed such a signer is colder within, so inside the developers website you will find a lot of interesting reads. But right now, let's focus on how to find the installer. When you click on downloads, you will see the downloads section that has the system requirements on the first section, the conditions of use in case you want to browse them in the second section and the download links on the third and last section. Let's quickly go over the current system requirements for this version of Touch of the Signer touch. The signer can be installed in both Windows or Mac operating systems, and the version 99 requires a minimum of either Microsoft Windows seven service Back one or Mac OS 10.11. The compatible graphic card should have a minimum of one. Jacob I do P a memory with the most recent drivers installed. As you can see, there's a list of the compatible cards, and you should have open GL, which is a very common graphics, a p I that usually comes with your operating system. If you are not sure if you haven't installed, you can go to open gl dot org's and download the latest version of the open jails driver listed on their wiki. And last but not least, make sure that you have a three button mouse with a scroll wheel that is with two buttons on each side and the middles girl wheel. So once you have checked that your system meets, the sister requirements were ready to download and install Touch the signer going back to the derivative website in the downloads section, you will find the download links wants to click on them. The download will start. You will see on this video of riff example of the Mac OS installation. It's a very straightforward process, and once it's complete, we're ready to start working on Touch the signer with the noncommercial license. Once it's installed, let's continue on to the next lesson 3. Sources of Inspiration: by dedicating just a few minutes. In between your routine, you can gather reference material that will help you think about what you want to come bay , whether it is snapping a picture of an interesting cloud or flour for the color mix, we're taking a look at old drawings that can inspire you by taking details of shapes and colors that you find interesting enough. Going on a field trip to museums or cultural events and even just paying attention to your surroundings and key moments can all be triggers that make your idea start coming to life. It doesn't have to be complex all the contrary. I found that by keeping it simple, you a boy. The possibility of your officials becoming riddled with too many things that creep for attention at the same time and having too many colors to balance out can be a problem. For this exercise, I recommend keeping it to a limited palette of up to 3 to 5 colors that we can play with and to select a single and simple geometric shape that can be either a sphere, a cube or a triangle to recreate in touch. The signer be aware that I will show you how to keep it a simple, solid shape and how to create a mesh texture of the shape. Once you feel that you have enough ideas from the reference that you want to use is an inspiration, let's move on to the next lesson. 4. Sketching a base idea: before we start rendering that through the objects for interactive video, let's go ahead and sketch samovar the US out. So gather your sketchbook and sketching materials and think of a base geometric shape that you want to work with, as we mentioned before. For this exercise, we're going to use either a sphere, a cube or a triangle joyo. Different colors applied to those shapes and their backgrounds and Berryman that in touches a signer. We can also move the camera around for the final shocked. Therefore, it can be in many different angles. It's good to think of a base idea, considering that even though we will use this as a starting point, the key part in this lesson is experimentation. Try out different things and then have the sketches near you when completing the project. To use this inspiration at this point, feel free to post the sketches of your project in your project section of the skill share course. I've been more than happy to give you feedback. If you require it 5. Interface basics: we're almost ready to start rendering. So let's open up, touches a signer and get comfortable with the interface. When you started touched the signer by itself and not from a project file, it will always have the sample project that has surveys files that come with the program already loaded up to clear them, just like them, by clicking and dragging with the mouse left click. And once they're selected, hit delete touch. The signer has a very responsive interface. And to get inside of the project, going from a new container that we will create, we will use the mouse wheel to scroll into it. This same way of moving can be applied to get into components parameters. You can save your project by pressing either contre les in windows or command s in Mac. Whenever you say the project, every alteration will be stored in your computer in the folder indicated on the top dialog box of of the working area. Don't worry about the project file Size ist. They're pretty small. Let's quickly go over the various component groups that we have available in touch of the signer. There, six families of operators over the six families. Five. Our basic operator families and one is the component family, which can further contain networks of operators. Components containing components form the touch the signer hurricane and give rice to the operator pats. The comes which are components are object components. Three D objects panel components as into the U I gadgets and miscellaneous components. These components contained other operators. The tops, which are the texture operators, are all to the image of Raiders the chops, which are the channel operators with motion audio animation and control signals. The sops, which are surface operators, have three points polygons and other three the primitives that that which are the data operators, have asi explain text scripts. XML organized in tables of cells mats which are material operators, have the materials and she aiders. Let's get started by creating a new container for a project double click, and you will open up the operator generation panel and on the first have taken container. Once you do, it will select the element to place in our workspace, and you just have to left click again to place it scroll into the newly curated container. They've using the same shortcut, or is a save dialog window from the menu. And let's continue into the next lesson. 6. Rendering the geometry: the materials we need can be found in the comp tab. So let's double click on our current containers empty workspace and select the black color tab for seen. We will need, ah, light a camera in a geometry less liked one of each and place it on the workspace. It is very likely the parameters window will pop up. You can dismiss it or bring it back, just hitting its shortcut, which is the letter P to finish rendering our composition. We need the render component. Let's double click again and go to the purple top tab and select render. Bringing in the render component will automatically render the composition as it is right now to prove you in the back of your workspace. Your composition. So far, you can select the final component and click on this play option that is the blue dot wouldn't it's panel. You can have several components displayed on the back of the workspace, but for now, make sure that you have only one component selected for viewing. At the same time, says we have the render ready. Let's go into the geometry that comes preloaded and make any necessary adjustments to it. inside the geometry, we can see that we have a default tourists. So let's selected by clicking the right button on our mouths and dragging it over, then hitting delete without exiting that component. Double click and select the blue S O P panel Stop panel and bring on a tube to make a triangle. This fear and rectangle shapes are a little bit more straightforward, but I will teach you how to create a triangle on treaty using a two component. If the paradores panel is hidden, let's hit the parameter shortcut key, which is the letter p and then select the to. Let's make sure that the height is five. The radius is zero and two. Center 000 Orientation is why access connectivity. Quadra literal. The primitive type is mesh and on the detail. The rose should be 10. The columns to the tree. The end caps is off. Dexter coordinates Role and colons and compute normals is on. You can edit the details on the geometry material through the parameters window. Those modifications will be reflected on the final render as long as it has the display and render options enabled, which you can enable by clicking on the blue and purple dots on the last component settings . If by any chance you do not see those dots, it's very likely you have the active you enabled by mistake. You can deactivate it by clicking on this white star symbol. Once we're done, you have your render triangle. This fear inbox shapes are a bit more straightforward. Experimentation with the parameters will make you realize how variation can give them the shape you like best, and I encourage you to play around with them. Since it's so easy to go back with the Contras seat command the rendering with it before. It's a special case in which there's no need to connect the components manually because by bringing in the render component, they connect automatically. But in most cases, you have to connect the components manually. Once you are satisfied with the geometry, which you can see and move around on the active, you by clicking on this white star I can, and once that's active, moving it around with the mouse left click. Let's add a no component to the end of the composition. Click and drag from one component to the other to connect them, remove the view and the render selections from the geometry component and activate them on the no component. Suppose that we want to see a sphere rendered instead. To do that, we will assume inside of the Geo and wired the box to the Newell instead of the triangle. This is a prime example of how the use of annul can be powerful and programming and touch of signer. No, let's exit are JAMA tree component By using the mouse wheel, we're back on our original workspace, but with our newly strike that component instead of the original tourists. Now let's take a look at our final part of the render chain. The Render Parameters page contains all of the information about the components were currently using for the final render. Here. We can see that we're using Cam one as our camera on asterisk as our geometry and another asterisk as our lights. What does this all mean? Well, this means that a render top component falls many of the pattern matching rules as the wrists of touches Signer um, asterisk means any damage. Three. Component you contestants by adding another geometry component to our scene. You'll see another set of data link lines drawn to the render, but you won't see another component exactly separated. Why? Well, this is because it's being drawn in exactly the same place. Let's go back and specify that we want to use Geo one as our main component for this simple exercise. It's time to add color to our component. Let's start looking for cool combinations of colors through our material component. Double click on an empty area of the workspace and go to the yellow Matt Taff, the material operators, which are the ones that we can use to create materials for our geometry. Let's add a fung wire frame and constant material to our composition so I can show you how they'll work. You can assign a material to a geometry component by dragging and dropping it onto the geometry or by typing the name of the material into the material field that's located on the render tab of the G amateur component. Let's start by assigning our phone 12 or geo one. The fund Shader tools have so much variety to them that you could fill several videos related to all the variations that you can accomplish For now, Let's just look at how we can change the color of our phone on the RTV page of our fung. Click on the the few Swatch and change the color by selecting a hue that you can also modify with a saturation hue value and are GV slithers on the same parameter option page. With the wire frame material, we can change both the color and the thickness of our lines. Decisive the where free material. We can also use a constant color. Using that constant material will allow us to select from a bullet a constant color that will go over our entire geometry. It will give us a blame color. Let's complete her rendering by selecting the camera angle that we wanted. Three. Object to re render it at. But first, let's add a no component are seen and so like the camera to said the look at parameter. This will allow us to have a focal point that our camera can focus at, and that we can modify at our liking by going on the X form tab of the camera and changing the X or Y dimensions. When we move these points, the know that we have place will allow us to keep the camera focused on our component wells . We're happy with our render. Let's add a no component on the end of our composition. 7. Incorporating sound: Now we have gotten to a point in our project where we have to the side it. We will work with some files that we have readily available or if we'd like to use the audio from or built in or connected microphone. If we want to use an existing, all your file will add an audio file in chop. And if we want to capture and process the sound of a microphone connected or integrated to RPC real, add the audio device in chop, which has a parameter to select the internal microphone device from the available device lists. Both can be added by double clicking within our workspace and selecting them from the green chops component tap to use any sound. We need to process it, since the meth extracted from the sound peaks or other parameters that we choose can have way too wide arrange for a geometry to process it. So we need to limited for this. Let's at the analyze filter and math chop operators. These ey're located on the green chop tap. Besides of having audio in, if we use an audio file instead of the microphone, we need to have an audio out to be able to monitor the audio file. So if we're using an audio file instead, let's add an audio out component and connected to the other. Filing chop. Remember that hitting the space bar or hitting play on the bottom control panel will stop or restart the play back over a project preview. Also, remember that when you have the audio file in to activate it, go through the audio file in first stab and hidden play on. So with the audio file in and the other device out, you will be able to listen to the external audiophile. In this example, I'll assure you how have modified the audio that comes from my computer's internal microphone. Every microphone is different, and you should see how your says and modify the chosen parameter at will. Let's start with the analyze filter. This filter is the audio that comes from our device, and we can ask it to having consideration several times of functions such as armies, power, the peaks of the audio and the average as well. In this case, I have chosen RMS power with the analyzed component connected to the Order of the Vice in component and in return to the filter component, I can change the type of filter that will modify the three D rendered object too much my decided aesthetic by going into the filters parameters and changing them, especially the filter type. For example, Goshen and Left Half Goshen will give you a more trunk. Will demeanor on the animation and sharpen will actually make it more speedy and bumpy. Once we have that place that we can add it later, we will add a math operator on the end of it that will limit the range of the sound filters so that it's not too extreme for the objects geometry rendering. In my experience, it is best to choose a small range for the math filter. We can begin by using from range 0 to 12 range 0 to 5. Once that said, let's connect the final no operator to the end of it, we can use this no component to any made three rendering. We have to select the component with the active you by clicking on its white star Aiken and then dragging the null up to the geometry components scale parameter. You will see that the mouse Aiken will change when your dragon active component to another . Therefore, you have selected it properly. After your drop it, This will make a menu pop up and you have to select export chop, which will make the skills parameters that are SX s Y and s seat. Listen to the nose changes effectively animating the scale of the three D object through the current sound filter by the previous components. In this example, I like the Goshen sound filter best and using the Cameron to renders fears place one on top of the other. I made a composition that shares the same parameters on the scale and therefore it moves at the same time. Remember that hitting the space bar or hitting play on the bottom control panel will stop or restored playback over Project Prevue Wells. We have to eat the sand animation response and we'd like the way the geometries reacting to the sound. Let's continue on to the next lesson 8. Adding extra elements to our composition: so far, we have a main geometric component that reacts to sound would why stop there? Let's complete our composition by creating another image in a geometry that we can add to the composition. This is an excellent time to ring up the early sketches that have our calendar mixed ideas and used them as a reference exit. The first container that we created using the mouse wheel and then create another container you can have rename them if you like. Then on that container. Recreate the same render component network that we had but keeping the original tourists. We will later add color to it by adding a wire frame rendering. But right now, let's start with adding noise to create a geometrical wavy effect. It's important that we select the noise component from the same blue sop tab because that means that it goes with that component. Alternatively, we can do a right click on the connectors end of the tourists, and it will open out the components that we have available to connect with it. Once we click on noise, it can be brought in and placed on our composition, but let's go ahead and edit the noise parameters to get a smoother tour us. So, for example, the tourists and I'm using on the main tourist have has a permitted typhus mesh connectivity. Quadra literally orientation. Why access The radius is one and then 0.5. Center 000 the Rose Air 20 and the columns air 40. The texture coordinates are Roman columns, and the compute normals is on and know that I brought up the noise. I'm going to put the noise attributes as point position type alligator seed. 0.9. The period is 3.95. The harmonics are three, the roughness is zero born 29 the exponents is 0.79 the amplitude is 2.76. Once we have the nurse connected to the tourists, you will see that the noise window will show the tourists being warped over. For that, we will add a no to the composition. Let's click on the noise and let's add in all we'll add a wire frame material, which is where from. One will put a wire from color that would like and then we will connect the wire frame to the geometry material that goes on Orender, so the geometry material should have on our render tab the name of the wire frame material that we will add. And we will customize once you've done that within the render, we can change the camera so that the young girl of the camera has a material either on the bottom or on the top, or whatever you'd like for the composition mixture. Once you've done that rendering, we will get another no, which is connected to the end of the last render. And then from that knoll, we will add in an out component. The out components should be on our last parts of the composition, always so that we can exit the container of the composition and we can connect them. The out component should be connected to the last null of the composition if we don't have an out component than we cannot get that composition out of the container. So now that we have that lets modify the parameters of this renders animation to make them not dependent of the sound. But the video frame that's running by adding this very useful Piketon command to it within the noise that we will add to the geometry of the tourists. It will have a last tab, which is cold transform. We'll go to the Transform tab and we will open. You sing the plus sign on the parameter That's cold. Translate on the translate teas Eat, which is the last one after T X and T Y. We will write a V s in lower caps time right next to it without any spaces with the upper t dot seconds, which means that it will change the T seat access of the translate position every second. And this depends on the frame, so it will have an animation effect that is very useful and fun with our newly animated tourists. Let's move it to the bottom of the composition. Okay, so let's go to the General Project view and then at two out operators from each container. That will allow us to mix both compositions when years with the composite top operator that we can also add from the purple top tab and connect both or components to out of Bagram color to our composition. We can add a constant top into a container and mix it as we did previously to get a color background within the composite top. You can use the arrow to move either the first or the second channels of each composition to see which one looks better on top of the other. You can also play around with the operation parameter that modifies the way both compositions are mixed. As you can see, we have only scratched the surface of the things that we can do by playing around with camera angles and mixes of finished containers. Let's move on to the next lesson where we will learn. How do you export our video in different for months? 9. Exporting: to export our project, we will create a no element on the end of our network. It is a good practice to always export channels from a knoll chop, because if you export from the last noting your network, but decide later that you need to filter the data further, you would have to append the new filter chop and then redo all your expert connections from this new note. Using a no chop at the end of your network is an exporting placeholder. You can always insert another node into the network directly before the null just will keep all your export connections intact. We will record the movie through the movie fell out top operator by connecting it to the knoll at the end of the chain. In this real time recording, we will create the timeline Doesn't matter, and you can record movies as long as you wish to get smoother movies, you can lower the resolution of the tops, which, of course, includes the movie Fallout Top that creates this movie files. To modify the settings, go to the Parameters page common section of the Operator and select Resolution. Also, you can set a different type of file and video Kotick within the specific parameter. Stab the movie file out. Top will record with audio. However, we need to make sure the parameters are set correctly for the audio chop in the main movie Out tab for the movie file a component Goto addio chop and write the name of her audio channel component. Be it the outer the vice in or the audio file in When you Click on the Files parameters White Cross because toe like the name and the location of where the final movie file will be saved. To start recording, hit the record slider on the movie fallout component and then slide it again to complete the recording. I will complete this lesson by saying that I love to see old different variations that you can come up for your project. So feel free to share with me and the skill share community by embedding a link to the video within your skill share project. 10. Final Toughts: congratulations for getting to the end of this course. I'd like to encourage you to think about the creative possibility, said this Project ass. This can easily be used to create projects that work for life, sound applications or exported, just as it ISS as experimental videos. It can also be used as a way of generating video and graphics and share it on the Web. All of this with something that we created on just a matter of minutes, and we have only scratched the surface of what touch the signer has to offer. For further information on Touches a signer, check out the touch. The signer Ricky, currently at doc's dot derivative dot c a. Especially a section called Learning Totals. A Signer. I've found that Matthew Reagan's touched the signers. Tutorials are very informative. There's also many sources listed on the wiki that I'm sure will help you with more advanced features such as interface creation for live shows, particle systems, midi input and motion capture animation, just to name a few. And finally, I'd like to give a shout out to all members of the scale share community to know your thoughts on this beginner's course. on Touch the signer and interactive through the animation, your feedback is more than welcome. And, of course, I'd love to hear what topics related to multi media arts you might be interested to explore , whether it's would touch the signer or other programs and mediums for creative expression, be sure to keep in touch with the skill share course community updates or through my social media channels that I will is below and feel free to reach out until the next give share course. See you soon.