Okay so, Lesson one has been all about getting started understanding graphics and sound and then try to make some very, very basic program by manipulating them. And I want to extend that idea so that we've got to our first-stage application, our Week 1 application. And if you had a look at the intro video for running an app on your iOS device you've seen a little bit of this already. So it's called Sonic Painter. The application just allows you to draw on the screen and it makes a series of shapes and at the same time you can manipulate some sounds using very, very basic functions. So it's quite a simple application. Having said that, there are a number of applications that are available on the Web that people pay to use, that aren't that much more complicated than this. The key to making it look nice is about having really, really good sound and image integration, so that people really feel that it's interactive. And, also mapping information from one domain to the other, we're going to talk a little bit about how to do that. So the basic idea is that we draw shapes on the screen, and they slowly rub each other around. and we have different brushes as well, which I'm going to talk about. And as you make a gesture to draw a shape, it plays back and manipulates a sound. And that's the idea behind Sonic Painter. So how do we map information from the mouse to control different aspects of graphics? Well, we need to think about graphics parameters specifically. The whole plan is to make something that looks much better than just someone wheeling around it with their mouse. But essentially, it's someone just wheeling around a mouse with their finger. It's up to the programmer to try and make it look more interesting than that. There are a couple of techniques which you can use, which make that much easier. The first one is mapping information. So we start with the map command and we're using it to adjust the color. And you can see, the idea is we take the mouseX position and we map it between 0, which is x equals 0, which is right at the leftmost part of the screen. And the width, so the idea of that is that the user moves their finger from here to here, we get a number which is representative of either 0 or the width. And then we map that down to a scale between 0 and 255, and as Marco's already explained, that's the range, the parameter range for a color. Now, we're doing this by using this width command, which always tells us how wide the application is currently and then we're mapping it in. So let's have a look at that in action. I'm going to make this really simple by changing the brush to the most simple brush, in fact, it's just going to be a line. Here's a line and I need to be sure that I'm actually deleting the right line there, okay, yeah. Let me just try and run this again. Now, what you'll find is, if I refresh this, it will pick up the changes I've just made without me having to mess with it too much. And we should find, yeah. [MUSIC] There's a single line. I'm just going to mute it for a second so you can't hear, you can just see. I'm just drawing with a single line and you'll be able to see that on the desktop version as well if I refresh this. A single line is being drawn. So let's go back to the code and see how that works. We're basically setting here, we're, we're going to talk about the audio in a bit more detail later on. But as Matt's already explained we can load a sound and we can play it back. So playing back the sound, and then we're getting the red channel from mouseX. And we're mapping the, from 0 to the width to a range of 0 to 255. And then we're getting the blue, and we're mapping mouseY, which is up and down from 0 to width to a range of 0 and 255. So that gives us our red and the blue. We've also got a green. Now, let's have a look at the green and what it does. So it's more green on the edges and less green in the middle. How do we do that? Well, we can get the distance from the center. The dist function in processing allows us to get the distance. From any particular point to another point, and it uses, quite fabulous to do this basically just, it makes a triangle and figures out what the hypotenuse of the triangle is. So the hypotenuse is, if you have a right angle triangle, it's the bit that is the longest item aside. And that's the bit we want to work out, with this being one point and this being the other point. Now, the dist function does that for us. We just give it an xy coordinate as a starting point and an xy coordinate as an ending point. It tells us what the distance is. And we can use that to work out what the green color ought to be. So dist does this for us. We get the mouseX and mouseY, which is the, where the mouse or where the finger is on the iPod or the iPad or iPhone. And then we see how far that is from the center which is width divided by 2, height divided by 2. So, let's just see again how that works. So we have this, what we do is we're using that to adjust the green. And if we have a look at the app itself, you can see we're greener as we get away from the center, and likewise here. Just the same here. All right. So we've got a nice mixture of red, green and blue across the entire range, across the entire screen. We also want to know, well, let's see what else we can do. We can get the speed. If we get the speed, we can use the distance between the previous last position and the current last position, and that's a good measure of speed, because it's halfway traveled, right, with the finger. So we get that distance, and that tells us how fast we're moving. Simple as that. We can also change the alpha. We can use the speed value that we've got to set how bright the alpha is, so how transparent the drawing is. So the faster we go, the more transparent, sorry, the less transparent it is, and the slower we go, the more transparent it is. We can also set another variable called line width, and we can use the speed to do that. You can see on the screen here. That if I go very slowly, it's a fat line, and if I go fast, it's a thin line. Also, I might want to constrain the line width so that it doesn't go over a certain width. Otherwise, I can end up with a really big, fat lines, when I don't want them, simply because I'm going very, very slowly. So here, what we're doing is using a function called constrain, and we're saying that we want to constrain the line width, which is this variable here to between this value and this value. Between 0 and 10, so the maximum line width is always going to be 10. Okay. So, using these techniques, we can map parameters from mouse interaction to color. We can get distances from the mouse pointer to different different parts of the screen and use that to control other aspects of the drawing. we can also constrain certain elements and certain variables that we've created such as a speed variable, which tells us how far we've traveled between two frames. And we can make sure that they don't cause massive changes in our program. So we can also have different brushes. Now, I've included some brushes for you to have a look at. These are quite complicated. It's up to you to spend more time looking at them. They're not too complicated. In fact, sometimes, there'll be over, a little bit over edge, but they're all right and they're just to get you started. But what makes a really good visual app is really, really good brushes. You'll know that when you use Photoshop, it's one thing just to be drawing a line on the screen. It's another thing to be able to draw a very, very pretty pattern. So your brush can even be an image which you load. Well, in this case what I'm doing is I'm just using the, the basic shapes, because it's lesson one. The basic shapes that comes with processing, circles and rectangles and lines. Just to give you an indication of some cool things you can do with very, very limited material, and it's up to you to expand on that, really. We've done the color, this is about shape. So, let me show you some of these brushes. And I'll quickly demonstrate a few of them. So brush1 here, all I have to do is make it is on comment brush1, and then refresh my apps. So I can just refresh. Wait for it to finish loading. You can see on an iPad or an iPhone, there's a little icon. There you go. So this is drawing a circle. And you'll notice that the faster I go, if you can see that, the faster I go, the bigger the circle. And that's a very simple idea of a brush, so now, I'm going quite slowly and I've got very small circles but the lines are still quite thick. And the curls are more or less the same. I've also got this one, which draws squares instead, so it's the same thing, but it's using rectangles. It's just loading up here, you can see there's a little icon spinning around. There you go. And this one produces a, not just one square, but a whole bunch of squares. I think that's something which is really important to understand, just because you've only got one input, doesn't mean you should only have those one inputs. You can have more. So you can take one input and map it to lots of others. I'll show you how we do that in a minute and then I'll expand on that. brush3 is a random selection of lines. So, when I draw on the iPad screen, we can see, we have what looks like, I guess it looks like kind of very bad tinsel. As I say these are just examples to get you started. And they get varied with thickness depending on the speed and you get the color variation. There's a few more of these. You should have a look at them. But, this one is a bit more interesting. And this introduces another idea. Symmetry. Now, you can use symmetry to easily create order out of something which doesn't necessarily look like ordered. And in this example, all I'm doing is I'm getting the mouse position and drawing the line the same way that I did in the very, very first approach that I showed you. But I'm also drawing a line on the opposite side in the x-axis. So anything I do is mirrored, and when you do that, it gives the illusion that it's somehow intentional or more intentional than it was. So if you have a look, I can just do this and it looks like I have a symmetrical pattern, and I do. But that's because my single, my single interaction is now two interactions that mirror each other, I've got in sort of lateral symmetry. And this symmetry is one of the methods that you can start to make stuff that looks very random, look very ordered. Symmetry is a cheap way of getting something beautiful. And the more layers of symmetry that you add, often, the more attractive people find things. Not always, because it depends on their personal taste, but it's one of those things you should explore if you're interested in making, for example, concentric patterns or any kind of abstract patterns or flower type shapes and arrangements. It's used all the time in lots of different forms of art and it's a very important aspect to computer graphics. It's a very important way of taking something very simple and making it very complicated. So I want to show you a more advanced version of that symmetry sample with perhaps eight order of symmetry. That's with circles, let me just make sure that it's right. That's, no it's it was actually the next one. I should have known. Yeah, so this is the same, but it has eight borders of symmetry. And you'll notice now, we get something that looks, that has a kind of religious appeal. And if I turn the audio up, we can see how this is going to work. [MUSIC] And I'm randomly drawing, it doesn't matter where I draw, I get symmetrical patterns. I'm literally, I'm paying no attention to what I'm doing. But it's, it's just coming up with interesting stuff. That's because I've got so many different reflections. As if I'm looking into mirrors upon mirrors upon mirrors upon mirrors. Cheap trick, but powerful. Okay. The last thing I want to talk about is sound. I'll do this as quick as I can, because I know you want to get on. It's really easy to have more than one sound, you can hear, we've got two. We've got the bells and we've also got the ambient wash. So I'm loading two sounds in exactly the same way that Matt was showing you. [MUSIC] Let me mute this while I quickly show you. What we have is a separate AudioPlayer, AudioPlayer 2. And player2 loads the following exactly the same way. So we have one maxim context, but we have two players. player2 is loaded here. We set the new ping to true, and we're also balancing the first time I'm loading, which is what I must warn is a lot louder than the bells. So I'm using the volume command to turn the volume down for the first one. And then, I'm playing them both in this mouse drag method. So when I, when the mouse is dragged, it starts to play the sounds before that it's silent. I'm also doing a couple of other cool things, which I'm going to talk about in more detail in the next lesson, and that's sound manipulation. And this is just a taste of [UNKNOWN]. The two things I'm doing to make it more interesting is I'm altering the speed, as you can see here, but I'm also altering the filter. Now, the speed Is a really simple equation which I'm going to quickly show you now. player2 speed here is the mouseX divided by the width divided by 2. So wherever that I am, from x, so from 0 to width x divided by width times 2, that is how fast I want it to go. And that's why we get these lovely sounds, these lovely sounds. [MUSIC] There we go. So I can slow that right down. Also, I've got a filter on the ambient wash, which means the further down the screen I am, the brighter the ambient wash is. [MUSIC] And I'm going to explain that in more detail next week. So, I think it'll be a great idea for you to take this example and pick it apart, add your own sounds, add your own brushes. Try and make something which just helps you understand the different aspects of graphics and sound to give you a better indication of how you might move forward and create an application of this type for your uses. [MUSIC].
