[SOUND]. So today I'm going to introduce the basics of how to write computer programs that draw pictures and that you can interact with. The first thing you need to do when you want to write, draw an image with a computer program is turn your image into a set of numbers. Because at a certain level, numbers are what computers understand. If you think about a computer screen, it's composed of millions of pixels. These are picture elements. These are tiny little squares, each of which has their own color. And you can think of the screen as a large grid of pixels. As you can see on my slides here. The first thing you need to know when you're drawing something to screen is which particular pixel you're drawing to or collection of pixels, and you need to be able to express that as a number. So, how do we do that? The first thing we do is we have a number that represents how many pixels across you are. That's the horizontal position or what we call the x value. We also need to know how many pixels down you are. The vertical position or y value. These two numbers give us a position of a pixel. For example 8, 6 gives us this pixel here shown in red. So, with two numbers we can get a single pixel value. So let's have a look at that in practical program. So this is the program, I showed you earlier. We've got the size. We've got the background, and we can draw a point at a certain position. Say 100, 100. Now you probably cant even see the point, it's actually here, if you see my mouse position where I'm clicking. Why cant you see it? Because pixels are tiny, let's do something else before we proceed and make the point a little bit bigger. We use this command called stroke weight. Which gives you the width of lines you draw or the size of the points. Now set that to six and we're going to get something a little bit bigger. And there we go we can clearly see a single point on the screen. Now, creating images out of individual points is going to be hard work. So, let's look at how to make some more basic shapes. Okay, so here we have our pixel of position 8, 6, with another point given by another two numbers, say, 4, 3. We can draw a line. So, with four numbers, x and y at the start position, and the x and y of the n position, we can draw a line. Similarly with another full numbers we can go further and draw a rectangle, and the only difference being that the first two positions are the top left position of the rectangle and the other two numbers are not a position on the rectangle, they are the height and width. So let's have another look at trying to draw more complex... If, instead here, of point, we use the command line, we can draw a line to 200, 300 and see what that looks like. There we have a line. Similarly, the rect command gives us a rectangle. And here instead of a, the end position of the line for the second two points, it's the height and width of the rectangle. So I'm making a square, which has equal height and width. So there we are. Let's have a quick look at what I've just done. So here we are, these are two commands I've written. Size commands. What is the size command? I showed that in my introduction lecture to processing, but I didn't really talk about it. Well, in size, you're passing in 2 numbers. The first number is the x, is the width, of the processing window you're creating. The second number is the height, the y value. Similarly with a line The first number is the x position, the horizontal position is the start point. Then the hot vertical position, the y position is, is the start point, and then the x and y positions of the end point of the line. So very simple, with four numbers, you can draw a line. And from there, you can get Many more complex shapes. The next thing you might want to look at is colors. So up to now we've been drawing black lines. How do we represent color as numbers? Well, if we start with black and white. The color coming off a computer monitor is really the amount of light that is being emitted by each pixel on the screen. So we can think of the brightness of the of a particular pixel, as being a value that we can measure. and we can measure that brightness at some maximum value, which is white and 0, which is no color coming off, which is black. And if you look here, 0 is black. And then we can use the value 255 as why?. Why 255? Well, that happens to be the largest value you can fit in 8 bits. So 8 ones and 0s on, in computer memory. Any value in between those two will give you gray lighter, or darker gray. So you can have shay, any shades or variations of gray value between those two values. Fine, that's brightness, but what about real color? Well, when to talk about colors, we need to think about primary colors, and if you. At a very young age at school, you will have learned that you can make any color by mixing three colors of paint together. We're not actually working with paint. We're working with light, and that's slightly different. The primary colors are different, but the concept is same, and the primary colors we have are green, blue and red. And any color can be made up with these three, three basic colors. Why is that? It's not a fundamental property of light, but it's a fundamental property of our eye. we have three types of receptor in our eye, that are sensitive to green, red, and blue parts of the spectrum. And, if the light comes between those colors, it will trigger. a mixture of say, the red and green components receptors on our eye. Therefore we can fool our eye by, instead of having a color that's between green and red, sending both green and red at the same time will look like a mix of green and red, which is yellow. Similarly, green and blue is cyan Red and blue is magenta, and any other color can be mixed from those basic primary colors. That's great from a computer graphics point of view, because we only need three numbers to represent any color, a red value, a green value and a blue value. So how do we use colors? Well, there's a number of ways in which you can use colors. If we look here we've got a basic rectangle and what can we change about that rectangle? Well, the first that we can change about the rectangle is the border of the rectangle and we use the stroke commands. Stroke means the color of the line that we use to draw lines on screen. We can also change the center of the rectangle using the fill command. Fill is the color that is used to draw the center of any shape, the middle of any shape, that we're drawing on screen. We've already seen the background command, and I'll show you that again which has the, changes the background color of the screen. The last command that I've already shown you that is connected is stroke weight that doesn't specify color, but it specifies the width of any lines you're drawing on the screen. So let's have a look at that in code. So we've already used background, and we can see here that we've used backgrounds 25500, so that's 255 red, 0 green, 0 blue. And as we see, that came out as a bright red. If we were to change that to 255 zero, 150, we would mix a little blue in and we'd get a different colot. Sort of more purpley color. Let's try changing these, the colors of this rectangle, so if we use stroke, we can set the color of the border of the rectangle, let's set it to a bright green. Sorry, just made a mistake there. And we can use fill to set the sensor color. maybe we can use a light blue. We mix in light blue by having quite a lot of red and green. So it's quite bright. There's a lot of whiteness in there, but more blue. And there we go quite a light blue, we could make it bluer by turning down the red and green. So that's, we've got some quite garish colors here. I wouldn't actually make an application with these colors, but it shows you sort of how you can mix, mix some basic colors. The one last thing I want to show you is that once you'll called stroke and fill, those values continue for everything else you draw, so if I draw another rectangle eh, then they will be the same colors. So by putting in a second fill command, I can change the color of my second vector. Okay, there's one last thing I'd like to say about color, which is to talk about transparency. Sometimes when you're specifying colors as well as red, green, and blue, you'll get a fourth number. This is the opacity. Often called alpha. Opacity controls how transparent something is. It's actually the opposite of transparency. So when The opacity is 255, it means it's not transparent at all, and when it's 0, it's completely transparent. So, to get colors which are partially transparent, you need an alpha value between 0 and 255. So, for example, 255, 0, 0, 128 is half transparent red. And we can see this in code here, by setting the alpha of this rectangle to 128, and move it slightly so that it overlaps the original, the original rectangle. we don't want it to completely overlap. And you can see it is partially transparent. Its color is affecting what's beneath it, but not completely. And Mick will show you some nice examples of how you can use transparency to get some really nice visual effects. So, with what I've shown you so far, you can make some nice drawings. With computer codes, and that's cool as far as it goes. But it's not really a computer program yet because all it's doing is drawing a picture. When you think of a computer program you want to interact with it. It has to do things independently. So if we look at what our program is doing up to now. We're pressing play, it's running its code. And when it finish, it will draw a picture and we can look at it. But that's not how we, you complete a program 1, we want to be able to interact with that code. so we can do this by splitting a code into news and number bit. First off, we we have some stuff that should never change. For example, the size of the screen, the background color. They should always stay. [INAUDIBLE] And that's what we call the setup part of our program. And then there's stuff that should change, so for example, the things that we're drawing, like the lines, they should move around based on what we're doing. That's the drawing part of our program. And we put them in two different blocks of code. The first one we put in a block of code called setup I won't get into full details of what everything means here. If you're familiar with Java, you will understand it. If not, look at some of my additional lectures. But void setup is what's called a function, and that contains all the code that we do at the beginning of the program and it happens only once. The important thing to note here are these curly brackets. They say they tell you where the start and end of the setup code is. Similarly, we can have functions which happen times the response to certain events. So for example, I can have alpha function mouseDragged. What mouseDragged does is that it happens every time you move the mouse while the mouse button is held hold down. A very useful function for interaction. So what happens now is I move the mouse, I give some input, mouse drag responds and I play and then it paints a picture and I can see that. That's fine, but if you look at the code as it is now, every time I call mouse dragged, it's drawing the same line because the numbers in there aren't changing. I need to put in different numbers to my line in order to change the interaction I'm getting and make it truly interactive, to make it respond to my mouse movements. And this is how I can do it. Rather than putting a number in there, I'm putting in The value mouse x mouse y pmouse x pmouse y. Now what are these things. Well these are variables their names stand for numbers if you're not familiar with the term variable. But if you're not then you should look at my additional lectures. And mouse x and mouse y are automatically set to the current position of the mouse. So this is your mouse position as an x and y value. pmouse and X and pmouseY are useful values. They give you the previous position of the mouse and that's what enables us to do some, some smooth drawing. I'll show you that in a minute. So let's look at some code that does this. So this is about the most basic interactive code you can get in processing. We have a setup function that sets the size of the screen and the background color, and a mouse drag function that draws a point that the position is the mouse. So let's see what that does. We've got a nice little drawing. That's nice, but, when I draw, I'd like to actually sort of draw continuous lines, and we can do that with the code I just showed you, because we can draw a line from the previous mouse position to the current mouse position. [NOISE] And there we are, some nice continuous lines drawn. Now, we've got a nice bit of interaction but it doesn't look great, there's a lot we can do with this aesthetically to make. In a few minutes we'll talk to you about that. but for now, that's most of want to say, what, what I'm going to say. I just want to show you one little trick. about the background function. So at the moment it's not. Every time I draw, it's drawing on top of what I've already drawn. And sometimes that's what we want. Sometimes what, that's what we don't. not what we want. If I move the function background into mouse dragged as well as setting the background color what background does is it clears the screen. So if I move it into mouse dragged it's, it's clearing the screen so I've no longer accumulated all the drawings I've ever done. And I just get this tiny little try off the mouse. Maybe not exactly what we want now. But there's lots of situations where it is exactly what we want. And next week we'll show you that in detail. So, so far what we've got is the ability to draw some basic energies to screen. Some basic shapes and interact with that by responding to mouse position. There's a lot more we, you can do while you're drawing, and I would recommend that you look at the the processing website, processing.org. There's a link to it from the from our our call server site, and particularly look at the processing reference and look at some of the examples for shapes. A good example is to look at the ellipse command So far we've looked at lines, and rectangles. Ellipse shows you how to draw ellipses, and circles, and, and with that, that's already part of your repertoire, but it will already, it will also start you learning how to use the reference for, for processing, and pick up, and use new commands that will enable you to do more complex drawing. So I'll leave you here and Matthew will talk a bit about how to do audio processing in processing and then Mick will show you more complex examples using the basis, basic code that we've learned here... [MUSIC]
