Page 45
5: Shaping Up
This lesson will cover
Creating simple graphics in BYOB
Creating more flexible procedures
Introduction
In this lesson, you will write programs to create simple computer graphics using BYOB’s
Pen blocks. You will also learn more about using procedures, as well as making them more flexible.
Task 1: Shaping up
Watch screencast ShapeUp to learn how to create shapes using BYOB’s Pen commands.
Pause the screencast when it tells you to and create the procedures (blocks) as shown.
Write down below procedures to create a heptagon (7 sides) and triangle:
Square Pentagon Hexagon Heptagon Triangle
Now create procedures for each of the shapes above.
Did your procedures work? _________________________________________________ If not, why not? __________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Page 46
Task 2: Circular pattern
Make a procedure called DrawPattern that draws 36 squares arranged in a circle. An algorithm is shown below:
DrawPattern
repeat 36 times
draw a square ... use a procedure here turn 10 degrees
Try changing the shape to triangles, pentagons, hexagons, etc. using your procedures from Task 1.
Task 3: Big ones, small ones
Continue screencast ShapeUp to learn how to create procedures that can be used to create shapes of different sizes.
Pause the screencast when it tells you to and create the procedures (blocks) as shown.
Parameters: More Flexible Procedures
We can make procedures more flexible by using parameters – variables that the procedure can use to perform a wider range of tasks.
In the example above, instead of having different procedures to draw squares of different sizes, we made one “general purpose” square procedure that could be used to draw a square of any size. To do this, it needed a parameter (variable) to tell it the length of a side. When we used (called) the procedure, we could set this to any value. This is another example of computing scientists using shortcuts to make life easier. Q: Does this make them lazy or smart? (Hint: the answer is smart!)
Itching for More 5: Shaping Up
Page 47
The Rule of Turn
Did you spot the pattern here?
In every shape, we turned a full circle (360°). To work out how many degrees we need to make at each turn, simply…
Divide the total number of degrees turned in the shape by the number of turns taken
So… in a square, we go round 360° in 4 turns, so 360/4 = 90° per turn; in a pentagon, we go round 360° in 5 turns, so 360/5 = 72° per turn
Task 4: All shapes and sizes
Now finish screencast ShapeUp to see how to create a procedure that can be used to create any polygon of any size.
Now create the procedure (block) as shown.
Task 5: Pattern revisited
Change your DrawPattern procedure so that it can draw 36 of any shape arranged in a circle. Use the procedure shown in Task 4 above to draw the shape of your choice. An algorithm is shown below:
DrawPattern
repeat 36 times
DrawShape (sides) (turns) ... use a procedure with parameters here turn 10 degrees
Try changing the shape to triangles, pentagons, hexagons, etc. by changing the parameters (sides and turns) given to the DrawShape procedure.
Page 48
Extension 1: General collection
Go back to your Haunted House game and create a procedure for collecting bonus items. Importantly, this procedure should use a parameter that permits different bonus values for different objects.
The algorithm for the procedure might look like this:
CollectBonus (bonusValue) ... [bonus value] is a parameter if touching explorer sprite
hide
change score by (bonusValue) wait random 1-10 secs
show
Extension 2: Any which way you can
Create procedure in your Haunted House game that can be used to move the explorer, with the direction a parameter. The algorithm for the procedure might look like this:
MoveExplorer (direction) ... [bonus value] is a parameter point in direction (direction)
move 5 steps
This may not reduce the amount of code by very much, but it does have one important benefit. What is it?
_______________________________________________________________________ _______________________________________________________________________
Extension 3: One jump to catch them all
Go back to your Hungry Frog game and look at the JumpLow and JumpHigh procedures. The code is almost identical, except for the height of the jump and the energy used. Alter your program so that it uses a single procedure that can jump any height and lose any energy.
Itching for More 5: Shaping Up
Page 49
Extension 4: Final pattern
Change your DrawPattern procedure so that it can draw a variable number of shapes arranged in a circle. An algorithm is shown below:
DrawPattern (numberOfShapes)
repeat (number of shapes) times
DrawShape (sides) (turns) ... use a procedure with parameters here
turn ??? degrees ... this can be calculated. Can you work out how?
Experiment with using different parameters to change
the number of shapes
Page 50
Did you understand?
5.1 A programmer has created a game called Vegetable Samurai to encourage healthy eating in children. In the game, the Samurai character has to slice flying
vegetables with his trusty sword before cooking them.
The programmer has created three scripts for when various vegetables are sliced (left). How could the programmer made the code more efficient using procedures and
parameters?
Write new procedure and new “Slice broccoli” scripts below.
a) New procedure script (inc. name) b) New broccoli script
____________________________ ___________________________ ____________________________ ___________________________ ____________________________ ___________________________ ____________________________ ___________________________ ____________________________ ___________________________ ____________________________ ___________________________ ____________________________ ___________________________ Potato script Carrot script Broccoli script
Itching for More Project
Page 51
Project
Working in a pair or group, you are now going to create a BYOB project of your own! You may have some ideas already, but programs are normally created in a series of stages: 1. Analyse 2. Design 3. Implement 4. Test 5. Document 6. Evaluate 7. Maintain
Or… ADance In The Dark Every Midnight!
Page 52
Analyse
Working in pairs or small groups, brainstorm three ideas for your project. Think of how it might link in with other subject areas you’re studying.
Think of the areas you’ve covered so far...
Is it going to be music or graphics-based? A story? A game?
The Scratch gallery at http://scratch.mit.edu might give you some ideas. Remember, BYOB can open Scratch projects that you have downloaded.
1. __________________________________________________________________ __________________________________________________________________ 2. __________________________________________________________________ __________________________________________________________________ 3. __________________________________________________________________ __________________________________________________________________
Now discuss your ideas with your teacher.
Once you have agreed on your project, describe what it will do below.
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Itching for More Project
Page 53
Design (Screen)
Make a storyboard of your project.
Page 54
Design (Code)
Design the steps for your code (algorithm):
Think about blocks/procedures you will want to create. This is easiest done by thinking about your program in big chunks, then breaking each one down.
Remember to write the design in English.
Think about variables your project will use.
Stage Algorithm(s)
Itching for More Project
Page 55
Sprite Algorithm(s)
Page 56
Sprite Algorithm(s)
Itching for More Project
Page 57
Think about variables your project will use.
Variable name What it will store
Implement
Now create your project!
Gather the sprites, costumes, sounds and backgrounds
Remember to give them sensible names.
Then create the scripts
Page 58
Test
Test your project to make sure it works.
Let your classmates test it too and note their comments below:
Good points: _____________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ Bad points: ______________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Describe bugs that were found (by you or by testers) and how you fixed them:
Bug: ___________________________________________________________________ Solution: ________________________________________________________________ _______________________________________________________________________ Bug: ___________________________________________________________________ Solution: ________________________________________________________________ _______________________________________________________________________
Itching for More Project
Page 59
Document
Let’s imagine that you’re going to post your project on a website to share with others. Write down below a brief description (50 words max.) of:
your project’s main features and
how to use them.
Remember – you want to get people to try out your project!
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Once you have written the description, enter it into your project’s notes (File→Project notes…).
Page 60
Evaluate
How did the project turn out compared to how you originally planned it?
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
What mistakes did you make on the way?
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
If you were to start again from the beginning, what would you do differently?
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Look at your code again.
Is there anywhere you could have taken a shortcut to make it “slicker” (for example, by using procedures and parameters)?
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Itching for More Project
Page 61
Maintain
What additional features would make your project better?
_______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________
Congratulations!
You have now completed this intermediate course in Computing Science!
Remember that you can download and use BYOB at home, so there’s no need for this to be the end of your time as a programmer.
http://byob.berkeley.edu
An Ancient Programmer’s Proverb
One last thing: never forget the ancient programmer’s proverb… “Hours of coding can save minutes of design” Think about it! ;-)