[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:03.92,Default,,0000,0000,0000,,So let's recap what we have seen until now.
Dialogue: 0,0:00:03.92,0:00:10.04,Default,,0000,0000,0000,,We now know two instructions. One is called 'point', the other is 'line'.
Dialogue: 0,0:00:10.04,0:00:18.20,Default,,0000,0000,0000,,We know that after these instructions there's something inside parentheses...
Dialogue: 0,0:00:18.20,0:00:23.28,Default,,0000,0000,0000,,A sequence of values separated by commas.
Dialogue: 0,0:00:23.28,0:00:27.41,Default,,0000,0000,0000,,Sometimes, like in this case it's only two values...
Dialogue: 0,0:00:27.41,0:00:30.49,Default,,0000,0000,0000,,'line' expects four.
Dialogue: 0,0:00:30.49,0:00:37.66,Default,,0000,0000,0000,,And at the end of the line there should be a semi-colon to make the computer know that the line is finished.
Dialogue: 0,0:00:37.66,0:00:41.77,Default,,0000,0000,0000,,Let's try to run it without it and see what happens.
Dialogue: 0,0:00:41.77,0:00:45.91,Default,,0000,0000,0000,,You see here, syntax error. Maybe I'm missing a semi-colon.
Dialogue: 0,0:00:45.91,0:00:51.04,Default,,0000,0000,0000,,Yeah, exactly. This is a bit hard to understand.
Dialogue: 0,0:00:51.04,0:01:01.24,Default,,0000,0000,0000,,It's a very long error, but this missing semi-colon is simple. So we know, we add the semi-colon.
Dialogue: 0,0:01:01.24,0:01:06.30,Default,,0000,0000,0000,,... and now it's working.
Dialogue: 0,0:01:06.30,0:01:10.37,Default,,0000,0000,0000,,Then we have learned something about the display like this little display we have here.
Dialogue: 0,0:01:10.37,0:01:16.44,Default,,0000,0000,0000,,Seems to have 100 pixels width and 100 pixels height.
Dialogue: 0,0:01:16.44,0:01:23.66,Default,,0000,0000,0000,,I'm going to explain a little bit more about this display in this drawing.
Dialogue: 0,0:01:23.66,0:01:34.85,Default,,0000,0000,0000,,Let's imagine this is our display. It's made of a lot of little pixels, like this one.
Dialogue: 0,0:01:34.85,0:01:41.98,Default,,0000,0000,0000,,The reason why we are using these two number over here: (50, 50).
Dialogue: 0,0:01:41.98,0:01:52.18,Default,,0000,0000,0000,,Is because each of the columns is numbered (0, 1, 2, 3, 4, ...)
Dialogue: 0,0:01:52.18,0:02:03.39,Default,,0000,0000,0000,,Depending on how large your screen is you can have 1280 or maybe 1024.
Dialogue: 0,0:02:03.39,0:02:09.48,Default,,0000,0000,0000,,If you're on a cellphone, cellphones have less resolution. Maybe it's 400.
Dialogue: 0,0:02:09.48,0:02:19.73,Default,,0000,0000,0000,,The same for the row. We have here (0, 1, 2, 3, ...) up to wathever, ... it may be 768.
Dialogue: 0,0:02:19.73,0:02:32.96,Default,,0000,0000,0000,,So to draw a pixel here you have to know which column and which row you're looking for.
Dialogue: 0,0:02:32.96,0:02:42.22,Default,,0000,0000,0000,,In this case it would be (3,3). So that why you write these two numbers. Or (50, 50)...
Dialogue: 0,0:02:42.22,0:02:49.37,Default,,0000,0000,0000,,... this way you can chose which pixel on the screen you want to illuminate, or change the color.
Dialogue: 0,0:02:49.37,0:02:58.54,Default,,0000,0000,0000,,Ok, so now that we know these two instructions. 'point' and 'line' this is a bit boring at the moment ...
Dialogue: 0,0:02:58.54,0:03:05.68,Default,,0000,0000,0000,,... because everytime we run program we get exactly the same drawing.
Dialogue: 0,0:03:05.68,0:03:11.80,Default,,0000,0000,0000,,It would be nice if something was changing. Maybe you can add some randomness.
Dialogue: 0,0:03:11.80,0:03:19.00,Default,,0000,0000,0000,,Instead of getting always the same line. Maybe everytime we run the program it can be a bit different.
Dialogue: 0,0:03:19.00,0:03:28.19,Default,,0000,0000,0000,,So let's search on our reference. What is there about random?
Dialogue: 0,0:03:28.19,0:03:34.30,Default,,0000,0000,0000,,If you press ctrl+f, on most browsers, you can search for something in the page...
Dialogue: 0,0:03:34.30,0:03:38.40,Default,,0000,0000,0000,,... so we'll type here 'random'. Ok.
Dialogue: 0,0:03:38.40,0:03:46.59,Default,,0000,0000,0000,,I see here just a few things about random. Looks like there's 5 functions that do something.
Dialogue: 0,0:03:46.59,0:03:51.71,Default,,0000,0000,0000,,Maybe this last one, let's check it out 'random'.
Dialogue: 0,0:03:51.71,0:03:57.86,Default,,0000,0000,0000,,Here's some examples. They probably look a little complicated at the moment.
Dialogue: 0,0:03:57.86,0:04:07.01,Default,,0000,0000,0000,,Let's read the description. "Generates random numbers. Each time the random() functions is called...
Dialogue: 0,0:04:07.01,0:04:15.21,Default,,0000,0000,0000,,... it returns an unexpected value within the specified range. If one parameter is passed to the function...'
Dialogue: 0,0:04:15.21,0:04:21.30,Default,,0000,0000,0000,,it will return a float... What's a 'float'? We don't know that yet...
Dialogue: 0,0:04:21.30,0:04:29.51,Default,,0000,0000,0000,,But let's see how it's used here. 'random(high)' or 'random(low, high)'.
Dialogue: 0,0:04:29.51,0:04:36.61,Default,,0000,0000,0000,,Here it says you can use 'random(5)' and it will return a number between 0 and 5.
Dialogue: 0,0:04:36.61,0:04:39.64,Default,,0000,0000,0000,,That sounds fun.
Dialogue: 0,0:04:39.64,0:04:43.72,Default,,0000,0000,0000,,So instead of drawing the same thing all the time.
Dialogue: 0,0:04:43.72,0:04:51.93,Default,,0000,0000,0000,,We could draw some random lines. We can replace all these numbers...
Dialogue: 0,0:04:51.93,0:04:54.99,Default,,0000,0000,0000,,... by some random values.
Dialogue: 0,0:04:54.99,0:05:00.13,Default,,0000,0000,0000,,Let's start replacing these last two '99' for example.
Dialogue: 0,0:05:00.13,0:05:10.33,Default,,0000,0000,0000,,So we'll draw a line from (0,0) which is the first pixel on the screen to ...
Dialogue: 0,0:05:10.33,0:05:17.48,Default,,0000,0000,0000,,... somewhere randomly on the screen.
Dialogue: 0,0:05:17.48,0:05:21.56,Default,,0000,0000,0000,,You have to be careful with these parentheses.
Dialogue: 0,0:05:21.56,0:05:32.75,Default,,0000,0000,0000,,When you put the cursor here it illuminates the other correspoding parentheses.
Dialogue: 0,0:05:32.75,0:05:36.89,Default,,0000,0000,0000,,That's because every parentheses you have opened must be closed.
Dialogue: 0,0:05:36.89,0:05:50.18,Default,,0000,0000,0000,,So this is 'random(100)' and this is again 'random(100)' and back here you close the parenthesis from the beggining.
Dialogue: 0,0:05:50.18,0:05:57.34,Default,,0000,0000,0000,,You can add some spaces if you want so it's more clear.
Dialogue: 0,0:05:57.34,0:06:02.43,Default,,0000,0000,0000,,This is drawing a line from (0,0) to a random point somewhere on the screen.
Dialogue: 0,0:06:02.43,0:06:06.51,Default,,0000,0000,0000,,Let's run this thing and see what happens.
Dialogue: 0,0:06:06.51,0:06:12.53,Default,,0000,0000,0000,,So now it starts here at (0,0) and ends on this point.
Dialogue: 0,0:06:12.53,0:06:19.69,Default,,0000,0000,0000,,What if run it again? It's very different.
Dialogue: 0,0:06:19.69,0:06:31.90,Default,,0000,0000,0000,,Everytime I run the program it's drawing a line that starts from the corner and ends somewhere on the screen.
Dialogue: 0,0:06:31.90,0:06:39.04,Default,,0000,0000,0000,,Let's replace the first two numbers with two random ones.
Dialogue: 0,0:06:39.04,0:07:03.62,Default,,0000,0000,0000,,Now we'll draw a line from some random horizontal and vertical position on the screen and to a random destination x and y.
Dialogue: 0,0:07:03.62,0:07:07.74,Default,,0000,0000,0000,,Oh that's a funny coincidence, it's totally vertical!
Dialogue: 0,0:07:07.74,0:07:17.99,Default,,0000,0000,0000,,So everytime I run the program it's going to be drawing some random line.
Dialogue: 0,0:07:17.99,0:07:25.11,Default,,0000,0000,0000,,One nice thing about Processing is that you can make animations and it's very easy.
Dialogue: 0,0:07:25.11,0:07:32.17,Default,,0000,0000,0000,,I'm going to delete all these points here. Just leave the line.
Dialogue: 0,0:07:32.17,0:07:42.32,Default,,0000,0000,0000,,I have to remember how to do this... it's 'void draw()'.
Dialogue: 0,0:07:42.32,0:07:45.41,Default,,0000,0000,0000,,Let's see if it works and then I explain what it does.
Dialogue: 0,0:07:45.41,0:07:49.50,Default,,0000,0000,0000,,Wow! That's a lot of lines!
Dialogue: 0,0:07:49.50,0:07:52.54,Default,,0000,0000,0000,,It's becoming all black.
Dialogue: 0,0:07:52.54,0:07:55.56,Default,,0000,0000,0000,,What is it doing?
Dialogue: 0,0:07:55.56,0:08:02.75,Default,,0000,0000,0000,,This is one nice thing in Processing. Of course, in other languages, you can do graphics and draw...
Dialogue: 0,0:08:02.75,0:08:06.80,Default,,0000,0000,0000,,... but usually it's much more complicated than this.
Dialogue: 0,0:08:06.80,0:08:13.99,Default,,0000,0000,0000,,Here with just two lines of code we're making this animation.
Dialogue: 0,0:08:13.99,0:08:23.12,Default,,0000,0000,0000,,'draw()' is a special function, that's already defined. It allows you to run something continuously.
Dialogue: 0,0:08:23.12,0:08:24.18,Default,,0000,0000,0000,,What does it mean?
Dialogue: 0,0:08:24.18,0:08:31.39,Default,,0000,0000,0000,,You know movies have frames. They have many frames per second so...
Dialogue: 0,0:08:31.39,0:08:37.46,Default,,0000,0000,0000,,... when you show many images per second you get the illusion of movement, animation.
Dialogue: 0,0:08:37.46,0:08:41.52,Default,,0000,0000,0000,,Well, that's what draw is doing here.
Dialogue: 0,0:08:41.52,0:08:50.75,Default,,0000,0000,0000,,You just have to know that anything you put inside this 'void draw() { }'.
Dialogue: 0,0:08:50.75,0:08:56.92,Default,,0000,0000,0000,,All the lines of code that are in between will be run many times per second.
Dialogue: 0,0:08:56.92,0:09:03.10,Default,,0000,0000,0000,,That's why it's drawing random lines many times per second. So when you run it...
Dialogue: 0,0:09:03.10,0:09:12.26,Default,,0000,0000,0000,,Because we're not erasing anything it's becoming slowly all black.
Dialogue: 0,0:09:12.26,0:09:22.04,Default,,0000,0000,0000,,It would be nice if we would erase the last line. Then it would look as if the line's moving.
Dialogue: 0,0:09:22.04,0:09:27.15,Default,,0000,0000,0000,,This will be the last instruction I explain on this video.
Dialogue: 0,0:09:27.15,0:09:31.25,Default,,0000,0000,0000,,It's called 'background'.
Dialogue: 0,0:09:31.25,0:09:41.58,Default,,0000,0000,0000,,Let's go to the manual and check it out. Using 'ctrl+f', searching for 'background'.
Dialogue: 0,0:09:41.58,0:09:52.82,Default,,0000,0000,0000,,Here's some examples. Looks like 'background(51)' makes this grey background.
Dialogue: 0,0:09:52.82,0:09:56.90,Default,,0000,0000,0000,,If we use these numbers it makes a yellow one....
Dialogue: 0,0:09:56.90,0:10:00.97,Default,,0000,0000,0000,,... looks like we can even use and image as background.
Dialogue: 0,0:10:00.97,0:10:08.13,Default,,0000,0000,0000,,The 'background' function sets the color used for the backround of the Processing window.
Dialogue: 0,0:10:08.13,0:10:12.20,Default,,0000,0000,0000,,The default background is light grey. We noticed that.
Dialogue: 0,0:10:12.20,0:10:20.32,Default,,0000,0000,0000,,If we run it again you can see... oh what did I break?
Dialogue: 0,0:10:20.32,0:10:23.35,Default,,0000,0000,0000,,Sorry I had this 'backround()' which is not finished.
Dialogue: 0,0:10:23.35,0:10:30.45,Default,,0000,0000,0000,,Ok I run this. You can see the backround is light grey.
Dialogue: 0,0:10:30.45,0:10:32.53,Default,,0000,0000,0000,,What else does it say?
Dialogue: 0,0:10:32.53,0:10:39.66,Default,,0000,0000,0000,,In the 'draw' function the backround color is used to clear the display at the beginning of each frame.
Dialogue: 0,0:10:39.66,0:10:43.73,Default,,0000,0000,0000,,That's exactly what we want to do right now.
Dialogue: 0,0:10:43.73,0:10:49.83,Default,,0000,0000,0000,,I like this yellow here so I'm going to copy this line.
Dialogue: 0,0:10:49.83,0:10:54.99,Default,,0000,0000,0000,,I'll paste this here...
Dialogue: 0,0:10:54.99,0:10:57.01,Default,,0000,0000,0000,,So what will happen now?
Dialogue: 0,0:10:57.01,0:11:04.17,Default,,0000,0000,0000,,Many times per second, this function is going to be called. The first thing it will do is make the whole screen yellow.
Dialogue: 0,0:11:04.17,0:11:09.30,Default,,0000,0000,0000,,Then it will draw a random line. Let's check it out.
Dialogue: 0,0:11:09.30,0:11:14.40,Default,,0000,0000,0000,,I don't know if you can see, but in my computer it's going super fast.
Dialogue: 0,0:11:14.40,0:11:20.45,Default,,0000,0000,0000,,Drawing all these crazy lines. Jumping up and down.
Dialogue: 0,0:11:20.45,0:11:28.61,Default,,0000,0000,0000,,I think that's enough for today. You can already do some experiments.
Dialogue: 0,0:11:28.61,0:11:34.80,Default,,0000,0000,0000,,You can try replacing this line by maybe some random dots.
Dialogue: 0,0:11:34.80,0:11:41.93,Default,,0000,0000,0000,,You can also try changing these background values to see what happens. Try getting different colors.
Dialogue: 0,0:11:41.93,0:11:52.22,Default,,0000,0000,0000,,If you check the reference you can see sometimes it's using one number, sometimes it's using 3 numbers.
Dialogue: 0,0:11:52.22,0:11:57.34,Default,,0000,0000,0000,,Or even images. So you can experiment.
Dialogue: 0,0:11:57.34,0:12:04.51,Default,,0000,0000,0000,,One thing I hope to show you is that it's good to experiment.
Dialogue: 0,0:12:04.51,0:12:09.60,Default,,0000,0000,0000,,To search on the manual, to search on the internet and go changing things.
Dialogue: 0,0:12:09.60,0:12:17.81,Default,,0000,0000,0000,,Usually you can't break anything too big playing here in Processing.
Dialogue: 0,0:12:17.81,0:12:21.82,Default,,0000,0000,0000,,Either it will work or it will complain with some error.
Dialogue: 0,0:12:21.82,0:12:25.00,Default,,0000,0000,0000,,Then you just have to find the bug and fix it.