Learn programming 9: Change screen size, animate colorful lines

We modify the last program we did (animated white vertical lines on black background) to make it more colorful. We see how to use the random function with two parameters instead of one. This way we get a random nomber that is between a minimum and a maximum value. We also show how to change the screen size using the size() function to make it larger. When we don't use the size() function, the screen is by default 100 pixels wide and 100 pixels tall.

Now that we have the solution
to the exercise I proposed yesterday...

I think we should add some color.

Now it looks very serious.
A black background and white lines.

We should add some colors.
We should also make it larger: the window is too small.

First let's find out how we can add some color.

We know this stroke() function is setting the color of the line,

but it's just making it white.

We have seen that if we add
three values here separated by commas

instead of just one, we get some color.

These are the Red value, the Green value and the Blue value.

Now we should be getting red line. Let's try it out.

Yes! But it's still not very colorful...

It would be good for vampires...
maybe... but we are not vampires :)

Let's add some random colors!
So we know that if we repeat this random(256)...

inside the parenthesis 3 times we will get completely random colors.

We can get anything: any shade of green, yellow, blue, purple, black or white.

But it's still moving very fast and with this
black background it's a bit hard to see.

Let's remove this black background that it's
being drawn all the time.

You can deactivate any line
if you add two forward slashes: //

so you convert this line into a comment
and the line does not run anymore.

So now that we are no longer erasing the screen
every time it should keep adding colorful lines.

So there you have the result.
It's adding lines with lots of different colors.

Let's take a look at the random() function.

Let's go to the reference. Here I press CTRL+F
and type "r a n d o m", then click.

Here's the random() function. There are two ways
of using it. We are using it this way.

We use random and type inside one number.
But it's possible to enter two numbers.

What happens in that case?

When you enter one number, you get a random number between 0 and the number you entered.

This means give me a number between 0 and 100.

This means give me a number between 0 and 256.

But if we add two numbers, we can have a bottom limit.
What does that mean?

Let's see. If I enter here "200, 256" this means "give me a random number between 200 and 256"

We know that 0 means black, or no light:
no red light, no green light, no blue light.

We are now forcing the program to give us numbers which are quite high; quite close to the top.

What happens now? So now the random colors are, all of them, quite close to white.

When we get 256 for all red, green and blue, we get white.

So these are random colors, and all of them are close to white.

If we do the opposite, if we enter here "100, 150",
what happens then?

You should try. You should different values here and
see what kind of results do you get.

Now you can see it looks quite gray. It's quite dark. You can still see some color,

but it's not very colorful.

You don't have to use always
the same values here three times.

For example, let's put more red than green or blue.

With this example we know we are going to get an amount of red which is between 200 and 256.

So it's near the maximum.
But we'll get only a little bit of green and some blue.

So in the result the overall color is close to red. Not pure red, but close to it.

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).

What now? We get something like yellow-green-orange. Why is this happening?

Well, when we get the maximum value for red and green,
the result is yellow.

Sometimes it happens that we get less red than green, so the result is more green-like.

You can try different combinations here
and see what you get.

You can get all kinds of different tones.

Now it looks more colorful and happier than before.
We mentioned that the screen is too small.

How can we make it larger? Let's go to the reference and search for size()

This is textSize... here it's size().
Maybe it's this one. Let's see what it is.

"Defines the dimensions of the display window
in units of pixels"

"The size() function must be the first line in setup()"

"If size() is not called" ... like right now, we don't have in our program any call to the size() function ...

What is happening then? ... "the default size of the window is 100x100 pixels"

That's what we got: 100x100

So let's see here in the example how they do it. Here's an example.

It says "void setup()" and inside
they call size() and then background()

So I'm going to add here at the beginning "void setup", then open and close parenthesis...

open and close curly braces, and in between I will call size().

Currently we have 100x100, so let's make it 200x200 to double the display size. Let's run this program.

Ok! Nice. Now you can see the screen is twice as large but we are only drawing on the top left corner.

Why is that? Let's look at our program.

Ok. One reason is that we are drawing lines from the top to pixel 99. Our screen used to be 100 pixels tall.

So this was enough to fill the screen, but now that it's 200 pixels tall, I should make this 199.

This way we will draw lines from the top to the bottom of the screen. Let's check it out.

That's right! Now lines go from top to bottom, but still only draw on the left half of the screen.

We are not drawing lines on the right half. This happens because here we say ...

"distance_left" is a random number between 0 and 100, but our screen is 200 pixels wide.

Now I tell him I want numbers between 0 and 200, and I run it again.

Finally we have a big screen full of colorful lines.