WEBVTT 00:00:00.000 --> 00:00:03.921 So let's recap what we have seen until now. 00:00:03.921 --> 00:00:10.043 We now know two instructions. One is called 'point', the other is 'line'. 00:00:10.043 --> 00:00:18.201 We know that after these instructions there's something inside parentheses... 00:00:18.201 --> 00:00:23.280 A sequence of values separated by commas. 00:00:23.280 --> 00:00:27.408 Sometimes, like in this case it's only two values... 00:00:27.408 --> 00:00:30.487 'line' expects four. 00:00:30.487 --> 00:00:37.664 And at the end of the line there should be a semi-colon to make the computer know that the line is finished. 00:00:37.664 --> 00:00:41.767 Let's try to run it without it and see what happens. 00:00:41.767 --> 00:00:45.908 You see here, syntax error. Maybe I'm missing a semi-colon. 00:00:45.908 --> 00:00:51.040 Yeah, exactly. This is a bit hard to understand. 00:00:51.040 --> 00:01:01.243 It's a very long error, but this missing semi-colon is simple. So we know, we add the semi-colon. 00:01:01.243 --> 00:01:06.304 ... and now it's working. 00:01:06.304 --> 00:01:10.367 Then we have learned something about the display like this little display we have here. 00:01:10.367 --> 00:01:16.442 Seems to have 100 pixels width and 100 pixels height. 00:01:16.442 --> 00:01:23.655 I'm going to explain a little bit more about this display in this drawing. 00:01:23.655 --> 00:01:34.846 Let's imagine this is our display. It's made of a lot of little pixels, like this one. 00:01:34.846 --> 00:01:41.978 The reason why we are using these two number over here: (50, 50). 00:01:41.978 --> 00:01:52.180 Is because each of the columns is numbered (0, 1, 2, 3, 4, ...) 00:01:52.180 --> 00:02:03.386 Depending on how large your screen is you can have 1280 or maybe 1024. 00:02:03.386 --> 00:02:09.482 If you're on a cellphone, cellphones have less resolution. Maybe it's 400. 00:02:09.482 --> 00:02:19.734 The same for the row. We have here (0, 1, 2, 3, ...) up to wathever, ... it may be 768. 00:02:19.734 --> 00:02:32.964 So to draw a pixel here you have to know which column and which row you're looking for. 00:02:32.964 --> 00:02:42.224 In this case it would be (3,3). So that why you write these two numbers. Or (50, 50)... 00:02:42.224 --> 00:02:49.372 ... this way you can chose which pixel on the screen you want to illuminate, or change the color. 00:02:49.372 --> 00:02:58.545 Ok, so now that we know these two instructions. 'point' and 'line' this is a bit boring at the moment ... 00:02:58.545 --> 00:03:05.682 ... because everytime we run program we get exactly the same drawing. 00:03:05.682 --> 00:03:11.800 It would be nice if something was changing. Maybe you can add some randomness. 00:03:11.800 --> 00:03:19.001 Instead of getting always the same line. Maybe everytime we run the program it can be a bit different. 00:03:19.001 --> 00:03:28.186 So let's search on our reference. What is there about random? 00:03:28.186 --> 00:03:34.297 If you press ctrl+f, on most browsers, you can search for something in the page... 00:03:34.297 --> 00:03:38.396 ... so we'll type here 'random'. Ok. 00:03:38.396 --> 00:03:46.587 I see here just a few things about random. Looks like there's 5 functions that do something. 00:03:46.587 --> 00:03:51.712 Maybe this last one, let's check it out 'random'. 00:03:51.712 --> 00:03:57.858 Here's some examples. They probably look a little complicated at the moment. 00:03:57.858 --> 00:04:07.009 Let's read the description. "Generates random numbers. Each time the random() functions is called... 00:04:07.009 --> 00:04:15.207 ... it returns an unexpected value within the specified range. If one parameter is passed to the function...' 00:04:15.207 --> 00:04:21.301 it will return a float... What's a 'float'? We don't know that yet... 00:04:21.301 --> 00:04:29.514 But let's see how it's used here. 'random(high)' or 'random(low, high)'. 00:04:29.514 --> 00:04:36.606 Here it says you can use 'random(5)' and it will return a number between 0 and 5. 00:04:36.606 --> 00:04:39.644 That sounds fun. 00:04:39.644 --> 00:04:43.722 So instead of drawing the same thing all the time. 00:04:43.722 --> 00:04:51.930 We could draw some random lines. We can replace all these numbers... 00:04:51.930 --> 00:04:54.992 ... by some random values. 00:04:54.992 --> 00:05:00.129 Let's start replacing these last two '99' for example. 00:05:00.129 --> 00:05:10.332 So we'll draw a line from (0,0) which is the first pixel on the screen to ... 00:05:10.332 --> 00:05:17.477 ... somewhere randomly on the screen. 00:05:17.477 --> 00:05:21.562 You have to be careful with these parentheses. 00:05:21.562 --> 00:05:32.746 When you put the cursor here it illuminates the other correspoding parentheses. 00:05:32.746 --> 00:05:36.891 That's because every parentheses you have opened must be closed. 00:05:36.891 --> 00:05:50.180 So this is 'random(100)' and this is again 'random(100)' and back here you close the parenthesis from the beggining. 00:05:50.180 --> 00:05:57.340 You can add some spaces if you want so it's more clear. 00:05:57.340 --> 00:06:02.431 This is drawing a line from (0,0) to a random point somewhere on the screen. 00:06:02.431 --> 00:06:06.506 Let's run this thing and see what happens. 00:06:06.506 --> 00:06:12.527 So now it starts here at (0,0) and ends on this point. 00:06:12.527 --> 00:06:19.686 What if run it again? It's very different. 00:06:19.686 --> 00:06:31.898 Everytime I run the program it's drawing a line that starts from the corner and ends somewhere on the screen. 00:06:31.898 --> 00:06:39.037 Let's replace the first two numbers with two random ones. 00:06:39.037 --> 00:07:03.618 Now we'll draw a line from some random horizontal and vertical position on the screen and to a random destination x and y. 00:07:03.618 --> 00:07:07.735 Oh that's a funny coincidence, it's totally vertical! 00:07:07.735 --> 00:07:17.993 So everytime I run the program it's going to be drawing some random line. 00:07:17.993 --> 00:07:25.112 One nice thing about Processing is that you can make animations and it's very easy. 00:07:25.112 --> 00:07:32.166 I'm going to delete all these points here. Just leave the line. 00:07:32.166 --> 00:07:42.322 I have to remember how to do this... it's 'void draw()'. 00:07:42.322 --> 00:07:45.407 Let's see if it works and then I explain what it does. 00:07:45.407 --> 00:07:49.495 Wow! That's a lot of lines! 00:07:49.495 --> 00:07:52.544 It's becoming all black. 00:07:52.544 --> 00:07:55.559 What is it doing? 00:07:55.559 --> 00:08:02.749 This is one nice thing in Processing. Of course, in other languages, you can do graphics and draw... 00:08:02.749 --> 00:08:06.802 ... but usually it's much more complicated than this. 00:08:06.802 --> 00:08:13.989 Here with just two lines of code we're making this animation. 00:08:13.989 --> 00:08:23.119 'draw()' is a special function, that's already defined. It allows you to run something continuously. 00:08:23.119 --> 00:08:24.183 What does it mean? 00:08:24.183 --> 00:08:31.389 You know movies have frames. They have many frames per second so... 00:08:31.389 --> 00:08:37.456 ... when you show many images per second you get the illusion of movement, animation. 00:08:37.456 --> 00:08:41.521 Well, that's what draw is doing here. 00:08:41.521 --> 00:08:50.748 You just have to know that anything you put inside this 'void draw() { }'. 00:08:50.748 --> 00:08:56.921 All the lines of code that are in between will be run many times per second. 00:08:56.921 --> 00:09:03.095 That's why it's drawing random lines many times per second. So when you run it... 00:09:03.095 --> 00:09:12.255 Because we're not erasing anything it's becoming slowly all black. 00:09:12.255 --> 00:09:22.036 It would be nice if we would erase the last line. Then it would look as if the line's moving. 00:09:22.036 --> 00:09:27.148 This will be the last instruction I explain on this video. 00:09:27.148 --> 00:09:31.247 It's called 'background'. 00:09:31.247 --> 00:09:41.575 Let's go to the manual and check it out. Using 'ctrl+f', searching for 'background'. 00:09:41.575 --> 00:09:52.819 Here's some examples. Looks like 'background(51)' makes this grey background. 00:09:52.819 --> 00:09:56.905 If we use these numbers it makes a yellow one.... 00:09:56.905 --> 00:10:00.972 ... looks like we can even use and image as background. 00:10:00.972 --> 00:10:08.133 The 'background' function sets the color used for the backround of the Processing window. 00:10:08.133 --> 00:10:12.201 The default background is light grey. We noticed that. 00:10:12.201 --> 00:10:20.325 If we run it again you can see... oh what did I break? 00:10:20.325 --> 00:10:23.354 Sorry I had this 'backround()' which is not finished. 00:10:23.354 --> 00:10:30.454 Ok I run this. You can see the backround is light grey. 00:10:30.454 --> 00:10:32.530 What else does it say? 00:10:32.530 --> 00:10:39.656 In the 'draw' function the backround color is used to clear the display at the beginning of each frame. 00:10:39.656 --> 00:10:43.729 That's exactly what we want to do right now. 00:10:43.729 --> 00:10:49.833 I like this yellow here so I'm going to copy this line. 00:10:49.833 --> 00:10:54.992 I'll paste this here... 00:10:54.992 --> 00:10:57.008 So what will happen now? 00:10:57.008 --> 00:11:04.174 Many times per second, this function is going to be called. The first thing it will do is make the whole screen yellow. 00:11:04.174 --> 00:11:09.297 Then it will draw a random line. Let's check it out. 00:11:09.297 --> 00:11:14.396 I don't know if you can see, but in my computer it's going super fast. 00:11:14.396 --> 00:11:20.450 Drawing all these crazy lines. Jumping up and down. 00:11:20.450 --> 00:11:28.610 I think that's enough for today. You can already do some experiments. 00:11:28.610 --> 00:11:34.795 You can try replacing this line by maybe some random dots. 00:11:34.795 --> 00:11:41.926 You can also try changing these background values to see what happens. Try getting different colors. 00:11:41.926 --> 00:11:52.224 If you check the reference you can see sometimes it's using one number, sometimes it's using 3 numbers. 00:11:52.224 --> 00:11:57.342 Or even images. So you can experiment. 00:11:57.342 --> 00:12:04.512 One thing I hope to show you is that it's good to experiment. 00:12:04.512 --> 00:12:09.601 To search on the manual, to search on the internet and go changing things. 00:12:09.601 --> 00:12:17.806 Usually you can't break anything too big playing here in Processing. 00:12:17.806 --> 00:12:21.815 Either it will work or it will complain with some error. 00:12:21.815 --> 00:12:25.000 Then you just have to find the bug and fix it.