Learn programming 4: Shades of gray and colors, frameRate()

When you write a program, you can save it on your hard disk. You can open the saved program later and continue working on it. Discover gray scale shades and RGB colors, then animate the background color and change the frame rate.

First thing we're going to do today is...

How to save and open our programs

This is something we didn't do yesterday because we were doing very small programs.

This works like in any other application there's a 'Save' and 'Save as' option.

There's an 'Open' option. So if we write a program here ...

... then we can just go ahead and 'Save as'. First thing chose a folder, then type a name and save it.

The next thing is just coming back and opening the program.

So all the little programs we do are not lost. We can come back and make some changes and try them out again.

Now that we now how to save and open programs let's go back to the function we were giving a look yesterday...

... 'background'.

Let's check it again on the reference.

I can show you were I found it. Right here at the top.

We saw that there's two options or more. Type one number inside parentheses or three numbers

Later I'll explain how to load images, but let's try just the colors first.

We can try typing a few numbers here inside the parentheses to see which effect it has.

With a 0 we get a black color.

Let's try 100.

We get some dark grey.

With 200 we get a light grey.

And I know the maximum is 255. Then we get white.

So we see that just having one number here we'll get different shades of grey.

How do I know that 255 is the maximum?

Well that's a very usual number in computers. Something being valid between 0 and 255.

That means there are 256 possible values.

If we check on the reference, not on the 'background' page, but maybe 'colorMode' or 'stroke'.

It will mention this 255 value.

This is the page for 'stroke'. It's used to change the color for the border, we'll see that later.

I just wanted to show you that it says here, the default color space is RGB.

With each value in the range 0...255

So there's 256 possible values.

If one number gets us different shades of grey then I guess if I type the other option with 3 values...

... I should be able to get colors.

So I run the program and I get the same! It's the same if I type 255 or if I type 255 three times.

I'll explain why in a second.

This will happen anytime we type the same value three times. We'll get a shade of grey.

Actually what these values are is what is called RGB, which means: red, green and blue.

When we have the same amount of red, green and blue we get a shade of grey.

So the way to get colors is to have different values. To have them different.

We'll try (200, 100, 50) to see what we get. We get this brown, orange?

One way to see that this is really RGB is... let's enter (255, 0, 0).

That should mean we're only having red light and the green light and blue light are gone.

We only have the red component here.

If I run this program I get red.

The same will happen if instead of red I try it on green.

It works, so you can try that for blue.

What happens if you combine red and green? So let's use the maximum amount of red and green.

Then we get yellow. There's two or at least two ways of generating color.

This is additive light, so it's the amount of red, blue and green light.

If you have (0,0,0) that means you don't have any light at all and that's why it's black.

And if you have the maximum 255 three times. Then you have the maximum amount of each light so you get white.

The other way of generating color is subtractive. This is how printers work.

Instead of (red, green, blue) it uses (cyan, magenta, yellow and black).

In this case you start with white, which is the white paper, and the more ink you add the darker it becomes.

You could say that with computer screens you start with black and you add light.

The more light you add the brighter the color. Until you get white eventually.

That's the difference between additive and subtractive color.

So now we know that we can generate colors adding red, green and blue components to change the background.

Like yesterday, we could replace these numbers for a random value.

Where we have a 0 let's write a 'random(256)',

Let's replace each 0 with our 'random(256)'. Which is a function that converts itself into a number between 0 and 255.

Now we're gonna get unexpected colors.

Everytime we run the program it will make up a random amount of red, green and blue.

See that's some kind of blue. Run it again it's like purple. Dark pink...

Ok. This is just running once. We can do it like yesterday and draw it many times per second.

For that we wrote 'void draw() { }'. Everything that is between the '{' and '}' is executed multiple times per second.

I'm going to click run and this is gonna go really fast. Too fast to actually notice the colors.

So there must be a way to make it slower.

Let's check on the reference manual. I don't know how it could be called but I'll hit 'ctrl+f' ...

Search for 'frame'. Maybe there's something like frames per second? Here there's a 'frameRate'.

That sounds right. "frameRate: Specifies the number of frames to be displayed every second."

So that's what we want, to make this smaller.

Here says the default rate is 60 frames per second. That's quite fast, let's make it slower.

Here it says it's recommended to set the frame rate within 'setup()'.

What is this 'setup()'?

You can see we have this 'void draw()' function. We're using it already.

In this example all this code will run multiple times per second.

And we can add this, we'll check the manual in a minute.

Put this outside. Now we have two functions: we have 'void draw()' with a group sentences...

... in this case only the one that says "change the background color".

Now we have here another function that says 'setup' and 'frameRate(4)'.

Let's make it even slower. Just 1. One frame per second and then run this program.

Now the background is changing one time per second.

Finally let's check on the manual what is this setup.

I go back here and I search for 'setup'.

Here it says: "Called once when the program is started. Use to define initial environment properties such as...

screen size, background color, loading images, etc... before the draw begins executing."

So these two functions are used in many Processing programs.

First you configure some things so in the setup you define some characteristics for your movie.

Like in this case how many frames per second it displays and later...

... you have another function that is executed this many times per second. In this case just one.

You can also check the reference page for 'draw'.

Which will say: "Called directly after setup and continuously executes the lines of code contained inside it's block..."

"...until the program is stopped or 'noLoop' is called."

Usually we'll not understand every detail on the manual until we have more experience and know more functions.

Like here it says 'mousePress'. We don't know anything about the mouse yet ... but we'll find out.