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

Patterns Part 8

Making it a little more friendly

Programs must be easily understood by the user.  We have not labelled the controls of our controls window.

Slide a label field to it:

Resize the field to a small square.  With the inspector, call that field "LabelR", select the contents mode in the inspector, change the content to the single letter "R".  Then select the textformatting tab:

and set the text size to 14 and the style to bold.

Do the same for the sliders of the green and blue colours:  the easiest way is to copy the label field and then paste it twice.  That way you do not need to set the textsize etc. again, you only have to change the contents from "R" to "G" and "B" (and change the names too!).  Do another one for the square size slider.  You get:

Now at least we can see what we're doing!

Of course, you need to move the sliders and fields around a little and align them and resize them, but we know how to do all that.  In fact, when you select multiple objects with the programming arrow, the inspector automatically changes to:

and you can now do some alignments.  Note also that you can nudge the selected objects pixel by pixel with the arrow keys on the keyboard.

Generating objects

First we need a button to do the generating when we click it.  Place a button "Go!" on the controls window:

(from now on I'm not going to explain how to drag buttons and other objects onto your windows and how to name them.  You are clever enough to have learned how the inspector works.  Only when something new crops up will I show explicit instructions.)

Making the Go! button do things

Difficult decision:  where do we put the program code that generates the patterns?  In the button?

Not a good choice:  it's the Patterns stack that should know how to draw the pattern on its window.

Therefore, in the script of the button "Go!" we put:

on MouseUp

send "DrawPattern" to stack "Patterns"

end MouseUp

And then we select the Patterns window and in its script we put:

on MouseUp

send "DrawPattern" to stack "Patterns"

end MouseUp


on DrawPattern

repeat with i=1 to 10

put "C"&i into lName

create graphic lName

put random(4) into lShapeChoice

switch lShapeChoice

case 1

set the style of graphic lName to "rectangle"


case 2

set the style of graphic lName to "roundrect"


case 3

set the style of graphic lName to "oval"


case 4

set the style of graphic lName to "line"


end switch

end repeat

end DrawPattern



What are we doing?

First, place the cursor somewhere in the middle of the code and press the tab key.  That neatly reformats the code.

Then look at the code:

Notice two boxes:  the first is the repeat statement, which starts at the top and ends at the bottom.  Inside it are 4 other program statements:

  1. put
  2. create
  3. put
  4. switch

The switch statement itself is rather big, which is why I put another red box around it.

The repeat

The repeat will do someting 10 times:  first with the variable i equal to 1, then 2, then 3 and so on up to 10.

The things it will repeat are the four statements inside it:  put, create, put, switch.

The first put

The first put says put "C"&i into lName.  That means:  take the character "C", then write the value of the variable i after it and put the result into the variable lName.

When i is 1, the result is C1, when i is 2 the result is C2, and so on up to C10.  Those are strings of characters and they are successively put into lName.

The create

The line create graphic lName will make a new object, a graphic object, and give it the name that is found in the variable lName.  As we saw before, the first time round the repeat loop i will be 1, lName will get the characters C1 and so we will create an object with the name C1.

The second put

We want to make a random choice of the shape of the graphic.  There are many possibilities, but the easiest for now are rectangle, line, oval and rounded rectangle.  As before, we want to be surprised, so we choose the shape at random from these 4 shapes.  That is exactly what the line put random(4) into lShapeChoice does:  it picks a number at random between 1 and 4 and puts it into a variable lShapeChoice.  The variable lShapeChoice is something we invent, it has nothing to do with Revolution.

The switch

Now we will set the shape according to what we picked at random:

The switch has 4 cases:  one for each of the possible values of what's inside lShapeChoice.  I think you are clever enough to figure out what each case does.

Each case ends with the word break.  That's very necessary, because once we have set the shape to "oval" for example, we do not want to go on and set it to line.  The break tells Revolution to get out of the switch statement instead of just continuing.

If you forget the breaks you will be in trouble!  (note:  the break should be there by default, but unfortunately we have to write each one.  This is a possible future improvement of the Revolution language.)


Now let's see what it does.  But be careful…  Go to run mode and press the Go! button once.  You should get:

Not pretty and not any good.  But important for our understanding:  look in the Application Browser, select the card of the Patterns stack.  You see:

There are our ten objects, neatly named C1 to C10 exactly as we programmed.

We also see them on the Patterns window, they are all on top of each other and some are oval, some rectangles and some rounded rectangles (it may be that by accident you did not get all shapes, that would depend on how the random function worked).

To remove the ten graphic objects, go to programming mode and drag around them:

they get selected (they are exactly on top of each other!) then press delete to remove them all.

In the next page we're going to make this a lot better.

(next part)