go to Part:   previous   next   1   2   3   4   5   6   7   8   9   10   11 

Patterns Part 3

Randomness

Gemma Pye wrote:

... the only thing I have noticed is when I change it it doesn't seem to spread around the stack

That's entirely correct!  The rectangles remain in the top corner somehow.

Let's get our brains into gear: the program says:

drag from random(100),random(100) to random(100),random(100)

Since random(100) produces a number between 1 and 100, all points are going to be no further away from the top left corner than at most 100 pixels.  Let's see why:

A point

A point in Revolution is two numbers, taken from the top-left corner of the window, and the numbers are the number of pixels,  This is the point 150,110 :

The first number tells you how far the point is from the left side of the window, the second number tells you how far it is down from the top.

Our program says to drag from random(100),random(100) and that means the starting point is at most 100 pixels to the left and at most 100 pixels down.  The same holds for the ending point.

All rectangles will be within the dotted line:

So it does not matter that you make the window bigger or smaller.  And that explains what you observed:  it just remains in that top left corner but apart from that yep… its all good.

Enlarging the range

I actually did the bit of the upper left corner on purpose.  (I'm really devious)

So I'm glad you noticed it.  We want a wider range.  But first an important remark:

Rule of good programming:
Don't write numbers in your programs, use definitions.

What a good programmer should have written was:

constant cMaximumSpread = 100

 

on MouseUp

if there is an image 1 then delete image 1

choose rectangle tool

drag from random(cMaximumSpread),random(cMaximumSpread) to random(cMaximumSpread),random(cMaximumSpread)

choose browse tool

end MouseUp

In this better version we define a constant, with the name cMaximumSpread, and value 100.
Then we use the name cMaximumSpread all throughout the program.

Now it's easy to change cMaximumSpread from 100 pixels to, say, 300:

constant cMaximumSpread = 300

 

on MouseUp

if there is an image 1 then delete image 1

choose rectangle tool

drag from random(cMaximumSpread),random(cMaximumSpread) to random(cMaximumSpread),random(cMaximumSpread)

choose browse tool

end MouseUp

There is only one place where we change the number, and we don't need to worry that we have overlooked one.
Try it, you will now see it goes over a much wider range.

Still no good

But I still do not like it:  we would like the rectangles to go all over the window, not just a square.

One thing we could do is measure the window size, by looking in the inspector:

And there we see:

And then we could type those numbers into our program by changing the drag line:

drag from random(472),random(403) to random(472),random(403)

That actually works (try it) but is it good?  No, because we have to do a lot of tedious typing each time we change the size of the window.

Using properties

It would be good if we could somehow get the width and height of the window by program and use those numbers.  And of course we can:  the stack has properties called its width and its height.  We can get at them:

 

on MouseUp

if there is an image 1 then delete image 1

put the width of this stack into lW; put the height of this stack into lH

choose rectangle tool

drag from random(lW),random(lH) to random(lW),random(lH)

choose browse tool

end MouseUp

We first get the width and height of the stack (i.e. the window) and put them into "containers" that we call lW and lH.  We could call them anything we like, but W for width and H for height seem OK.  I put a lower-case letter "l" in front of the W and H to remind me that they are local containers.  More about that much later.  It's not an obligation, you can use whatever you like as names (but of course not such names as "if" or "then", those are part of the programming language).

If you change the program to in this way, and then you change the size of the stack's window, you will see that the rectangles spread over the entire window, whatever size you make it.
That's very good, because now we no longer have any numbers written in our program!

Colour

In Revolution colours are three numbers.  These numbers give the amount of red, green and blue.  You already know that from PhotoShop I think, if not, read on!

Revolution is limited to 256 shades of each colour, but that is quite enough as it gives us

256 x 256 x 256 = 16'777'216

different shades, "millions" of colours!

Let's see what these numbers do:

Red is 255,0,0 (red at full intensity, no green, no blue). Here is red:      

Yellow is 255,255,0 (no blue). Here is yellow:      

Magenta is 255,0,255 (no green). Here is magenta:      

NOTE: 256 shades go from 0 (dark) to 255 (full intensity), not from 1 to 256 !

What is a colour that has the three numbers the same?  They are grey:

Grey 0,0,0 :        is black

Grey 50,50,50 :      

Grey 100,100,100 :      

Grey 150,150,150 :      

Grey 200,200,200 :      

Grey 255,255,255 :        is white.

Let's pick a random colour:  that would be something like:

random(255),random(255),random(255)

Does that work?

No, because random(255) will give us a number between 1 and 255, but never 0.

OK, I know, 1,1,1 is pretty close to black:        .

But we are here to learn about programming.  We are proud to do it right.

Does it matter to do it right?  Suppose that every time you send an SMS the telephone company charged you 1€ (or 1£ or 1$).  You would be upset.  You would not accept it if they told you:  "Ah, but you see, we could not work out how to do zero."

Here is the solution to get a number between 0 and 255:

random(256) - 1

That's making first a number between 1 and 256, and then we subtract one from it.  So when random picks 1, we subtract 1 from it and get 0.  When it picks 2 we get 1, and so on.  When it picks 256 we get 255.

Our result is exactly what we need:  a number between 0 and 255.

There we go:

 

on MouseUp

if there is an image 1 then delete image 1

put the width of this stack into lW; put the height of this stack into lH

choose rectangle tool

set the pencolor to (random(256)-1),random((256)-1),random((256)-1)

drag from random(lW),random(lH) to random(lW),random(lH)

choose browse tool

end MouseUp

And you can add:

set the linesize to random(10)

but I'll let you figure out where to put that line of code and what it would do.

Final colour rectangles program

To end this session, let's write this last thing:

on MouseDown

if there is an image 1 then delete image 1

put the width of this stack into lW; put the height of this stack into lH

choose rectangle tool

repeat while the mouse is down

set the linesize to random(10)

set the pencolor to (random(256)-1),random((256)-1),random((256)-1)

drag from random(lW),random(lH) to random(lW),random(lH)

end repeat

choose browse tool

end MouseDown

NOTE that we changed the handler from dealing with the mouse UP event to dealing with the mouse DOWN event.

As you are clever, I bet that you "cheat" by copying and pasting the programs from the web page I write, but that's OK!  As long as you understand what is going on, you can copy and paste.

We have written very little code:  only 11 lines!

By the way, if you put the insertion point somewhere in the script text and press the tab key (above caps lock) then Revolution will nicely reformat the text with the proper indentations:

Before hitting the tab key:

After hitting tab:

You can then see the different structures better.  We'll talk more about that later.

SAVE the stack before doing the next thing.

Hold the mouse down on the button for a while (but not too long!!)

I got this:

I know you will not resist holding down the button for a very long time anyway.  Do it, but what happens then?

(next part)