Learn programming 3: Create an animation, use random()

A short review. What happens if we forget a semicolon at the end of the line? A little more detailed explanation of the display as a grid of pixels, with hundreds of rows and columns. We try out the function random() to make our program create a different image each time. Finally we try out the function draw() and background() to be able to animate lines and change the background color.

So let's recap what we have seen until now.

We now know two instructions. One is called 'point', the other is 'line'.

We know that after these instructions there's something inside parentheses...

A sequence of values separated by commas.

Sometimes, like in this case it's only two values...

'line' expects four.

And at the end of the line there should be a semi-colon to make the computer know that the line is finished.

Let's try to run it without it and see what happens.

You see here, syntax error. Maybe I'm missing a semi-colon.

Yeah, exactly. This is a bit hard to understand.

It's a very long error, but this missing semi-colon is simple. So we know, we add the semi-colon.

... and now it's working.

Then we have learned something about the display like this little display we have here.

Seems to have 100 pixels width and 100 pixels height.

I'm going to explain a little bit more about this display in this drawing.

Let's imagine this is our display. It's made of a lot of little pixels, like this one.

The reason why we are using these two number over here: (50, 50).

Is because each of the columns is numbered (0, 1, 2, 3, 4, ...)

Depending on how large your screen is you can have 1280 or maybe 1024.

If you're on a cellphone, cellphones have less resolution. Maybe it's 400.

The same for the row. We have here (0, 1, 2, 3, ...) up to wathever, ... it may be 768.

So to draw a pixel here you have to know which column and which row you're looking for.

In this case it would be (3,3). So that why you write these two numbers. Or (50, 50)...

... this way you can chose which pixel on the screen you want to illuminate, or change the color.

Ok, so now that we know these two instructions. 'point' and 'line' this is a bit boring at the moment ...

... because everytime we run program we get exactly the same drawing.

It would be nice if something was changing. Maybe you can add some randomness.

Instead of getting always the same line. Maybe everytime we run the program it can be a bit different.

So let's search on our reference. What is there about random?

If you press ctrl+f, on most browsers, you can search for something in the page...

... so we'll type here 'random'. Ok.

I see here just a few things about random. Looks like there's 5 functions that do something.

Maybe this last one, let's check it out 'random'.

Here's some examples. They probably look a little complicated at the moment.

Let's read the description. "Generates random numbers. Each time the random() functions is called...

... it returns an unexpected value within the specified range. If one parameter is passed to the function...'

it will return a float... What's a 'float'? We don't know that yet...

But let's see how it's used here. 'random(high)' or 'random(low, high)'.

Here it says you can use 'random(5)' and it will return a number between 0 and 5.

That sounds fun.

So instead of drawing the same thing all the time.

We could draw some random lines. We can replace all these numbers...

... by some random values.

Let's start replacing these last two '99' for example.

So we'll draw a line from (0,0) which is the first pixel on the screen to ...

... somewhere randomly on the screen.

You have to be careful with these parentheses.

When you put the cursor here it illuminates the other correspoding parentheses.

That's because every parentheses you have opened must be closed.

So this is 'random(100)' and this is again 'random(100)' and back here you close the parenthesis from the beggining.

You can add some spaces if you want so it's more clear.

This is drawing a line from (0,0) to a random point somewhere on the screen.

Let's run this thing and see what happens.

So now it starts here at (0,0) and ends on this point.

What if run it again? It's very different.

Everytime I run the program it's drawing a line that starts from the corner and ends somewhere on the screen.

Let's replace the first two numbers with two random ones.

Now we'll draw a line from some random horizontal and vertical position on the screen and to a random destination x and y.

Oh that's a funny coincidence, it's totally vertical!

So everytime I run the program it's going to be drawing some random line.

One nice thing about Processing is that you can make animations and it's very easy.

I'm going to delete all these points here. Just leave the line.

I have to remember how to do this... it's 'void draw()'.

Let's see if it works and then I explain what it does.

Wow! That's a lot of lines!

It's becoming all black.

What is it doing?

This is one nice thing in Processing. Of course, in other languages, you can do graphics and draw...

... but usually it's much more complicated than this.

Here with just two lines of code we're making this animation.

'draw()' is a special function, that's already defined. It allows you to run something continuously.

What does it mean?

You know movies have frames. They have many frames per second so...

... when you show many images per second you get the illusion of movement, animation.

Well, that's what draw is doing here.

You just have to know that anything you put inside this 'void draw() { }'.

All the lines of code that are in between will be run many times per second.

That's why it's drawing random lines many times per second. So when you run it...

Because we're not erasing anything it's becoming slowly all black.

It would be nice if we would erase the last line. Then it would look as if the line's moving.

This will be the last instruction I explain on this video.

It's called 'background'.

Let's go to the manual and check it out. Using 'ctrl+f', searching for 'background'.

Here's some examples. Looks like 'background(51)' makes this grey background.

If we use these numbers it makes a yellow one....

... looks like we can even use and image as background.

The 'background' function sets the color used for the backround of the Processing window.

The default background is light grey. We noticed that.

If we run it again you can see... oh what did I break?

Sorry I had this 'backround()' which is not finished.

Ok I run this. You can see the backround is light grey.

What else does it say?

In the 'draw' function the backround color is used to clear the display at the beginning of each frame.

That's exactly what we want to do right now.

I like this yellow here so I'm going to copy this line.

I'll paste this here...

So what will happen now?

Many times per second, this function is going to be called. The first thing it will do is make the whole screen yellow.

Then it will draw a random line. Let's check it out.

I don't know if you can see, but in my computer it's going super fast.

Drawing all these crazy lines. Jumping up and down.

I think that's enough for today. You can already do some experiments.

You can try replacing this line by maybe some random dots.

You can also try changing these background values to see what happens. Try getting different colors.

If you check the reference you can see sometimes it's using one number, sometimes it's using 3 numbers.

Or even images. So you can experiment.

One thing I hope to show you is that it's good to experiment.

To search on the manual, to search on the internet and go changing things.

Usually you can't break anything too big playing here in Processing.

Either it will work or it will complain with some error.

Then you just have to find the bug and fix it.