Patterns Help

Introduction

A pattern consists of a combination of one or more pictures each of which is defined and drawn separately. A picture consists of segments which can be freehand scribbles, lines, rectangles, ovals, polygons, or curves. Certain segments consist of one or more lines. Such segments have a line width. Other segments may be filled. All segments have a color.

Picture segments are drawn on a canvas using a mouse or by specifying the x and y coordinates that define them. Segments may be deleted one by one or the entire canvas may be cleared.

The characteristics of picture segments are specified by controls. These controls are arranged on control cards.

Patterns are constructed by first saving one or more pictures in an array of canvases called thumbnails. These pictures are then combined and modified in the thumbnail array using controls arranged on a control card.

Patterns may be written to or read from a file on the server.

Tutorial

Display.gif

This brief tutorial demonstrates the pattern construction process by listing commands which will generate the pattern shown above. You may find it convenient to print the tutorial text prior to working the tutorial.

  1. Click the Make button.
  2. Select Line mode and set Line Size to 1.
  3. Make sure that the Ruler Depth is set to 6 and that Grid Snap is checked.
  4. Click the Palette button and select color red.
  5. Position the mouse pointer at the top left corner of the canvas.
  6. Press down the mouse button and drag the pointer to the bottom right corner of the canvas and release the mouse button. A red diagonal line should be drawn.
  7. Click the Thumbnail button, the save button and the first thumbnail position. The red diagonal line should be drawn on the first thumbnail canvas.
  8. Make sure that the Ratio is set to 0.5, the Push Ratio is set to 0.4 and the Push No is set to 3.
  9. Select Rotate 90 and click the Modify button.
  10. Click thumbnail 1 and then click thumbnail 2. The rotated line should be drawn in thumbnail 2.
  11. Select Beside and click the Combine button.
  12. Click thumbnail 1, thumbnail 2 and thumbnail 3. The combined pair of lines should be drawn in thumbnail 3.
  13. Select Rotate 180 and click the Modify button.
  14. Click thumbnail 3 and thumbnail 4. The rotated picture should be drawn in thumbnail 4.
  15. Select Above and click the Combine button.
  16. Click thumbnail 4, thumbnail 3 and thumbnail 5. A diamond should be drawn in thumbnail 5.
  17. Select Edge Limit and click the Combine button.
  18. Click thumbnail 5 and thumbnail 6. A pattern should be drawn in thumbnail 6.
  19. Select Beside and click the Combine button.
  20. Click thumbnail 6, thumbnail 6 and thumbnail 7. The combined picture should be drawn in thumbnail 7.
  21. Select Above and click the Combine button.
  22. Click thumbnail 7, thumbnail 7 and thumbnail 8. The combined picture should be drawn in thumbnail 8.
  23. Click the Make button and the Clear Button.
  24. Select the Filled Rectangle mode.
  25. Click the Palette button and select color pink.
  26. Position the mouse pointer at the top left corner of the canvas.
  27. Press down the mouse button and drag the pointer to the bottom right corner of the canvas and release the mouse button. The canvas should be filled with pink.
  28. Click the Thumbnail button, the save button and thumbnail 9. Thumbnail 9 should now be filled with pink.
  29. Select Together and click the Combine button.
  30. Click thumbnail 9, thumbnail 8 and thumbnail 10. The desired pattern should be drawn in thumbnail 10.
  31. Finally click the Display button and thumbnail 10 to view the finished pattern.
To view a collection of patterns generated by the program, click the Read button repeatedly when the display canvas is displayed or click the Read button and a thumbnail repeatedly if the thumbnails are displayed.

Canvases

Three different canvases are used. The first, shown below, is used for drawing pictures. It contains rulers to allow accurate positioning of the mouse pointer.

Make.gif

The second, shown below, is used to construct patterns from pictures and consists of 25 small thumbnails.

Thumbnails.gif

The third canvas is used to display finished patterns. An example is shown in the tutorial section above.

Buttons

Buttons1.gif

The five buttons shown above, when clicked, clear the canvas, delete (undo) the last picture segment drawn, read a pattern, write a pattern or display this help file.

The Read button cycles through the set of patterns that have been written.

The Clear button operates on the make canvas or thumbnails but not on the display. The Undo button operates on the make canvas only.

The Read and Write buttons operate on either the the thumbnails or the display but not on the make canvas. When using the thumbnails, click on the desired thumbnail canvas after clicking on the Read or Write button.

Buttons2.gif

The three buttons shown above, when clicked, determine which control card and canvas are displayed.

Make

Card1.gif

The make control card, shown above, is used to select the picture segment type (drawing mode) and the line size for those picture segments that consist of one or more lines.

Drawing Mode

The following drawing modes may be selected by choosing an item from the choice component at the top of the make card.
  1. Freehand
  2. Line
  3. Rectangle
  4. Oval
  5. Polygon
  6. Curve
  7. Filled Rectangle
  8. Filled Oval
  9. Filled Polygon
  10. Filled Curve
These drawing modes and how to use them are described in separate sections below.

Line Size

The button marked ">" increments the line size by 1, while the button marked "<" decrements the line size by 1. A line size value may be entered directly into the text input component by first selecting it by clicking on it and then typing the desired value followed by "Enter". Line size values are restricted to those between 1 and 100.

Ruler

The make canvas is surrounded by a set of rulers which allow accurate positioning of the mouse pointer. Two controls on the make control card are used to set options for the rulers. The first determines the depth of the marks on the ruler and the second, when checked, causes the mouse pointer to snap to the nearest mark on the ruler.

The ruler depth may be changed by first selecting the text input component by clicking on it and then typing the desired value followed by "Enter". Grid snapping may be toggled on or off by clicking the checkbox.

It is usually preferable to set grid snapping in all modes except freehand mode.

Palette

Card2.gif

The palette control card, shown above, is used to select a color for a picture segment. Twenty colors are available for selection. These twenty colors are displayed at the bottom of the palette card. A color is selected by clicking on it. The selected color is distinguished by a black rectangle surrounding it.

A custom color may be generated by choosing its' red, green and blue components using the appropriate controls at the top of the palette card. The buttons marked ">>" increment the color values by 25, while the buttons marked ">" increment the values by 1. Similar buttons marked "<<" and "<" decrement the color values. A value may be entered directly into a text input component by first selecting it by clicking on it and then typing the desired value followed by "Enter". Color values are restricted to those between 0 and 255. The generated custom color is displayed in a rectangle below the controls.

A custom color may be selected by first including it as one of the twenty available colors. This is done by clicking the "Add" button. When this is done the first color is replaced by the custom color which becomes the selected color. The twenty colors may be scrolled to determine which color is replaced by clicking the "Scroll" button.

A continuous range of colors may be generated. This is done by clicking the "Mix" button. To generate a specific range of colors do the following. Generate a custom color to end the range and add it as the first color of the twenty available colors by clicking "Add". Then click "Scroll" to make it the last color. Then generate another custom color to start the range and add it as the first color by clicking "Add". Finally, click the "Mix button.

Color ranges may be saved by clicking the "Save" button and restored by clicking the "Restore" button. The "Restore" button cycles through the saved ranges together with the original range of default colors.

Freehand

To scribble on the canvas in freehand, first select the freehand mode using the mode selector. Then select the line size using the line size controls and a color using the palette. Finally, drag the mouse on the canvas releasing the mouse button when done.

Lines

To draw a line first select the appropriate mode using the mode selector. Then select the line size using the line size controls. And finally select the line's color using the palette.

Press the mouse button on the canvas to define the start point of the line, then drag the mouse and release the button at the lines end point.

Rectangles

To draw a rectangle or filled rectangle first select the appropriate mode using the mode selector. For a rectangle select the line size using the line size controls. Then select the rectangles's color using the palette.

Press the mouse button on the canvas to define a corner point of the rectangle, then drag the mouse and release the button at the rectangle's opposite corner point.

Ovals

To draw an oval or filled oval first select the appropriate mode using the mode selector. For an oval select the line size using the line size controls. Then select the oval's color using the palette.

The size and position of an oval is defined by its' enclosing rectangle. Press the mouse button on the canvas to define a corner point of this rectangle, then drag the mouse and release the button at the rectangle's opposite corner point.

Polygons

To draw a polygon or filled polygon first select the appropriate mode using the mode selector. For a polygon select the line size using the line size controls. Then select the polygon's color using the palette.

Click the canvas to define the first point and then drag the mouse releasing the button at each subsequent point. Finally, close the polygon by selecting the first point again. The program will consider the polygon closed and finished when a point within five pixels of the first point is selected.

Curves

To draw a curve or filled curve first select the appropriate mode using the mode selector. For a curve select the line size using the line size controls. Then select the curve's color using the palette.

Curves are defined by four points, the curve's start point and end point and two control points. To specify the start and end points, simply click on the canvas. A dotted line will then be drawn between these two points. Next, define the shape of the curve by dragging each of the control points using the mouse. One control point is moved by the mouse normally and the other control point is moved by the mouse with the SHIFT key held down. Be careful to hold the mouse button down when defining the curve's shape releasing the button only when the desired shape is shown by the dotted outline. If the SHIFT key is down when the desired curve is obtained, be careful to release the mouse button before releasing the SHIFT key.

Curved shapes may be filled with color by drawing two filled curves with the same start and end points.

Coordinate Specification

Card1A.gif

The bottom section of the make control card, shown above, is used to specify the x, y coordinates of picture segments directly. This method is less convenient than using the mouse, but allows a more accurate specification of the shape and position of a picture segment.

Coordinates are >= 0 and <= 1. The top left corner of a canvas is specified as (0, 0), the bottom right corner is specified as (1, 1) and the center is specified as (0.5, 0.5).

A line is defined by two coordinate pairs specifying its end points. A rectangle is defined by two coordinate pairs specifying the top left and bottom right corners. An oval is defined by specifying its enclosing rectangle. A polygon is defined by specifying the coordinate pairs of each of its points. A curve is defined by specifying the coordinates of its end points followed by the coordinates of the two control points. Finally, a freehand segment is defined by specifying the end points of a sequence of connected lines.

Coordinates are specified by first selecting a point number, then entering both the x and y values and finally clicking the Save button. The point number and coordinate values are typed into the relevant input control followed by "Enter". The point number may be incremented or decremented by clicking the associated buttons. This provides a convenient means of checking and editing the values of the coordinates. When checking the coordinates, note that the last point number is not part of the specified point set. It provides a means of adding a new point. To delete all specified coordinates click the Reset button.

When a picture segment has been specified and checked, it may be drawn by clicking the Draw button.

Pattern Construction

Card3.gif

The thumbnail control card, shown above, together with the thumbnails are used to construct patterns from pictures and other patterns.

To combine patterns, first select the desired operation using the combine choice component and click the Combine button. Then click, in turn the thumbnails to be combined and finally click the thumbnail to hold the combined pattern. The following operations are available:

  1. Together
  2. Beside
  3. Above
  4. Diagonal
  5. Push Left
  6. Push Up
  7. Push Diagonal
  8. Corner Push
  9. Triangle Push
  10. Edge Limit
  11. Center Limit
The together, beside, above and diagonal operations combine two patterns to make a third, while the push and limit operations combine two or more copies of a single pattern.

To modify (move, rotate or reflect) a pattern, first select the desired operation using the modify choice component and click the Modify button. Then click the thumbnail to be modified and finally click the thumbnail to hold the modified pattern. The following operations are available:

  1. Move Left
  2. Move Right
  3. Move Up
  4. Move Down
  5. Move Center
  6. Rotate 90
  7. Rotate 180
  8. Rotate 270
  9. Reflect X Axis
  10. Reflect Y Axis
Three options control how patterns are combined or modified. Ratio is used to specify the relative sizes of the two patterns used in either the beside, above or diagonal operations and also specifies the relative distance to move a pattern in the move operations. Push Ratio and Push No are used in the push and limit operations.

The ratios and push number may be changed by first selecting the associated text input component by clicking on it and then typing the desired value followed by "Enter". The ratio values are restricted to 0.0 <= value <= 1.0 and the push number values are restricted to 1 <= value <= 25.

It is instructive to make a picture consisting of a white rectangle with a red spot in one corner and use it to try various combinations, modifications and options. Such a picture is included in the example patterns.

To save a picture contained on the make canvas, first click the Save button and then click the desired thumbnail.

To display a pattern, first click the Display button and then click the thumbnail to be displayed.

Availability

This software may be obtained from here.

Contact

This program was written by Brian Prentice who may be contacted at bprentice@webenet.net.