Contents
Next

Drawing with Balloon

The class BalloonCanvas implements a powerful drawing tool that provides these advanced features:

The clever use of geometric transformations is of predominant importance for the successful use of this drawing tool. An affinity to geometry is an advantage and a basic understanding of analytical geometry is certainly helpful.

Translation

The first example is very simple; it demonstrates the use of a translation to repeatedly draw a red rectangle:

  | bc |

bc := BalloonCanvas on: Display.
Display fillWhite: (0@0 extent: 300@300).

20 to: 260 by: 20 do:
  [:i |
     20 to: 200 by: 20 do: 
       [:j |
         bc transformBy: (MatrixTransform2x3 withOffset: i @ j)
            during:
               [:tool |
                 tool fillRectangle: (-10 @ -10 extent: 10 @ 10)
                      fillStyle: Color red.
               ]
  ]    ]

This piece of code paints this image into the top left corner of the display screen:

The first statement creates a Balloon drawing tool that draws on the display screen. The second statement draws a white background into the upper left corner of the screen. The remaining code of the example does all the drawing. Two nested loops are used to repeatedly draw a rectangle at different positions. The transformation 

MatrixTransform2x3 withOffset: i @ j

moves the coordinate system of the drawing tool to the point i@j. The message transformBy:during: is used to apply the transformation to the drawing tool. In the example, the variables bc and tool reference the same drawing tool. The message transformBy:during: temporarily installs the geometric transformation to be used. Class MatrixTransform2x3 implements the geometric transformations that are used with the drawing tool.

With a minor modification we obtain differently colored rectangles:

  | bc |

bc := BalloonCanvas on: Display.
Display fillWhite: (0@0 extent: 300@300).

20 to: 260 by: 20 do:
  [:i |
     20 to: 200 by: 20 do: 
       [:j |
         bc transformBy: (MatrixTransform2x3 withOffset: i @ j)
            during:
               [:tool |
                 tool fillRectangle: (-10 @ -10 extent: 10 @ 10)
                      fillStyle: (Color h: j + i s:0.8 v: 0.8).
               ]
  ]    ]

This gives a really colorful image:

Scaling

To scale the coordinates, one creates a geometric transformation with

MatrixTransform2x3 withScale: sx @ sy

In the following example, two transformations are applied to the drawing tool:

The application of two geometric transformations requires the use of the message composedWithLocal:. That message applies the receiver to the transformation that is given as its argument.

  | bc |

bc := BalloonCanvas on: Display.
Display fillWhite: (0@0 extent: 300@300).

20 to: 260 by: 40 do:
   [:i |
      20 to: 260 by: 40 do:
         [:j |  | f |
           f := 1 - (i - 20/350)@(1 - (j - 20/350)).
           bc transformBy: 
                ((MatrixTransform2x3 withOffset: i@j)
                   composedWithLocal: (MatrixTransform2x3 withScale: f))
              during:
               [:tool |
                 tool fillRectangle: (-10@-10 extent: 30 @ 30)
                      fillStyle: (Color h: j + i s:0.8 v: 0.8).
               ]
    ]    ]

The displayed image demonstrates the effect of different scaling factors for x and the y coordinates. Scale factors vary from 1.0 to 0.3143.

Rotation

To rotate the coordinates, one creates a geometric transformation with

MatrixTransform2x3 withAngle: angle

The angle is measured clockwise and expressed in degrees.

  | bc |

bc := BalloonCanvas on: Display.
Display fillWhite: (0@0 extent: 300@300).

20 to: 260 by: 30 do:
   [:i |
      20 to: 260 by: 30 do:
          [:j |
             bc transformBy: 
                     ((MatrixTransform2x3 withOffset: i@j)
                        composedWithLocal: (MatrixTransform2x3 withAngle: i-20/5)
                     )
                during:
                  [:tool |
                    tool drawRectangle: (-10@-10 extent: 20 @ 20)
                         color: Color red
                         borderWidth: 1
                         borderColor: Color black.
                  ]
   ]     ]

We obtain this image. The rotation angles vary from 0 degrees to 48 degrees.

In the next section we use a BalloonCanvas to draw into a view.

Contents
Next