Background
In the October '97 issue of "Bits and Bytes", I
wrote an article entitled "A
Tessellation Activity for Grade 6 Mathematics Using 'Paintbrush'
or 'Paint'". The steps outlined in this article provided
educators, who had access to "paint" programs, with the
necessary steps to create tessellations using the computer. True,
the activity does have a perfect match with the new Mathematics
curriculum at the Grade 6 level. However, I believe that many
junior and senior high Mathematics and Art teachers will find a
great deal of active learning taking place as students become
engaged in this type of Internet-related activity. For this
reason, I have written this complementary procedure to assist
teachers and students who wish to create tessellations using the
HyperStudio software.
Creating Tessellations Using HyperStudio
The steps to create this type of tessellation are based
on creating a square. One then selects a segment from one side of
the square and moves it straight across to the other side in both
the vertical and horizontal directions. In the October '97 issue,
after I drew a square with Paintbrush/Paint, I moved a segment
from the left to the right side and a second portion from the
bottom to the top to produce a "tropical fish". In this
HyperStudio demonstration, I will create a tessellation by
shifting a segment from the top to the bottom of the square and
then moving a segment from the left directly across to the right
side to form a "wolf head" creation.
The following steps will hopefully help one to gain some familiarity with the tessellation creation procedure using HyperStudio. Educators are strongly recommended to work through these steps to become proficient at them before introducing the technique to their students.
Start HyperStudio and click on the "New Stack" button. Since this tessellation may be submitted as part of the "Let's Get Connected" activity, it is important that it be designed with a consistent color palette and card size. Select the menu item "Objects/About this Stack". Make certain that the "Number of colors" used is 256 and that the "Card width" is 512 and that the "Card height" is 342 pixels. If either of these need changing, click on the "Change # of colors or size" button and adjust accordingly.
Step One
On Card 1 of the "Untitled" stack, drag the
"Tools" and "Color Palette" tear-off menus to
the side of the card. Next select your favourite color from the
color palette. In this case, I chose yellow. Use the
"Rectangle Tool" (with solid lines) to draw a square.
If the "Shift" key is held down as the
"rectangle" is drawn, a square will be outlined. In
HyperStudio the "Rectangle Tool" will only draw the
outline of a square with the color chosen, so one must also
choose the "Paint Can" tool (and the appropriate color)
to make the square a solid color as shown. It is VERY IMPORTANT
that the perimeter or boundary of the square be the exact same
color as the filled portion. If the square's perimeter differs in
any shade from the filled portion, click on "File/New
Stack" and start over. It is recommended that one save
his/her work frequently as one proceeds through this activity. If
the user saves the current stack (e.g. as step1.stk, step2.stk,
step3.stk ...) after each step, it will allow one to recover from
a mishap without the need to start from the very beginning. Now,
select "File/Save Stack As" and enter
"step1.stk" (without quotes) to save this first step.
Step Two
Using the lasso tool, start at the top left corner, wiggle down
through the square and exit back out the top edge near the top
right corner. Continue dragging the mouse around from the top
right corner to the left until you link up with the starting line
as shown in the left-hand image. Once the loop is complete and
the mouse button is released, the "cut" line will
become dotted indicating that the segment is "active".
The boundary of the segment will be illustrated by the
"marching ants" as they outline the active portion.
Place the cursor over top of this active area and depress the
mouse button to drag the active top side away from the initial
square as shown. The active element must be transferred straight
down to the bottom edge of the square as illustrated in the next
step. I find it easier if you enter or exit (or both) at a corner
as you can then use the corner as a guide when repositioning the
active segment directly below the portion cut out of the top. If
you release the mouse button prematurely you may use the
"Edit/Undo" menu items to back up a step or you may
need to use the "lasso tool" to select the segment
again to activate it for transfer once more..
Step Three
Reposition the "active" portion along the bottom side.
In reality one should move the top portion directly down without
any sideways movement. Using one corner as a reference point
helps to assure that the segment is positioned exactly. Once the
two edges tightly butt up against each other (without any overlap
as illustrated in the left image), release the mouse button to
re-position the cut segment as shown by the illustration on the
right. If there is any doubt during any of these steps, users are
encouraged to use the Edit/Undo command (Ctrl-Z) immediately and
try again. Save this creation as "step3.stk" (without
quotes).
Step Four
Repeat the process, using the lasso tool, but this time transfer
a segment from the left to the right or right to the left. To aid
in the repositioning of the side segment, one may wish to start
at a corner. In this case, I enter along the left side but exit
at the bottom left corner since the corner acts as a reference
point when repositioning the left segment on the right side of
the shape. While the segment is still active, drag the portion
directly across to the right side without any up or down motion.
Position it carefully (using the corner or any other reference
point) so that it butts up tight to the side of the original
image without any overlap.
Step
Five
Look at your "creation". What does it look like to you?
To me, the shape on the left could be the head of a wolf.
Remember to save your image as "step5.stk". Younger
students may be content to simply take this creation and make a
copy which they then color with a contrasting color using the
"Paint Can" tool. For example, if you are viewing this
on paper, one might be yellow and the other might be blue. Then
the two respective yellow and blue images could then be layered
using alternating colors to produce a simple mosaic or
tessellation. However, in this example, I will add some
contrasting "internal" colors to the yellow image to
give the wolf image some additional detail.
Step Six
Use the pencil, line or paint brush tool (with a
contrasting color selected) to decorate the figure. In this case
I have chosen red to add detail to the wolf's head. If you are
viewing this activity on paper, the images will appear as
differing shades of gray whereas the true colors will appear if
you are viewing this on-line. Do not add anything to the outer
edges of the silhouette. Save your image as "step6.stk"
(without quotes).
Step Seven
Use the lasso tool to draw a closed path around the wolf
head. When a dotted frame "shrink wraps" around the
image indicating it is now "active", click on the
"Edit/Copy" option. Next select the
"Edit/Paste" menu options to position a second copy of
the image directly over top of the initial one. Drag this
"active" image and position it to the right of the
original as shown. Save the image pair as "step7.stk"
(without quotes).
Step Eight
At this point, one must exchange colors between the two
wolf heads. HyperStudio has an option that makes the exchange of
the two colors quite easy. Begin by using the dotted
"Rectangular Selection Tool" to select the wolf on the
right in the twin pair above. While this right-hand wolf is
selected, click on the "Edit/Effects" menu items and
then select "Replace Colors". One needs to click on the
appropriate shade of yellow in the left palette and the
corresponding shade of red in the right palette and then click on
the radio button beside "Exchange colors". When one
clicks on the "OK" button the right-hand wolf should be
colored exactly opposite to the one on the left.
If you have difficulty selecting the appropriate shades for exchanging or the process doesn't appear to work, the following somewhat longer procedure will work fine. Ultimately the yellow wolf with red highlights (on the left) will be have a partner which will eventually become a red wolf with yellow highlights (on the right). Do not use the "Fill With Color" paint can tool to color the head red on the right wolf. If you do, the entire wolf head will take on a red color and you will not be able to distinguish any details. You must use an intermediary color (different from either of the two color choices of the original wolf on the left) for the head of the right wolf. Use the appropriate tool to paint the head of the wolf on the right with a different color (for example, light green) which will still provide a contrast between the original head (yellow) and the details (red). Once this is accomplished as shown above, one can now paint the details (e.g. eyes, nose, tongue, and ears) yellow on the right wolf. You may find the "Options/Magnify" menu options or the "Magnifying Glass" tool useful to assist you with the precision work.. Once the detailed portions are magnified, it is much easier to zoom in and "pour paint" into the magnified areas. Remember to utilize "Edit/Undo" (or Ctrl-Z) immediately after any painting mishap to allow one to correct any mistakes. Once all the details are painted yellow on the wolf on the right, it is a simple process to paint over the green head with the red paint as illustrated below.
Step Nine
Now there should be one lighter figure (a yellow wolf
with red details on the left) and one darker figure (a red wolf
with yellow details on the right) with opposite colors as
indicated. At this point, I recommend re-sizing the two basic
tessellation "building blocks" so that more of them may
be displayed in the final mosaic. Experience suggests that the
initial squares should be large enough so that you can easily add
details without too much difficulty. However if the initial
images are too large the intricacy of the tessellation is not as
apparent if only four images, for example, can be placed on the
HyperStudio card. For this reason, I recommend using the dotted
"Rectangular Selection Tool" to select both of the
complementary images. Once the image pair are selected, click on
"Edit/Effects/Scale and Rotate" options. Change the
"Scale factor" from 100% to 60% and click on the
"OK" button to see how much the size has been reduced.
If the size is not satisfactory, click on "Edit/Undo"
and repeat the process. Finally you may find it beneficial to use
the "Lasso Tool" to select the wolf on the right and
drag it further to the right. If the two wolf heads are
sufficiently separated, it is much easier to select each, in
turn, using the "Lasso Tool" without having to make the
precision selection necessitated by having the wolves in close
proximity to one another. Once the wolf heads are separated, save
the contrasting image pair as "step9.stk" (without
quotes). These two contrasting wolf heads are going to be the
basic building blocks for the tessellation that you will build by
copying and pasting each wolf in turn as outlined in the next
step.
Step Ten
The next step involves adding a second card to the
HyperStudio stack. Currently the title of the HyperStudio stack
should display "step9.stk - Card 1". Select
"Edit/New Card" to add "Card 2" to the
current stack. One can move between the two cards in this stack
by clicking on "Edit/Previous Card" or "Edit/Next
Card". Those that prefer shortcut keys can use
"Ctrl+<" or "Ctrl+>" to move in a
similar fashion. Our technique will be to arrange combinations of
the two wolf "building blocks" from Card 1 of the stack
and to COPY those components, in an alternating pattern, and
paste them on to Card 2 on which our tessellation will be created
.
Begin on Card 1 and use the "Lasso" to select the yellow wolf. Once it is active, make a COPY of this building block by clicking on the "Edit/Copy" menu items. This action (which can be accomplished with the "Ctrl+C" shortcut command combination) places a copy of the yellow wolf in the computer's memory buffer. It is important that you copy the yellow wolf to the computer buffer rather than simply move it, as you want to keep the original available so that you can make more copies from "building block" wolves off Card 1. Once the yellow wolf has been copied, move to Card 2 (on which the tessellation will be built) and click on "Edit/Paste" to position the yellow wolf on this card. The "Ctrl+V" shortcut command combination will paste the copy from the memory buffer on to this second card as well. While the yellow wolf is still active, drag it to an appropriate position near the edge of the card. Next return to Card 1 and use the "Lasso Tool" to select the red wolf. When the image is active, click on the "Edit/Copy" menu items, move to Card 2, and click on "Edit/Paste" to position the red wolf on the tessellation Card 2. While it is still active drag it beside the previously positioned yellow wolf and position it carefully. Make certain that it is positioned exactly where you want it because once you click off the image, the red wolf will be anchored in place. Hint: If the two images with alternating colors do not interlock exactly, review Steps 1 - 9 and try again. Continue with this procedure until you have created a complete row of alternating images.
One may continue in this fashion by alternating between the yellow and red wolves as they are copied from Card 1 and pasted strategically on card 2 to form an alternating mosaic or tessellation. Students will soon discover ways in which two alternating colored wolves can be copied and pasted so that two wolves become four and so on. Once a row has been created with alternating colored wolves, it can be copied and carefully pasted below the existing row, with a "one wolf offset" to ensure that the colors not only alternate horizontally but also vertically. However it will still be necessary for the user to select single wolf images from Card 1 when filling in around the perimeter of Card 2. Continue building up the tessellation on Card 2 until all white space is covered by alternating inter-connected images like the tessellation below and save the stack as "step10.stk" (without quotes).
Step Eleven
Time permitting, creators may wish to add the following options
to their tessellation:
To add text to the creation, double-click on the "T"ext tool from the tool box. One can now select the Text Style including the font, size and color. Click on the tessellation and begin typing in the information one wishes to include. If the information is too large or is a poor choice of color, it is important to back-space to remove inappropriate text styles. Once one clicks elsewhere, the text will be fixed on the tessellation and the only way to recover is to go to a previously saved version (such as "step10.stk") and re-enter the text. Once the descriptive information has been entered correctly, save the stack as "step11.stk" (without quotes).
Step Twelve
The finished tessellation, which is part of a two card
HyperStudio stack, needs to be transformed to a picture format so
that it can be sent as an e-mail attachment. To so this one must
move to the second card of the tessellation saved as
"step11.stk" (without quotes). One should see the
finished tessellation which fills the entire 512 pixel wide by
342 pixel high card. This second card must now be converted to a
bit-mapped (BMP) picture. To do this click on the File/Export
Screen menu items. Save your tessellation, using the standard
"8.3" rule in which the filename does not exceed eight
characters and the filename suffix (in this case BMP) contains
three characters. Use your school name (up to 5 characters) and a
three-digit number (which your teacher will assign in consecutive
order) to create a unique file name to save this picture. For
example, some possible filenames might be:
Save your tessellation, as a bitmapped file, and return to the "Teaching 'n' Techniques" page, by clicking on the link below to continue with the sharing process.
