1
00:00:00,000 --> 00:00:04,707
Now that we have the solution
to the exercise I proposed yesterday...

2
00:00:04,707 --> 00:00:06,743
I think we should add some color.

3
00:00:06,743 --> 00:00:11,881
Now it looks very serious.
A black background and white lines.

4
00:00:11,881 --> 00:00:18,040
We should add some colors. 
We should also make it larger: the window is too small.

5
00:00:18,040 --> 00:00:21,069
First let's find out how we can add some color.

6
00:00:21,069 --> 00:00:26,197
We know this stroke() function is setting the color of the line,

7
00:00:26,197 --> 00:00:28,262
but it's just making it white.

8
00:00:28,262 --> 00:00:34,364
We have seen that if we add
three values here separated by commas

9
00:00:34,364 --> 00:00:37,448
instead of just one, we get some color.

10
00:00:37,448 --> 00:00:42,529
These are the Red value, the Green value and the Blue value.

11
00:00:42,529 --> 00:00:45,595
Now we should be getting red line. Let's try it out.

12
00:00:45,595 --> 00:00:49,662
Yes! But it's still not very colorful...

13
00:00:49,662 --> 00:00:54,852
It would be good for vampires...
maybe... but we are not vampires :)

14
00:00:54,852 --> 00:01:10,102
Let's add some random colors!
So we know that if we repeat this random(256)...

15
00:01:10,102 --> 00:01:13,185
inside the parenthesis 3 times we will get completely random colors.

16
00:01:13,185 --> 00:01:22,340
We can get anything: any shade of green, yellow, blue, purple, black or white.

17
00:01:22,340 --> 00:01:28,492
But it's still moving very fast and with this 
black background it's a bit hard to see.

18
00:01:28,492 --> 00:01:36,649
Let's remove this black background that it's
being drawn all the time.

19
00:01:36,649 --> 00:01:39,732
You can deactivate any line 
if you add two forward slashes: //

20
00:01:39,732 --> 00:01:45,749
so you convert this line into a comment
and the line does not run anymore.

21
00:01:45,749 --> 00:01:55,936
So now that we are no longer erasing the screen
every time it should keep adding colorful lines.

22
00:01:55,936 --> 00:02:05,161
So there you have the result. 
It's adding lines with lots of different colors.

23
00:02:05,161 --> 00:02:10,295
Let's take a look at the random() function.

24
00:02:10,295 --> 00:02:18,501
Let's go to the reference. Here I press CTRL+F 
and type "r a n d o m", then click.

25
00:02:18,501 --> 00:02:26,630
Here's the random() function. There are two ways
of using it. We are using it this way.

26
00:02:26,630 --> 00:02:33,674
We use random and type inside one number.
But it's possible to enter two numbers.

27
00:02:33,674 --> 00:02:36,723
What happens in that case?

28
00:02:36,723 --> 00:02:43,860
When you enter one number, you get a random number between 0 and the number you entered.

29
00:02:43,860 --> 00:02:46,940
This means give me a number between 0 and 100.

30
00:02:46,940 --> 00:02:53,046
This means give me a number between 0 and 256.

31
00:02:53,046 --> 00:03:01,168
But if we add two numbers, we can have a bottom limit.
What does that mean?

32
00:03:01,168 --> 00:03:16,479
Let's see. If I enter here "200, 256" this means "give me a random number between 200 and 256"

33
00:03:16,479 --> 00:03:27,719
We know that 0 means black, or no light:
no red light, no green light, no blue light.

34
00:03:27,719 --> 00:03:37,888
We are now forcing the program to give us numbers which are quite high; quite close to the top.

35
00:03:37,888 --> 00:03:46,105
What happens now? So now the random colors are, all of them, quite close to white.

36
00:03:46,105 --> 00:03:53,232
When we get 256 for all red, green and blue, we get white.

37
00:03:53,232 --> 00:03:59,272
So these are random colors, and all of them are close to white.

38
00:03:59,272 --> 00:04:10,475
If we do the opposite, if we enter here "100, 150",
what happens then?

39
00:04:10,475 --> 00:04:17,688
You should try. You should different values here and
see what kind of results do you get.

40
00:04:17,688 --> 00:04:23,803
Now you can see it looks quite gray. It's quite dark. You can still see some color,

41
00:04:23,803 --> 00:04:28,851
but it's not very colorful.

42
00:04:28,851 --> 00:04:34,962
You don't have to use always
the same values here three times.

43
00:04:34,962 --> 00:04:40,058
For example, let's put more red than green or blue.

44
00:04:40,058 --> 00:04:48,188
With this example we know we are going to get an amount of red which is between 200 and 256.

45
00:04:48,188 --> 00:04:54,344
So it's near the maximum.
But we'll get only a little bit of green and some blue.

46
00:04:54,344 --> 00:05:08,650
So in the result the overall color is close to red. Not pure red, but close to it.

47
00:05:08,650 --> 00:05:25,148
One last example. We can get a lot of red and a lot of green, but just a little bit of blue (50 to 100).

48
00:05:25,148 --> 00:05:36,348
What now? We get something like yellow-green-orange. Why is this happening?

49
00:05:36,348 --> 00:05:44,427
Well, when we get the maximum value for red and green,
the result is yellow.

50
00:05:44,427 --> 00:05:54,621
Sometimes it happens that we get less red than green, so the result is more green-like.

51
00:05:54,621 --> 00:06:00,796
You can try different combinations here 
and see what you get.

52
00:06:00,796 --> 00:06:03,837
You can get all kinds of different tones.

53
00:06:03,837 --> 00:06:11,995
Now it looks more colorful and happier than before.
We mentioned that the screen is too small.

54
00:06:11,995 --> 00:06:21,313
How can we make it larger? Let's go to the reference and search for size()

55
00:06:21,405 --> 00:06:27,738
This is textSize... here it's size().
Maybe it's this one. Let's see what it is.

56
00:06:27,738 --> 00:06:37,525
"Defines the dimensions of the display window 
in units of pixels"

57
00:06:37,525 --> 00:06:41,587
"The size() function must be the first line in setup()"

58
00:06:41,587 --> 00:06:50,783
"If size() is not called" ... like right now, we don't have in our program any call to the size() function ...

59
00:06:50,783 --> 00:07:00,009
What is happening then? ... "the default size of the window is 100x100 pixels"

60
00:07:00,009 --> 00:07:03,002
That's what we got: 100x100

61
00:07:03,002 --> 00:07:09,159
So let's see here in the example how they do it. Here's an example.

62
00:07:09,159 --> 00:07:15,205
It says "void setup()" and inside 
they call size() and then background()

63
00:07:15,205 --> 00:07:24,457
So I'm going to add here at the beginning "void setup", then open and close parenthesis...

64
00:07:24,457 --> 00:07:31,642
open and close curly braces, and in between I will call size().

65
00:07:31,642 --> 00:07:46,001
Currently we have 100x100, so let's make it 200x200 to double the display size. Let's run this program.

66
00:07:46,001 --> 00:07:57,246
Ok! Nice. Now you can see the screen is twice as large but we are only drawing on the top left corner.

67
00:07:57,246 --> 00:08:03,363
Why is that? Let's look at our program.

68
00:08:03,363 --> 00:08:17,516
Ok. One reason is that we are drawing lines from the top to pixel 99. Our screen used to be 100 pixels tall.

69
00:08:17,516 --> 00:08:26,717
So this was enough to fill the screen, but now that it's 200 pixels tall, I should make this 199.

70
00:08:26,717 --> 00:08:38,936
This way we will draw lines from the top to the bottom of the screen. Let's check it out.

71
00:08:38,936 --> 00:08:52,188
That's right! Now lines go from top to bottom, but still only draw on the left half of the screen.

72
00:08:52,188 --> 00:08:57,269
We are not drawing lines on the right half. This happens because here we say ...

73
00:08:57,269 --> 00:09:09,500
"distance_left" is a random number between 0 and 100, but our screen is 200 pixels wide.

74
00:09:09,500 --> 00:09:17,653
Now I tell him I want numbers between 0 and 200, and I run it again.

75
00:09:17,653 --> 00:09:23,741
Finally we have a big screen full of colorful lines.