Sketch

i | P a g e

Sketch

ii | P a g e

Page

Sketch An Introduction to Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Let’s Begin with a Simple Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Consider Another Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Creating a New Program and Running it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

The Drawing Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

The Code Editor

The Code Editor Menubar and Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

The File Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

The Edit Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

The Format Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

The Tools Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

The Insert Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Toolbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Internal Sketch Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

General Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Internal Constants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Trigonometric Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Mathematical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Debugging Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Using Sketch as a Calculator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Indentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Subroutines and Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Loops

For … Next Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Do Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Decisions, Decisions - the If … Then … End If Statement . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . 27

Select … Case Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Endless Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Plot() Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Cartesian Coordinate System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Sketch

iii | P a g e

Contents

Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Sketch Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Drawing Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Transformation Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Control Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Colors

Named Colors and Fade Color Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Random Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Sample Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Saving and Opening Code Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Printing Code and Canvas Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Angles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Triangles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Sketch

1 | P a g e

SKETCH an Introduction to Programming Created by John Di Stefano

Sketch provides a simple approach to learning to program by assembling small pieces of code to draw geometric figures of varying complexity. Sketch allows the learner to use a small number of methods and language constructs to write small segments of code. The code is executed to output one or more geometric figures, as simple as a line or a rectangle or as complex as a HypoTrochoid. The programming language elements have been kept to a minimum to make Sketch easy to learn. Many people may be familiar with the BASIC programming language. This computer language was first released in the early 1970’s and has stood the test of time. It is still popular today, with Microsoft’s implementation of Visual Basic. Sketch borrows from the BASIC language and uses the same basic statements like the If …Then statement and the For… Next loop. In modern computer languages variables are fundamental to programming. Variables are place holder for numbers, text and various other data types. In Sketch there is only one variable type, the number type. Most of the language statements in Sketch have been designed to produce geometric figures like the line, rectangle, circle, ellipse and polygon. Sketch is designed to run on a Windows computer and will happily run on Windows 7 and newer versions of Window like Win8 or Win10. Once Sketch is installed on the user’s computer it may be run by clicking on its icon. The opening screen has three sections. On the left is a list of drawing methods and language elements. In the centre is where you write your code, the code editor. And the window on the right is the canvas where all drawing takes place. Generally, Sketch allows us to write programming code. Once we have completed our code, click the run button and see the results that the code generates on the canvas. All code written is saved in text files using a given filename and the file name extension .sketch. For example: Myprogram01.sketch See the following page for a screen shot of Sketch.

Sketch

2 | P a g e

Sketch

3 | P a g e

Let’s Begin with a Simple Program In the following screenshot we see that we have entered a small program (code) in the editor, executed that code and the result displayed on the canvas window.

To execute the code press the Run button.

The code contains the Home() method that by default sets the home position at the centre of the canvas. It then clears the screen to a fade blue color and sets the pen,

with which we draw with, to light green and to a thickness of 1 pixel. The next four lines set up a For … Next loop beginning at a value of 10 and ending at 500, in steps of 10. For each of these 50 iterations of the loop we move a given distance (the value of MoveDistance) and turn 90 degrees to the left. The resulting drawing is a square spiral. Finally, the program stops, using the stop() method. The program will stop after the last line of code even if the stop() method is not used.

Home() Clear(FadeBlue) Pen(lightgreen, 1) For MoveDistance = 10 to 500 step 10 Move(MoveDistance) Turn(90) Next stop()

Sketch

4 | P a g e

Consider Another Program In the above example, we have written some code to draw simple geometric figures. We use Clear(FadeRandomColor) to clear the screen with a smooth color gradient selected at random. We then draw a line using the method DrawLine(100,10,500,10) where each pair of numbers is a point (x,y). The line is drawn from point(100,10) to point(500,10). The y or vertical co-ordinate is kept at a value of 10 pixels for both points to give us a horizontal line. Next we draw a circle and an ellipse and the two polygons, one with 5 sides and the other with 7 sides. Note that before each geometric figure is drawn we use the Pen() method to draw with a new random color. Is Case Important when writing code? Not in Sketch.

DrawLine(100,10,500,10) DRAWline(100,10,500,10) drawLine(100,10,500,10)

These three lines are all equivalent. You can enter the code in lower case, upper case or mixed case. Note that this is not so in most modern programming languages. Sketch has been designed case insensitive for the sake of simplicity.

Home() Clear(FadeRandomColor) Pen(RandomColor, 2) DrawLine(100,10,500,10) Pen(RandomColor, 2) DrawRectangle(100,50,400,100) Pen(RandomColor, 2) DrawCircle(200,300,50) Pen(RandomColor, 2) DrawEllipse(400,300,100,50) Pen(RandomColor, 2) Drawpolygon(200,500,100,5) Drawpolygon(400,500,100,7) stop()

Sketch

5 | P a g e

In the next example, we use the Fill methods to draw filled geometric shapes.

Note that the Fill methods can contain one color specification for a solid color fill or two colors for a gradient fill.

Creating a New Program and Running It To create a new program click File-New or click the New button icon in the code Editor toolbar. If you already

have code in the editor you will be prompted to save it, if it has not previously been saved. The editor screen is

refreshed with the following lines;

Home() Clear(white) Pen(green, 1)

The Pen is set to green, with one pixel thickness and is moved to the home position, which by default is the

centre of the drawing canvas. The canvas is cleared to white. Note, nothing will happen on the canvas until you

run the code.

Below these three lines you enter your own code. Test the code at any time by clicking the Run

button.

You may also edit the three default lines. For example change the pen color to red by editing the third line to

Pen(red,1) or clear the canvas area to a fade color, like; Clear(FadeBlue)

Remember, case is not important. Pen(red,1) is the same as PEN(Red,1)

Sketch

6 | P a g e

The Drawing Canvas The programs you write in Sketch generally produce a drawing on the canvas. The drawing canvas initially

appears black in color and to the right of the Sketch window.

Any 2-dimensional drawing surface uses a coordinate system for mapping points on the canvas. This means that

we use two numbers (x,y) to describe a point. In the default canvas

coordinates the point (0,0) is the left-top corner of the canvas. x

increases horizontally from left to right and y increases vertically from

top to bottom. The figure below shows a grid drawn on the canvas. Each

square in the grid is 100 pixels wide and 100 pixels high. The x,y co-

ordinates of the first square are marked to particularly note the values

of the four points of the first square of the grid.

The method to produce the grid is; Grid(0,0,full,full,100,100)

The first two numbers (0,0) is the starting point and the last two

numbers (100,100) the width and height of each cell of the grid. See the

Grid() method for a more detailed explanation of all the terms in the method.

Many of the drawing methods require points to be specified and it is important to be familiar with the default

co-ordinate system employed in the Sketch drawing canvas. Remember the first number represents the

horizontal x co-ordinate and the second number the vertical y co-ordinate.

Depending on the size and resolution of your computer monitor, the Sketch canvas will vary in size but should be

no smaller than 550x550 pixels. With larger screens the Sketch canvas will initialize to a much larger size.

The screen coordinates, as described above (with y increasing in the downward direction) can be transformed

into the standard Cartesian coordinates (y increases upwards) by using the Cartesian() method.

Sketch

7 | P a g e

The Code Editor The code editor, shown below, is where you enter code to write your programs. Before you begin to write a

program you must have some idea as to what you wish to create or produce on the canvas. I may be a very

simple exercise like drawing a square or maybe something a little more complex, like drawing the first four

geometric figures-a triangle, square, pentagon and hexagon or maybe something else. Once you have

determined what you will create with your program you can think about what language elements and methods

you will need to write your program. In computer programming there is often many ways of solving the same

problem. For example, let’s agree that we wish to draw a 100 pixels square on the canvas. The easiest way to do

this is to use the Drawrectangle() method.

DrawRectangle(10,10,100,100)

Enter the above line in the editor, just below the Pen(green,1) line and then click the Run Button.

The code line above draws a rectangle beginning at point 10 pixels from the left edge of the canvas and 10 pixels

from the top edge of the canvas. And then draws a rectangle of width=100 pixels and height=100 pixels. Because

the width and height of the rectangle have the same size we get the desired square.

Is there any other way of drawing a square? Yes there is. We could draw four lines, in an appropriate way, and

get a square. To do this you would need to determine four points and then draw a line from one point to the

other. The DrawLine() will allow us to do this. For example;

DrawLine(200,10, 300,10, 300,110, 200,110, 200,10)

Sketch

8 | P a g e

Each point is made up of two numbers, the (x,y) co-ordinate. The x coordinate is the horizontal value, and the y

coordinate the vertical value. Note that in the code line above;

DrawLine(200,10, 300,10, 300,110, 200,110, 200,10)

contains five points to draw the square, and the first and last point have the same values. This is done to close

the square.

An alternative approach to drawing a square might be to use the Move() and Turn() methods. Move(100) will

move the current pen 100 pixels in the current direction. Turn(right) will turn the pen to the right by 90 degrees.

If we perform these two steps four times a square will be drawn. See the code below.

We precede our four Move() and Turn() methods with the Pen(Blue,1)

to draw the square in blue, 1 pixel thick. JumpTo(400,10) moves the

pen to a desired starting position without drawing.

Finally, another way of drawing a square is to use the DrawPolygon()

method. For example;

Pen(DodgerBlue,1) DrawPolygon(100,300,100,4)

Note that the DrawPolygon() method gives us an unexpected result as

shown below. That’s because the third parameter of 100 specifies a

radius not the length of the side of the square. The drawPolygon()

method draws a closed figure contained within an imaginary circle of the specified radius and number of sides.

To demonstrate, the circle is drawn using the same centre point (100,300) as the polygon and the same radius of

100 pixels with the method DrawCircle(100,300,100).

Pen(blue,1) JumpTo(400,10) Move(100) Turn(right) Move(100) Turn(right) Move(100) Turn(right) Move(100) Turn(right)

Sketch

9 | P a g e

The Code Editor Menubar and Toolbar The Editor Menu Bar at the top of the Editor Window contains standard file and edit menus similar to those found in

most other Windows applications. The Toolbar contains the most used editor commands. These are explained below.

The File Menu

The File Menu contains standard menu items such as New, Open, Save, Save As, Print etc.

The New command will clear the editor window and create a new Sketch file. If the existing file

has been modified you will be prompted to save it.

The Open command will display the File Open dialog box allowing you to select the file you wish

to open.

The Recent command opens a list of the ten most recent files from which you may select to open.

The Save command will save the contents of the editor to the current file.

The Save As command will display the Save As dialog box where you may specify a new name and optional path for

the file to be saved.

The Save Canvas As command will display the Save As dialog box allowing you to save the image displayed on the

canvas. The canvas image can be saved as any standard image file, such as Bmp, Jpg or Png.

The Page Setup command will display the Page dialog box where you may select page orientation and other printer

related options.

The Preview Code command will print the content of the editor to the screen.

The Print command will print the contents of the editor to the printer.

The Preview Canvas command will print the content of the canvas to the screen.

The Print Canvas command will print the contents of the canvas to the printer.

The Exit command will exit Sketch.

Sketch

10 | P a g e

The Edit Menu

The Edit menu provides the common editing functions such as cut, copy and

paste as well as the find and find and replace functions.

UnDo

Reverses text changes made in the file.

ReDo

Restores the last UnDo change.

Cut Removes selected text and places it on the clipboard. Text must be selected (by

dragging the mouse over the text) before it may be cut.

Copy Copies selected text to the clipboard. Text must be selected before using the Copy command.

Paste Pastes the clipboard text (text is placed in the clipboard using the cut or copy commands) into the current document

at the current cursor location. Before using Paste locate the cursor at the insertion point.

Find

Opens a find (and optionally find and

replace) dialog. Enter the text to find

and click the Find button. The found

text is highlighted.

You may then click the Find Next

button to find further occurrences of

the text. If you wish to replace found

text enter some replacement text in

the Replace with? box and then use

the Replace or Replace All buttons to

replace the found text.

Select All This command will select all editor text.

Insert Time Date This command will insert the time and date at the current editor position.

Note the shortcut key for these commands as it is over more convenient to use them instead of using the menu

commands.

Sketch

11 | P a g e

The Format Menu

Word Wrap

Click the Word Wrap command to toggle word wrap of long editor lines.

Convert to Upper Case

Changes the selected text to upper case.

Convert to Lower Case

Changes the selected text to lower case.

Indent Code

This feature will scan your code and indent lines as required. Indenting your code makes it easier to read and see

errors. You can indent your code as you enter each line but this is quite tedious. Simply use the Indent menu

command at regular intervals to adjust the indentation of your code. Indenting does not modify your code in any

way it simply repositions the code horizontally to make it easier to read.

Code inside the For statement is indented 4 spaces and code inside the If … else … end If block is further indented.

This arrangement of the code makes it easier to read and see the various different blocks. Indenting has no effect

on how the code runs.

xoffset=200 yoffset=300 For a = 0 to 360 step 4 R= 100*(1+cos(a)) debug([R]) x = xoffset + r*cos(a) y = yoffset + r*sin(a) if a=0 then 'Jump to 1st point JumpTo(x,y) else 'draw all other points drawto(x,y) 'draw a circle on the path of the cardioid DrawCircle(x,y,100) jumpto(x,y) endif next

Before Indenting

xoffset=200 yoffset=300 For a = 0 to 360 step 4 R= 100*(1+cos(a)) 'debug([R]) x = xoffset + r*cos(a) y = yoffset + r*sin(a) if a=0 then 'Jump to 1st point JumpTo(x,y) else 'draw all other points drawto(x,y) 'draw a circle on the path of the cardioid DrawCircle(x,y,100) jumpto(x,y) endif next

After Indenting

Sketch

12 | P a g e

The Tools Menu

The Tools Menu command allows you to select the font and text color to be used

in the code editor. Additionally, you may set the background color, line number

color and Last Used File load option.

Clear Drawing Canvas

Clears the drawing canvas.

Set Default Font and Colors

The default font and colors are;

Font: Consolas, 11

Text color: Black

Background Color: White Smoke

Line Number Color: Green

Set Font Displays a font dialog allowing a font to be selected for the editor text.

Set Font Color (Text color) Select the text color from the displayed color dialog.

Set Background Color Select the background color for the editor window from the displayed color dialog.

Set Line Number Color Select the line number color from the displayed color dialog.

Restore Last Used File Click to toggle this option On/Off.

If this option is set, the last used file is automatically opened and displayed in the editor window.

Save Settings Click to save any changed settings immediately.

Sketch

13 | P a g e

Insert Menu

There are two groups in this section. The first group relate to inserting

colors and fonts, the second group relate to inserting code segments.

Insert Color Display a Color Picker for you to select a color. The color name is inserted in

the editor code at the current text position.

Insert Fade Color Displays a Fade Color Picker. The selected fade color name is inserted in the

code editor at the current text position.

Insert Font Displays a Font Picker. Select the required font, size and style. The font selected is inserted in the code editor at the

current text position.

Insert If … Then Block

Insert For … Next Block

Insert Do … Loop Block

Insert Select … Case Block

Insert Sub … EndSub Block

Insert Function … EndFunction Block

Each of these command inserts a basic code block which is then completed as required. For example, the If … Then

Block inserted is shown below. The three questions marks must be replaced by the appropriate conditional

statement. See the If Statement for a full explanation. Between the If and EndIf lines you enter your code.

If ( ??? ) Then

EndIf

Example

If (x=1) Then DrawCircle(xc,yc,100) Else FillCircle(xc,yc,100,red,white) EndIf

Sketch

14 | P a g e

Toolbar

From left to right clicking the icon performs the following function;

New File

Open File

Save File

Print

Do

Undo

Cut

Copy

Paste

Sketch

15 | P a g e

Toolbar (continued)

Remark block of code

Unremark block of code

Indent Code

Insert Font

Insert Color

Insert FadeColor

Find, Find and Replace

Help and Documentation

Sketch

16 | P a g e

Variables Variables are fundamental to all computer languages. Computer programs require variables of many different

types, such as string variables, numeric variables of type integer, single and double precision, Boolean or truth

variables and many others. But since Sketch is designed to provide for rudimentary programming only, the only

variable type available in Sketch is the number type. Thus when we code something like x=1 we are simply saying

to assign to the variable x the value of 1.0.

In essence, variables are place holder for numeric values in Sketch.

A variable can take any name you wish that conforms to the following simple rules.

Rule 1: A variable name must begin with a letter.

Rule 2: A variable name can have only letters and digits.

Case is not important, MYNUMBER1 = 0 is the same as myMumber1 = 0

Examples of variable names; X, y, x1, y1, MyNumber1, xValue, Yvalue, StartValue, ENDvalue

These variable names are not valid; My Number (space character is not allowed)

1x (variable starts with a digit is not allowed)

Initialising Variables To initialize a variable simply assign the variable name a value.

Eg. Xoffset = 200

Yoffset = 300

Later you can use the initialised variables in expressions, such as;

x = Xoffset + radius*cos(angle)

y = Yoffset + radius*sin(angle)

In the above example, you see the use of Cos and Sin functions. Sketch supports many such internal functions.

These are explained below.

Sketch

17 | P a g e

Internal Sketch Functions

Sketch comes equipped with many internal functions. They include the trigonometric functions, log functions,

random number functions, square root function and many others. The full list is given below.

General Functions Function Remark

Abs(expr) Returns the absolute value of expr, where expr is a mathematical expression or number.

Exp(expr) Returns e to the power of expr, where expr is an expression or number.

Int(expr) Returns the whole number part (Integer part) of the number or expression expr,

which is less than or equal to expr.

Ln(expr) Returns the natural log (base e) of or the expression or number expr.

Log(expr) Returns the log (base 10) of the expression or number expr.

Max(n1,n2,n3,…) Returns the largest number from the given list.

Min(n1,n2,n3,…) Returns the smallest number from the given list.

Remainder(n1,n2) or

Mod(n1, n2) Returns the remainder when n1 is divided by n2.

Pick(n1,n2,n3,...) Pick at random a number from the given list of numbers (n1,n2,n3,...).

Rnd(n1, n2, Inc) Returns a random number within the range n1 to n2 in increments of size Inc.

The accuracy of the generated random number is determined by the increment.

RndInt(n1, n2) Randomise a number within the range n1 to n2 . n1 and n2 are integers.

RollDice() Returns a number between 1 and 6.

Round(num, places) Returns the value of the number rounded to the designated number of places.

Sqr(expr) Returns the square root of the value of the expression or number expr.

TossCoin() Returns 1 for heads or 0 for tails.

IsOdd(number) Returns True if number is odd.

IsEven(number) Returns True if number is even.

Internal Constants Pi Equals 3.1416 approximately.

Radian An angle measure.

Equals 57.2956 degrees approximately. There are Pi radians in 180 degrees.

Sketch

18 | P a g e

Trigonometric Functions

Function Remark

arcCos(expr) Returns the arccosine (in degrees) of the expression expr.

arcCot(expr) Returns the arccotangent (in degrees) of the expression expr.

arcCsc(expr) Returns the arccosecant (in degrees) of the expression expr.

arcSec(expr) Returns the arcsecant (in degrees) of the expression expr.

arcSin(expr) Returns the arcsine (in degrees) of the expression expr.

arcTan(expr) Returns the arctangent (in degrees) of the expression expr.

Cos(expr) Returns the cosine of the value of the expression or number expr (expr is in degrees).

Cot(expr) Returns the cotangent of the value of the expression or number expr (expr is in degrees).

Csc(expr) Returns the cosecant of the value of the expression or number expr (expr is in degrees).

Sec(expr) Returns the secant of the value of the expression or number expr (expr is in degrees).

Sin(expr) Returns the sine of the value of the expression or number expr (expr is in degrees).

Tan(expr) Returns the tangent of the value of the expression or number expr (expr is in degrees).

ToRadian(Angle) Converts the given angle value in degrees to radians

ToDegree(Angle) Converts the given angle value in radians to degrees.

Mathematical Operators The following mathematical operators can be used when writing a mathematical expression.

^ To the Power of n2 = 3^4

* Multiply n3 = n1*n2

/ Divide n4 = 10.5/n3

\ Integer Divide n5 = 15\4

+ Add n6 = n3 + n4

- Subtract n7 = n6 - 5

- Unary Minus n8 = - n7

Sketch

19 | P a g e

Debugging Code When your code does not appear to work as expected it is important to be able to analyse the value of variables as

the program executes. In Sketch you can use the Debug() method to print out the value of variables. Use the Debug()

method as often as required to see the value of your variables as the program executes.

Consider the Spiral program below. The code executes a loop, For a = 0 to 960 step 10 using the variables R, x and y to calculate a series of points that describes a spiral. At each point of the spiral we then draw a circle. The result is shown on the canvas. At line 17 we print the values of R, x and y using the debug() method. Notice that the terms in square brackets, [x], [y] and [R] represent the variable under analysis. The remainder of the text in the Debug() method is simply printed out as entered. The variables enclosed in square brackets are evaluated and printed in the Debug Window, as shown in the figure below. When you have finished debugging your code you can remove the Debug line or simply insert a remark character (single quote mark) in front of it to disable it. For example; 'Debug(x=[x], y=[y], R=[R])

The square brackets in the Debug() method can contain more than just variables. Square brackets can contain

mathematical expressions and include constants, variables, mathematical functions, such as sqr, sin, tan and

mathematical operators.

Eg. Debug(the value of a= [a], and cosine a =[cos(a)] )

Sketch

20 | P a g e

Using Sketch as a Calculator Sketch is able to evaluate mathematical expressions of considerable complexity. This enables SKETCH to be used as

a powerful calculator. Use the WriteLine() or Print() methods to enter mathematical expression to evaluate. Run the

code to output the results.

In the code above, at line 5, 6 and 8 we have used the Print() and WriteLine() methods (these two methods are

equivalent) to send output to the Output Window. At line 9 we use the DrawText() method to draw the result of

the calculation to the canvas. In all cases, line 5 to 9, the expression contained in square brackets is evaluated and

then output.

We could set values into variables and then use those variables to evaluate the expression. For example;

Lines 8,9 and 10 assign variables n1, n2 and n3 to parts of the required calculation and line 11 and 12 use the

variables to achieve the same calculations as before, and of course the same result with the DrawText() method

drawing the result to the canvas. Note that we have set the canvas to a fade green color and the brush color to

white at line 2 and 3 respectively.

Sketch

21 | P a g e

Indentation In most examples shown in this document certain code lines are indented. This is not compulsory and Sketch

makes no distinction between indented and non indented lines. If you indent well, you make your code much

easier to read, which means you'll make it easier to debug.

Sketch makes it easy to indent your code. In fact it will do it for you in a consistent way that always look good.

For example, here is a few lines of code that are not indented. It is difficult to see the beginning and end of the

For … Next loop because all the code lines are left aligned.

You can indent the code in the code editor window by clicking the indent button on the editor toolbar.

Indenting will modify the format of the lines to expose (in this example) the For … Next loop and make

the code easier to read. The following shows the result of indenting the code in the previous box.

You can indent the code anytime and as often as you wish.

Before Indenting

For i = 0 To 90 step 5 ResetTransform() Translate(200,100) Rotate(I) DrawEllipse(0,0,100,50) Next Stop()

After Indenting

For i = 0 To 90 step 5 ResetTransform() Translate(200,100) Rotate(I) DrawEllipse(0,0,100,50) Next Stop()

Sketch

22 | P a g e

Subroutines and Functions Subroutines can be thought of as small programs that perform specific tasks. A subroutine is given a name and

when to wish to reference or call the subroutine you use its name. A subroutine holds one or more lines of code

which performs the required action. For example, such as adding two numbers or drawing a green circle. When

the code in a subroutine is executed, the subroutine is said to be "called". Your code can call the subroutine as

often as required.

Why Use Subroutines? Why not just write the code in the main body of the program? If an action is requited

more than once then you would need to write the same lines of code every time you require that particular

action. Writing the same lines of code many times over could become rather tedious. Instead, write the

subroutine once and then call it every time you need it.

Creating a Subroutine

Creating a subroutine involves at minimum two lines of code. A subroutine begins with the word Sub, followed

by a space, then a name identifying the subroutine. Two parentheses follow. Inside the parenthesis we insert a

list of parameters that the subroutine will require. The list of parameter is optional, which means that the

subroutine can have empty parentheses.

Sub MySub()

End Sub

These two lines represent the start and end of the subroutine. Any code inserted between these lines will be

executed when the subroutine is called. A subroutine can be called by stating its name. For example, MySub()

Parameters

Parameters, also called arguments, are variables that can be "passed into" a subroutine. A subroutine with

parameters looks like this:

Sub Add2Numbers(n1,n2)

WriteLine(The sum of [n1] + [n2] = [ n1 +n2 ])

End Sub

See the program below, and the corresponding output.

The code shows that we call

the subroutine four times to

add some numbers. The

WriteLine() method prints out

the results.

Take care that when calling

the subroutine you pass the

parameters in the correct

order.

In Sketch, all parameters are

decimal numbers and Sketch

does not differentiate between a numbers like 5 and 5.0.

Sketch

23 | P a g e

Functions

Functions are very similar to subroutines. The difference is that functions return a value. In Sketch a function

returns a numeric value by means of the Return keyword. The example below is a function that adds two

numbers. A function is declared the exact same way as a subroutine, except we use the "Function" keyword

instead of "Sub".

Function Add(n1, n2)

Sum = n1 + n2

Return Sum

End Function

A function is referenced in an expression or assigned to a variable and supplies a value to the expression or

variable. The value supplied is the value of the function.

MySum = Add(5,36)

Alternatively you can initially assign the value to be passed to variables, and then call the function.

n1 = 5

n2 = 36

MySum = Add(n1,n2)

Functions or Subroutines?

The best way to determine which you should use is by asking yourself whether you need to return a value? If

you do, use a function. If you don't, use a subroutine.

In this example we have written a

function Round (n, places).

The function takes the number n

and rounds it to the specified

number of places.

We test the function by rounding

two numbers to 2 decimal places.

The results are shown in the

Sketch output window.

See examples DemoFunction1.sketch and DemoFunction2.sketch.

Sketch

24 | P a g e

Loops The For … Next Loop Language structures that create loops are found in all computer languages. You very often want to execute a set

of methods many times and this is best done with loops. The For statement is one simple and direct way of

creating a loop where we specify a variable, a start and an end value and execute the contained methods or

statements for every value of the variable.

Basic Structure of For Loop:

For <variable> = start value TO End Value

Methods or statements to execute

Next

Example:

For i = 1 to 20 Print( i = [i]) Next

We can change the increment value by including a step value as

follows;

For i = 1 to 20 Step 2 Print( i = [i]) Next

The output would now be;

The output stops at i=19 because the next value for i would be 21, and since 21 exceeds 20 (the end value) the

loop terminates at i=19.

The following program uses one For loop inside another and creates one of many interesting result.

The variable i is incremented by 1 (default

increment) and takes the values from 1 to 20,

executing the contents of the loop 20 times

producing the following output.

Sketch

25 | P a g e

You might ask ‘What draws all the circles?’ The internal For loop does by

moving a small length and turning by a small angle, 50 times (Sides = 50).

Change line 5 to read Sides=8, or some other value to give a related but

quite different result. Here is an example;

This last figure was obtained by keeping Sides=8 at line 5 and changing line 9 to

read Numcircles = 60.

Of course Sides=8, causes 8 sided polygons, or octagons, to be drawn rather

than the original 50 sided polygons, which appear to look like circles.

The possibilities are endless. See the program Circle2.Sketch and try it out.

Sketch

26 | P a g e

Do … Loop

The Do Loop is another way of creating a loop. Its general structure is as follow;

Use a Do...Loop when you want to repeat a set of statements

an indefinite number of times, until a condition is satisfied.

If you want to repeat the statements a set number of times, the

For … Next statement is usually a better choice.

You can test condition only one time. In most programming

languages you can test condition at either the start or the end of the loop. In Sketch you test condition only at the

end of the loop. This means that the loop will always run at least once.

Example:

In this example a Do … Loop structure contains three random numbers x,y and Radius to draw up to 100 circles.

The condition in the If statement checks the value of counter and exits the loop when counter is greater than

100.

We also use a random color for the pen to draw circles with different colors.

Exit Do The Exit Do statement provides an alternative way to exit a Do…Loop.

Exit Do transfers control immediately to the statement that follows the Loop statement.

As shown in the above code the Exit Do is used after some condition is evaluated (Counter > 100) in this case.

Do

(code)

Loop While (condition)

Sketch

27 | P a g e

Decisions Decisions! The If … Then … EndIf Statement Often, when writing computer programs, you need to decide which path to follow depending on the value of

some variable. The path could be as simple as doing one thing or doing something else or the situation could be

more complex and the decision making could lead to one of many possible paths.

All computer languages support an If . . . Then statement to make decision making possible.

Let’s consider the following code;

If (MyValue=1) then FillCircle(xcentre,ycentre,radius, red) DrawText(xcentre-20, ycentre-20, 1) elseif (MyValue=2) then FillRectangle(xcentre,ycentre,400,200,randomColor,RandomColor) DrawText(xcentre+180, ycentre+80, 2) elseif (MyValue=3) then FillPolygon(xcentre,ycentre,radius,5, RandomColor,white) DrawText(xcentre-20, ycentre-20, 1) else DrawText(20,20, MyValue should be 1, 2 or 3 !) endif

The code considers the value of the variable MyValue and depending on its value (1, 2, 3 or something else)

Sketch will execute different lines of code.

If MyValue=1 a circle is drawn.

If MyValue=2 a rectangle is drawn.

If MyValue=3 a polygon is drawn.

If MyValue= something else, the text “MyValue should be 1, 2 or 3 !” is drawn.

In the next page we will see the full code and the output drawn when we run the program.

Sketch

28 | P a g e

The program sets up a blue canvas with a grid and defines the drawing brush as white. It then initialises three

variables, xcentre, ycentre and radius.

Next we see at line 10 the statement;

This retrieves the value of the Input box and assigns it to the variable MyValue.

The input box is at the top of the screen, next to the run button.

The screen shot above shows the number 2 in the Input box, therefore MyValue = 2 at line 10 in the code.

Next, using the If statement we check the value of the variable MyValue. Since the condition (MyValue = 2) is

true the second block, will be executed - that beginning with;

elseif (MyValue=2) then FillRectangle(xcentre,ycentre,400,200,randomColor,RandomColor) DrawText(xcentre+180, ycentre+80, 2)

A rectangle is drawn using the FillRectangle() method. The DrawText()

method draws the number 2 at the centre of the rectangle.

The If statement is often required for a ‘this or that’ situation and it is

written in its simplest form as shown in the box.

If (condition) Then (code) Else (code) endIf

MyValue = InputBox()

Sketch

29 | P a g e

As we have seen above when there are more than two choices to be

made we must use the more complex form that has one or more ElseIf

clauses.

With ElseIf you may construct as many choices as you wish.

Condition statement The condition statement that follows If or ElseIf is compulsory and must

evaluate to true of false. You may use the following operators to compare

values.

Operator Meaning Example

= equals MyValue = 1

> greater than MyValue > 1

<= greater than or equals MyValue <= 1

< less than MyValue < 1

<= less than or equals MyValue <=1

<> not equals Myvalue <> 1

You may also use the logical operators And, Or and Not to build the condition.

Example1:

Example 2:

See the program DemoIf_Else.Sketch for a working

example. When running the DemoIf_Else.Sketch

program enter a number in the Input box before running.

If (condition1) Then (code) ElseIf (condition2) Then (code) ElseIf (condition3) Then (code) ElseIf (condition4) Then (code) etc, etc Else (code) EndIf

If Radius > 100 and Radius < 200 Then

(code)

EndIf

If Not i = 1 Then (code) EndIf

Sketch

30 | P a g e

Select...Case Statement An alternative to using the If statement with multiple ElseIf clauses is to use the Select case statement. The general form is as shown in the box. In the figure below the example program assigns the variable TestValue to a random number between 1 and 5. The Select Case statement tests for case 1, case 2 and case 3 and draws circles (case 1), draws ellipses (case 2) and draws rectangles (case 3). Case Else picks up values 4 and 5 and draws the text; We picked the value: 4 Or We picked the value: 5

The Select Case statement is found in most computer languages, identical to the Sketch implementation or very similar. Select Case is a powerful language construct for decision making processes, as the example above shows.

Select Case (testexpression)

Case expression1

(code)

Case expression2

(code)

Case expression3

(code)

Case Else

(code)

End Select

Sketch

31 | P a g e

Endless Loops Endless loops are bad in programming. They can cause a computer to appear to freeze, stop or hang. The code executing in the endless loop can take all CPU (Central Processing Unit) resources and not allow anything else to occur. There is no response to the mouse and keyboard-the computer becomes unresponsive. An endless loop can be easily created with the Goto() method and is the main reason why the use of Goto() is not encouraged in modern programming languages. Here is an example;

' Endless Loop #1 i=0 :start i=i+1 WriteLine(The value of i is:[i]) Goto(:Start)

We have a label (:Start), a variable i that counts the number of times the loop is executed, The WriteLine() writes the value of i to the output window, and finally the Goto() method sends control back to :Start. This is definitely a loop with no way out. The code will execute forever or until the value of i grows so large that an overflow error will occur (the value of i becomes too large for the computer to handle). Similarly, if you use a Do loop you can easily create an infinite loop. The sample code below demonstrates this.

' Endless Loop #2 i=0 Do i=i+1 WriteLine(The value of i is:[i]) Loop

To quit a running program caught in an endless loop click the Stop Button. It is interesting to see the output when Endless Loop #1 code was left to run for about 5 seconds. The bottom of the Output window will show the last values of i when the program was interrupted by clicking the Stop button. In the short time lapse of 5 seconds the loop had executed over 20,000 times.

Sketch

32 | P a g e

Plot() Method The Plot() method will plot the designated function. The function must be written as a function of x. For example; Plot(2*x + 1) Plot(3*x^2 -5*x +2) The domain and range for the plot take default values. x is plotted from -5 to 5 and y values are restrained to values between -10 and 10. y values greater in magnitude than +10 or -10 are not drawn. This is demonstrated below for the function (3*x^2 -5*x +2) To declare a different domain for x we add a For statement modifier at the end of the Plot() method. For example; Plot(2*x^2 – 4) For x= -8 to 8 Step .01 In this example x values span from -8 to +8 and use a step value of .01. That is, the set of x values -8.0, -7.99, -7.98 ….. 7.98, 7.99, 8.0 are used to calculate function values (normally referred to as y values). The resulting plot is shown below.

More than one plot can be drawn on the same

frame. Simply execute multiple Plot() methods

consecutively. When multiple plots are drawn

together ensure that the plot domain is the same

for every plot.

The following three lines of code produce the

following output.

Plot(2^x) Plot(2*x -3)

Plot(2*x^2 - 4)

In this example we use the default domain values

of -5 to +5.

Sketch

33 | P a g e

Plotting Trigonometric Functions

If we execute the method Plot(sin(x)) we don’t see the usual Sine wave. Why not? What do we see? We see the

following.

You see a very shallow line just below the x-axis on the left and just above the x-axis on the right. The default x

values go from -5 to +5 and these values are interpreted as degree values and Sin(5) is a small number. Hence

the extremely shallow curve. The domain values should be seen to be radians, an angle measure much larger

than degrees. We therefore we need to convert to degrees. This is easily done by multiplying by 180 and

dividing by Pi. We should write our sine function as Sin(x*180/Pi). When we do this we get the following output.

Now we can see the sine curve waving with maximum values of y=+1 and minimum values of y=-1. The domain x

values going from -5 radians to +5 radians.

If you are not familiar with the radian angle it is not difficult to understand. We know we have 360 degrees in the

full circumference of a circle. We also know that the circumference is equal 2*pi*radius. If you consider a length

of curve around the circle equal in length to the radius of the circle, the angle subtended by the curve of length

radius is one radian. From the simple formula C=2*Pi*radius we can see that there are 2*Pi radians (6.28

radians) in one complete revolution and 360 degrees divided by (2*Pi) gives 57.3 approx. Thus we have that one

radian is equivalent to 57.3 degrees.

Our plot above with x going from -5 to 5 radians is equivalent to a plot where x = -286 (-5*57.3) to +286

(+5*57.3) degrees.

You can multiply the angle x by 180/pi to convert to degrees or use the Sketch function toDegree() to perform

the conversion.

Thus; Plot(Sin(x*180/Pi)) is equivalent to Plot(Sin(todegree(x)).

See the example below where we plot three functions in one output window.

Sketch

34 | P a g e

Note: Regardless of the Pen

thickness graphs are always

drawn 1 pixel thick, but the Pen

color will determine the color of

the graph.

Drawing a Grid on the Graph Graphs can be drawn with a grid by adding ‘with grid’ at the end of the Plot() method.

Example. Plot(2*x^3) for x=-15 to 15 with grid

Pen(black, 1) plot(2*sin(todegree(x))) for x=-5 to 5 step .01 Pen(red, 1) plot(5*sin(todegree(x^2))) for x=-5 to 5 step .01 Pen(green, 1) plot(5*sin(todegree(2^x))) for x=-5 to 5 step .01

Sketch

35 | P a g e

Cartesian Coordinate System The Cartesian coordinate system is a plane consisting of two

perpendicular axis. The horizontal axis is the x-axis and the

vertical axis the y-axis. The point of intersection of the x-axis

and the y-axis is called the origin and corresponds to the point

(0,0).

The position of any point on the Cartesian plane is described by

two numbers (x, y). The first number, x, is the horizontal

position from the origin and called the x-coordinate. The second

number, y, is the vertical position of the point from the origin

and called the y-coordinate.

The method Cartesian(x,y) will set up the Cartesian plane with the origin at canvas point x,y. For example, Cartesian(200,400) will set up the Cartesian plane with the origin at canvas point (200,400). If you do not specifying the point x,y a default origin will be set up with x=200 and y=centre of canvas in the y direction. The following code will setup the default coordinate plane and draw a circle with radius=100 at the Cartesian origin.

Cartesian() Pen(yellow,2) DrawCircle(0,0,100)

If we had not specified the Cartesian() method the circle would

have been drawn at the canvas point 0,0 which is the left, top of

the canvas.

The next few lines of code repeat the above three lines and add a For … Next loop where we draw more circles. The For loop starts at x= -100 and ends at x= 300 and increases the x value in increments of 10 pixels.

Cartesian() Pen(yellow,2) DrawCircle(0,0,100) For x = - 100 To 300 step 10 DrawCircle(x,0,50) Next

Sketch

36 | P a g e

In the next segment of code we add a new line Rotate(10) to the previous code to rotate each circle drawn in the loop.

Cartesian() Pen(yellow,2) DrawCircle(0,0,100) For x = - 100 To 300 step 10 Rotate(10) DrawCircle(x,0,50) Next

The result shown on the right is interesting.

The power of the Cartesian() method allows

the plotting of mathematical functions using only a few lines of code.

For example:

To turn off the Cartesian coordinate system and return to the canvas default coordinates, with point 0,0 at the

top-left position, use the ResetTransform() method.

Cartesian() Pen(yellow,2) startValue = -200 endValue=700 For x = startvalue to endvalue y = 50*sin(x) if x = startvalue then ' do not draw a line ' to first point jumpto(x,y) else drawto(x,y) end if next

Sketch

37 | P a g e

Transformations We have seen that the origin of the canvas is the top left corner, and usually, when we draw a figure on the

canvas, we offset the origin by some amount in both x and y directions.

For example, DrawRectangle(50,50,200,50)

We translate the start position of the rectangle by specifying a starting

point (x,y). In the above example, (50,50).

The same can be achieved by using the Translate() transformation

method.

Translate(50,50) DrawRectangle(0,0,200,50)

Note that the DrawRectangle() method has a 0,0 start point. The method Translate(50,50) ensures the rectangle is moved 50 pixels horizontally and 50 pixels vertically, when drawn. The transformation methods are designed to translate (move), rotate and scale. Translate(xdirection, ydirection) Rotate(angle) Scale(xScale,yScale)

Consider the following three examples. Example 1; Translate(200,100) DrawRectangle(0,0,200,50)

Translate the rectangle 200 pixels in the x direction and 100 pixels in the y direction. The rectangle is 200 pixel wide, 50 pixel high. Example 2;

Translate(200,100) Rotate(10) DrawRectangle(0,0,200,50)

In this example, the rectangle is translated to position (200,100), then rotated 10 degrees and finally drawn. The order in which you apply the transformation methods is important. The following two examples demonstrate the different results produced when the transformation methods are applied in a different order.

Sketch

38 | P a g e

Example 1. Pen(red,1) For Angle = 0 to 45 step 10 ResetTransform() Rotate(Angle) Translate(100,100) DrawRectangle(0,0,200,50) Next

Since we rotate before we translate the rectangle the rotation occurs relative to the origin, or point (0,0). Note that we need to reset the transform for each iteration of the loop otherwise the Rotate() and Translate() methods would accumulate (add up) and produce very different results. Example 2. Pen(black,1) For Angle = 0 to 45 step 10 ResetTransform() Translate(100,100) Rotate(Angle) DrawRectangle(0,0,200,50) next

In this example the rotation occurs relative to point (100,100) because we have moved the rectangle before we rotate it. As a consequence, the rectangle gets rotated about its top left corner and not the origin as in the previous example. Translations can be performed on image files as well. Let’s look at an example.

A. We move to a position 200,200 and apply a zero rotation to the image.

Translate(200,20) Rotate(0) DrawImage(0,0,C:\Sketch\Code\Sketch.png,1)

B. Again we translate to position 200,20, but now apply a 45

degree rotation and then draw the image. The figures on the right show our results.

Translate(200,20) Rotate(45) DrawImage(0,0,C:\Sketch\Code\Sketch.png,1)

Note:The image path shown in the examples A and B may not exist on your computer and you will need to select a different path when trying out the above code. You can use any image of your choice.

Sketch

39 | P a g e

If you wish to disable the transformation methods after they have been applied to drawing methods, use; ResetTransform()

Rotating Ellipse

The few lines of code below rotates an ellipse numerous times from 0 to 90 degrees for every 5 degrees. The result forms a quite interesting geometric pattern.

for i = 0 to 90 step 5 ResetTransform() Translate(200,100) Rotate(i) DrawEllipse(0,0,100,50) next

During each iteration of the loop we use ResetTransform() so that the Translate() and Rotate() and do not accumulate and cause a different result.

Sketch

40 | P a g e

See the file DemoTransform01.sketch for sample code in using the transformation methods. The code and result are shown below.

'-------------------------- ' DemoTransform01.sketch '------------------------------- Clear(fade red to Pink ) Brush(White) DrawText(50,50,Rotating Ellipse) 'Use a for loop to draw ellipes 'Each ellipse is rotated and translated 'Each ellipse is rotated by an incrementing amount 'eg. 0, 10, 20, 30 ... 360 degrees 'The transform is reset for each iteration otherwise you 'would accumulate the transform 'and get quite different results Pen(White,1) For i = 0 To 360 step 10 ResetTransform() Translate(300,300) Rotate(i) DrawEllipse(0,0,100,250) Delay(50) Next Stop()

Sketch

41 | P a g e

Sketch Methods The methods (programming commands) explained in this section perform various tasks of which most will be employed to draw on the canvas. For example, DrawCircle() to draw the outline of a circle, FillCircle() to draw a circle filled with a solid color or a fade color.

Drawing Methods

BackGround() BackGround(Color or FadeColor)

Clears the drawing canvas with the specified solid color or fade color. You may also specify your own two color fades as in the third example below.

Eg. BackGround(Red) BackGround (FadeGreen) BackGround (Fade Green To DarkGreen)

See the section on Colors for available colors. This method performs the same function as Clear().

Brush() Brush(color) The brush is used to color text drawn with DrawText() and to fill rectangles, circles, ellipses and polygons.

Cartesian() Cartesian(x,y) Set up the Cartesian co-ordinate plane with the origin at x,y. The x values increase from left to right and y values increase upwards. All drawings and geometric shapes will be drawn relative to the new origin.

Clear() Clear(SolidColor or FadeColor) Clears the drawing canvas with the specified solid color or fade color.

Eg. Clear(Red) Clear(FadeGreen)

You may also specify your own two color fades as follows; Clear(Fade Green To DarkGreen)

See the section on Colors for available colors. This method performs the same function as Background().

Sketch

42 | P a g e

DrawArc() DrawArc(x, y, Width, Height, StartAngle, SweepAngle)

Draws an arc representing a portion of

an ellipse within a rectangle or square.

x,y is the centre of the arc and width and height the size of the rectangle or square. Angles are in degrees, measured clockwise from centre of the rectangle.

drawArc(300,300,200,200,0,90) drawArc(300,300,200,200,0,270)

DrawCircle() DrawCircle(x, y, Radius)

Draw a circle at centre x,y and with the specified radius. The circle is drawn with the current pen.

DrawEllipse() DrawEllipse(x, y, r1, r2) Point x,y is the centre of the ellipse and r1 the major (horizontal) radius, and r2 the minor (vertical) radius of the ellipse.

DrawImage() DrawImage(x,y,file name, scale size)

x,y is the image top left position. FileName is the file name of the image. A scale size of 1 will draw the image in the original size. Less than 1 reduces the image size, greater than 1 increases the image size. Sample Code DrawImage(150,150, C:\users\Images\Shadowfax.jpg, 1)

DrawLine() DrawLine(x1,y1,x2,y2,x3,y3,....)

Draw a line from point (x1,y1) to point (x2,y2) to point (x3,y3) etc. Any

number of x,y pairs can be specified in the DrawLine() method.

DrawPolygon() DrawPolygon(x,y, Radius, Number of Sides) Draw a polygon centred at point (x,y) with radius R and the specified number of sides.

DrawRectangle() DrawRectangle(x,y, width, height)

Draw a rectangle with top left corner at point (x,y) and of size width and height.

DrawText() Drawtext(x,y,Text)

Draw the specified text beginning at point (x,y). The current brush color is used to draw the text.

Sketch

43 | P a g e

DrawTo() DrawtTo(x,y)

Draw from the current position to point (x,y). The current pen color is used to draw the line.

'Jump to start point x=200 y=200 jumpTo(x,y) For i = 1 to 50 'Generate random point x= rndint(50,500) y= rndint(50,500) 'Draw from current position to new position DrawTo(x,y) Next

FillArc() FillArc(x,y, Width, Height, StartAngle, SweepAngle,

Color1 {,Color2})

Fills the interior of an arc or pie section defined by an ellipse drawn within a rectangle. x,y is the top left corner of the arc and width and height specifies the size of the rectangle. Angles are in degrees, measured clockwise from the 3 o’clock position. The Arc is filled with a smooth gradient color beginning with Color1 and ending with Color2. If Color2 is not specified the arc is filled with solid Color1.

FillArc(0,0,300,200,0,350,red,white) Draw the arc beginning at the top left corner of the drawing canvas. The rectangle containing the arc is 300 pixels wide and 200 pixels high. The arc begins at 0 degrees (3 o’clock and sweeps 350 degrees clockwise. The arc is filled with a smooth gradient beginning with red and ending with white.

FillCircle() FillCircle(x,y, Radius, Color1 {,Color2}) x,y is the centre of the circle with the specified radius. The circle is filled with a smooth gradient color beginning with Color1 and ending with Color2. If Color2 is not specified the circle is filled with a solid color, Color1.

Sketch

44 | P a g e

FillEllipse() FillEllipse(x,y,r1,r2, Color1 {,Color2})

x,y is the centre of the ellipse and r1 the major (horizontal) radius, and r2 the minor (vertical) radius. The ellipse

is filled with a solid color if only color1 is specified. If Color1 and Color2 are specified the ellipse is filled with a

horizontal gradient beginning with Color1 and ending with Color2.

FillEllipse(300,300,300,200,red,Yellow)

FillPolygon() FillPolygon(x,y,Radius,Number of Sides,Color1 {,Color2})

x,y is the centre of the polygon with the specified radius. The polygon is filled with a smooth gradient color beginning at the centre with Color1 and ending with Color2 at the edges. If color2 is not specified the polygon is filled with a solid color, color1.

FillRectangle() FillRectangle(x,y, width, height, Color1 {,Color2}) x,y is the top left corner and width and height the size of the rectangle. The rectangle is filled with a smooth gradient color beginning with Color1 and ending with Color2. If color2 is not specified it is filled with a solid color1.

Font() Font(FontName, size, style)

Set the font to use with the DrawText() method. Use the Insert Font command in the Insert menu to display the font dialog window to assist in selecting the required font.

Click Insert Font to display the font dialog. Select a new font, font size and style (bold, italic or underline). Your selections of font, size and style are assembled into the font method and inserted in the editor at the current text position. For example, if you select Calibri, 24 point and bold the following code would be inserted in the editor;

Font(Calibri, 24, Bold)

Sketch

45 | P a g e

Grid() Grid(x,y,width,height,cellWidth,cellHeight) Draw a grid over part of or the whole drawing canvas. x,y is the start point, width and height the extent of the grid and cellWidth and cellHeight the size of each cell. To specify the whole drawing canvas use full for width and height.

Grid(0,0,full,full,cellWidth,cellHeight)

Home() Home()

Set the drawing point to the home position. eg. Home(centre) Other home positions are; TopLeft, TopRight, Bottomleft and BottomRight. Home() assumes the default position 'centre'.

JumpTo() JumpTo(x,y)

Move to a new location on the drawing canvas without drawing.

Move() Move(d)

Move the specified distance, in pixels, in the current direction, as set by the Turn() method, leaving a trace or line. The color and thickness of the line are specified with the Pen() method.

Home() Clear(fadewhite) Pen(black, 1) JumpTo(50,150) Move(100) turn(left) Move(100) turn(left) Move(100) turn(left) Move(100) turn(left) Move(100) turn(left) stop()

Four moves of 100 pixels and four turns left draws a square 100 pixels wide, as shown above.

Sketch

46 | P a g e

Pen() Pen(Color, thickness) Set the color and thickness of the pen. Pen thickness of 1 or 2 is good for drawing.

PenDown() PenDown()

After this method is executed methods like move() will leave a line trail.

PenUp() PenUp()

After this method is executed methods like move() will NOT leave a line trail.

Plot() Plot(function) For Var = StartValue To EndValue Step StepSize {with Grid}

Plot the specified mathematical function. The Plot() method is fully explained here. For example; ' Plot Sin(), Cos() and Tan() '----------------------------------- Pen(black, 2) Plot(10*cos(todegree(x))) for x=-5 to 5 step .1 Pen(red, 2) Plot(10*sin(todegree(x))) for x=-5 to 5 step .1 Pen(blue, 2) Plot(10*tan(todegree(x))) for x=-5 to 5 step .1

Sketch

47 | P a g e

TextShadow() TextShadow(Color, Thickness)

Set text shadow to the specified color and thickness in pixels. If Thickness is 0 shadowing is turned off. The following few lines of code demonstrates text shadowing.

Clear(Red) Brush(White) Font(Arial, 40, Bold) TextShadow(Black,3) DrawText(10,100,Demonstrating Text Shadow)

Produced by the code above.

Turn() Turn(Angle)

Turns the direction of drawing by the Move() method. Angle can be Left or Right or a positive or negative numeric angle in degrees.

Sketch

48 | P a g e

Transformation Methods ResetTransform() ResetTransform() Reset or cancel previous transformation methods.

Rotate() Rotate(angle)

Set rotation angle. Geometric figures such as lines, circles and rectangles will be rotated by the specified angle. eg. Rotate(30)

Scale() Scale(xValue, yValue)

Scale drawing methods by the specified x and y values.

Scale(2,1) DrawRectangle(0,0,100,100)

In the DrawRectangle() method the width and height are both set to 100 pixels. The xValue of 2 in the Scale() method forces the horizontal dimension to be doubled and produce a rectangle whose width is twice the height.

Translate() Translate(x, y) Translate or move x pixels in the horizontal direction and y pixels in the vertical direction. Geometric figures such as lines, circles and rectangles will be translated (moved) by the specified horizontal and vertical values.

eg. Translate(200,300)

For more details about the transformation methods see here.

Sketch

49 | P a g e

Control Methods Beep() Beep(beep1 or beep2) Creates a beep on the computer speaker. Two sounds are possible, either Beep1 or Beep2. Eg. Beep(beep1)

Debug() Debug(text [variable1] text [variable2] ...) Opens the Debug window, after the code is executed and displays the specified variable values. Text is optional. Variables enclosed in square brackets are evaluated and printed in the debug window. The Debug() method is valuable in tracing the values of variables as the program executes. See more here.

eg. Debug(var1=[var1], var2=[var2])

Delay() Delay(number of milliseconds) Delay for the specified number of milliseconds. For example, Delay(1000) will delay program execution for 1000 millisecond or 1 second.

Goto() Goto(Label) Branch unconditionally to the referred line. The line to branch to is designated with a label. A label must begin with a colon character. eg. :JumpHere

Goto() should be used only when absolutely necessary as it may lead to endless loops in your code. It is provided only for convenience.

See example in the box.

Print() Print() Send output to the Output window. See more here.

WriteLine() WriteLine()

Performs the same function as the Print() method.

ShowVariables() ShowVariables() Show list of current variables. Values of all current variables are output to the Debug window as code executes. Similar to the Debug() method but the Debug() method only outputs the specified variables only.

Stop() Stop()

Stops execution of the running code.

Home() Background(white) Pen(green, 1) MyValue = InputBox() if myValue = 1 then goto(label1) elseif myValue = 2 then goto(label2) endif Stop() :label1 'Draw a line circle DrawCircle(300,300,100) Stop() :label2 'Draw a fill circle FillCircle(300,300,100,red,blue) Stop()

Sketch

50 | P a g e

If ( ) Then If (condition) Then

Statement 1

Statement 2

. . . . . .

EndIf Executes one or more lines of code statements if the condition is evaluated to True. Example:

if x=1 then DrawCircle(xcentre,ycentre,100) elseif x=2 then fillRectangle(xcentre, ycentre,200,100,randomColor,RandomColor) elseif x=3 then DrawPolygon(xcentre, ycentre,100,5) else fillcircle(xcentre, ycentre,100,red,white) endif

For . . . Next For <variable = StartValue> To <EndValue> {Step <StepSize>}

Next Executes a block of code repeated from start value to end value. Start value is incremented by the stepsize value, if given, otherwise it is incremented by 1. Example: The For statement iterates 20 times. At the last iteration (i=20) and the DrawText() method is executed to draw the text; Number of random circles 20

For every iteration the position and radius of the circle is determined using the random number generator RndInt. The Pen() method uses the RandomColor generator to select a random color to draw each circle. We delay each iteration for 20 milliseconds just to slow the process down a little. For more on the For … Next loop see here.

For i = 1 to 20 If i=20 then DrawText(20,20,Number of random circles [i]) end if Pen(RandomColor,2) Radius = RndInt(100,200) x = RndInt(100,600) y = RndInt(100,700) DrawCircle(x,y,Radius) Delay(20) Next

Sketch

51 | P a g e

Do Loop Do

Statements Loop { While condition}

The Do loop repeats a block of statements while a Boolean condition is True. The While conditional is optional

and if not included you have an infinite loop. In that situation use the Exit Do statement to exit the loop.

Here is an example.

In this example we use a counter to ensure we execute 10 iterations of the loop. We increment the counter by 1 for every iteration of the Do loop. The value of counter is checked against the value 10 and when it is greater than 10 we exit the loop with Exit Do.

The code above could be better written by using the While condition as follows.

Note that we have removed the If … Then statement. The condition to continue or exit the loop is made in the last line using; Loop While Counter <= 10 Which reads; Do the loop while the value of counter is less than or equal to 10.

The above code was extracted from the demonstration program DemoDoWhile.sketch Check it out to see what the program does!

counter=0 Do r = r+10 DrawCircle(cx,cy,R) counter=counter + 1 If counter > 10 Then Exit Do End If Loop

counter=0 Do r = r+10 DrawCircle(cx,cy,R) counter=counter + 1 Loop while counter <= 10

Sketch

52 | P a g e

Select Case Select Case (test expression)

End Select

Runs one of several groups of statements, depending on the value of the test expression.

For one and two test cases it is possibly easier to use the If Statement. For three or more test cases the Select

Case block is better and easier to understand.

Format:

Select Case <variable>

Case value1

statements

Case value2

statements

Case Else

Else statements

End Select

For more details see here.

Sub Sub <name> (argument list) statements

End Sub A subroutine is a named block of code that can be called as required. The calling statement must ensure that the argument list matches the subroutine argument list. Example:

Sub DrawRandomCircle() x = rndInt(100,500) y = rndInt(100,500) Radius = rndInt(100,200) DrawCircle(x,y,Radius) Next

The subroutine generates the position (x,y) and the radius using the random integer function rndInt(). The two numbers 100,500 is the range for the random number to generate both x and y. The radius is a random number between 100 and 200 pixels. Notice that for this subroutine there is no argument list, but the opening and closing brackets must still be used. The subroutine is called with the statement; DrawRandomCircle() For more details and examples see here.

Sketch

53 | P a g e

Function Function <name> (argument list)

statements Return Value

End Function

A function is a named block of code that can be called as required. The calling statement must ensure that the argument list matches the function argument list. The function is different to the subroutine in one important way; the function returns a value Example:

Function add(n1, n2) Return n1 + n2 End Function

Because the function returns a value, the sum of the two numbers n1 and n2, we call the function by assigning it to a variable.

For example; MySum = add(34, 61)

And after execution of this statement the value of MySum will be 95. For more details and examples see here.

Sketch

54 | P a g e

Colors In Sketch colors are needed when setting the drawing canvas using the Clear() method, when setting the Pen or

Brush with the Pen() and Brush() methods or when drawing filled geometric figures, like FillCircle() or

FillPolygon().

There are many colors to select from in Sketch. There are solid colors and FadeColors. Solid colors are set by

name and there are about 130 named colors. The list of named FadeColors contains fewer colors and is given

below.

Named FadeColors The named fade colors are; FadeColors produce a smooth fade from the named color to some other color. For example;

fadeRed - fades from red to black fadeBlue - fades from blue to dark blue

A color name or fadeColor name can be entered directly into the code editor, if you know the name of the color. To access all available colors and select the required color from a color palette use the insert menu command and then;

choose Insert Color for solid colors or Insert FadeColor for fade colors.

Or use the editor menubar icons for Insert Color, and for insert FadeColor.

The color selection tools provide an easy means of selecting colors and inserting the color name in the code editor. Make sure the cursor is located at the insertion point when selecting colors using these tools.

fadeRed fadeGreen fadeBlue fadeCyan fadeMagenta fadeYellow fadeGray fadeBlack fadeWhite

Sketch

55 | P a g e

FadeColors can also be produced by specifying two solid colors;

For example,

Clear(Fade black to pink) - use the ‘to’ key word to separate the start and end color.

Random Colors To display random colors use the Sketch keyword RandomColor. To display random fade colors use the Sketch keyword FadeRandomColor.

Examples;

Clear(FadeRandomColor) Clear(RandomColor)

Other Examples; Clear(FadeBlue) Clear(LightBlue) fillCircle(100,100,100, RandomColor, RandomColor) TextShadow(RandomColor,3)

RandomColor and FadeRandomColor will automatically pick a color at random from all available colors in Sketch.

Sketch

56 | P a g e

Sample Code Program 1:

The code below uses the rndInt() function to generate random x and y pairs or points on the drawing canvas. The values generated are constrained between 100 and 700 pixels. These points are used by the DrawTo() method to draw lines. The lines are drawn using the current pen which contains a random color. The result is somewhat artistic!!

Output drawn on the Sketch canvas.

'''''''''''''''''''''' ' ArtWork01.sketch '''''''''''''''''''''' Home() Clear(randomcolor) Font(Calibri, 40, Regular) For i = 1 to 200 Pen(randomColor,2) x=rndInt(100,700) y=rndInt(100,700) DrawTo(x,y) next TextShadow(black,1) DrawText(200,40,Random Artwork) Stop()

Sketch

57 | P a g e

Program 2:

In the next program we set the home position to point

300,300, which is the centre of the figure. We clear the

screen to a fade color from white to green. We declare

four variable, sides, length, angle and NumCircles and

set the pen to black and 1 pixel thick.

Next we have two For ... Next loops. The inner loop

draws a single circle by moving and turning for the

specified number of sides, 20 in this example. A small

circle of 20 sides (strictly, it should be a polygon of 20

sides) looks very smooth.

We then delay 20 milliseconds and turn a small amount.

The process of drawing circles and turning is repeated 60

times the value of NumCircles), each time drawing the

circle in a slightly different position. The output is

shown below.

'--------------------------- ' Circle2.sketch '--------------------------- Home(300,300) Clear(fade white to green) sides = 20 length = 800/sides angle = 360/sides NumCircles = 60 Pen(black,1) For j = 1 To numcircles For i = 1 To sides Move(length) Turn(angle) Next Delay(10) Turn(360/NumCircles) Next Stop()

Sketch

58 | P a g e

Program 3:

In this third program we transform the coordinate system from computer coordinates, with origin at the top-left

of the canvas, to Cartesian coordinate, with the origin at some specified point – the default origin in this

example. The default cartesian origin, point (0,0) is at canvas point x=200 and y=vertical centre of canvas.

We give ourselves a yellow pen and setup a For … Next loop For x = startvalue to endvalue

to generate y values of the sine function.

We plot X (the angle value) against Y, the value of sin(X) multiplied by 50 for scaling purposes. The result is a

smooth wave that is the sine function. Other trigonometric functions could be easily plotted by replacing sin(x)

with cos(x) or tan(x).

''''''''''''''''''''''''' 'DemoCartesian.sketch ''''''''''''''''''''''''' Clear(fade lightblue to black) 'Set up cartesian co-ordinate system 'with origin at default 'point (200,canvas centre on Y axis) '-------------------------------------- Cartesian() Pen(yellow,1) startValue = -100 endValue=700 for x = startvalue to endvalue y = 50*sin(x) if x = startvalue then ' do not draw a line ' to first point jumpto(x,y) else drawto(x,y) end if i=i+1 next stop()

Sketch

59 | P a g e

Program 4:

This program demonstrates the use of the transformation methods. We have a loop that draws an ellipse, but

within the loop, for every iteration of the loop, we reset the transformation, translate to point (300,300) which is

the centre of the ellipse and rotate the ellipse by the value of i, the For loop variable. The value of i goes from 0

to 360 in steps of 10. We delay the drawing of each ellipse so we can clearly see each ellipse being drawn.

'-------------------------- ' DemoTransform01.sketch '-------------------------- Clear(fade red to Pink ) Brush(White) DrawText(50,50,Rotating Ellipse) 'Use a for loop to draw ellipse. 'Each ellipse is rotated and translated. 'Each ellipse is rotated by an incrementing amount eg. 0, 10, 20, 30 ... 360 degrees. 'The transform is reset for each iteration otherwise you would accumulate the transform 'and get quite different results. Pen(White,1) For i = 0 To 360 step 10 ResetTransform() Translate(300,300) Rotate(i) DrawEllipse(0,0,100,250) Delay(50) Next Stop()

Sketch

60 | P a g e

Program 5:

This very simple program draws the first six polygons (sides 3 to 8) using the Polygon() method. It then draws a

series of polygons, one inside the other using a For … Next loop with the loop variable being the number of sides

in the polygon.

' Demopolygons.sketch ' ' Use the drawpolygon() method to draw various polygons '-------------------------------------------------------- ' ' Home() Clear(Cornsilk) Pen(green, 2) DrawPolygon(60,60,60,3) DrawPolygon(250,60,60,4) DrawPolygon(450,60,60,5) DrawPolygon(60,200,60,6) DrawPolygon(250,200,60,7) DrawPolygon(450,200,60,8) ' Draw more polygons inside other polygons ' For ... Next loop generates 3-sided to 12-sided ' polygons '--------------------------------------------------------- Pen(red, 1) x = 250 y = 420 radius = 30 For num = 3 To 12 radius = radius + 1.5*num DrawPolygon(x,y,Radius,num) Next Font(Comic Sans MS, 36, Bold & Italic) DrawText(150,560,Polygons) Stop()

Sketch

61 | P a g e

Saving and Opening Code Files Code files are automatically saved every time you run the code(press the Run Button or Press F5).

To begin a new code file or program click the Editor File-New command. This clears the code editor screen and

initialises a new file with the following three lines;

Home() Clear(white) Pen(green, 1)

The second line will clear the canvas to white and the third line sets a green pen to one pixel thickness. You may

edit these lines if you wish to use different colors.

At any time you may save the code file by pressing the editor disk icon or use the File > Save or Save as…

command. The first time you save a code file you will be prompted for a file name.

File Save Location

The default save folder for Sketch code files resides in the user Documents folder under the subfolder named

Sketch\Code.

That is, your PC; Documents\Sketch\Code

Retrieving a Saved File

The last used code file is automatically retrieved and loaded into the code editor whenever you use the Sketch

system. To load a different file use the editor folder icon or the File menu > Open command.

File Names

You may use any name for your Sketch code files but remember to use .sketch as a file name extension. When

you save a file you may leave out the extension and the Sketch system will add to your file name.

For example, say you wish to save your code file using the name Program1. Click the Editor Save icon and in the

File name box enter Program1 and click the Save button. The file is saved as Program1.sketch.

Use only letters, numeric digits and spaces for your file names.

Sketch

62 | P a g e

Printing Code and Canvas Graphics You may print your code file by using the File > Preview Code or File>Print Code commands.

The Preview Code command will display the code in a preview window. From the preview window click the

printer icon to send the code to your printer.

To print the content of the graphic canvas use File>Preview Canvas or File>Print Canvas.

The Preview Canvas command will display the canvas in a preview window from which you may print to your

printer.

Sketch

63 | P a g e

An angle is the spacing or turn between two lines, measured in degrees or radians.

The two lines share a common point where they cross which is called the vertex

If we measure angles in degrees there are 360 degrees in a complete turn.

If we measure angles in radians there are 2π or 6.28 radians (2*3.14) in a complete

turn. This means that there are 360/2π (360/6.28 or 180/ π = 57.32) degrees in a radian.

Positive and Negative Angles

When measuring from a line:

a positive angle goes counter clockwise

a negative angle goes clockwise

In Sketch we can draw angles by;

drawing a line,

turning and then

drawing another line.

Let’s draw a 60 degree angle, using Sketch programming methods;

Setup the canvas color Setup the brush color for text Jump to a start point Draw our 60o angle with 2 moves and a turn Add label to diagram Stop program

This is what our program produces.

Clear(Fade Blue to White) Brush(Black)

Jumpto(400,400)

Move(-200) Turn(60) Move(200)

DrawText(300,300,60 degrees)

Stop()

Sketch

64 | P a g e

Types of angles

Angles less than 90o, exactly 90o, and greater than 90o have been

given their own name as shown in the figure below

We will now write a program in Sketch to reproduce our three angle

types.

The code below draws the three types of angles. Note that the beginning of the right angle and obtuse angle we

use the methods Turn(0) and Turn(0) to undo the previous angle turns and return to a base angle of zero, our

initial starting angle.

Clear(Fade blue to White) Brush(Black) Pen(White,2) jumpto(300,300) 'Draw acute angle Move(-200) Turn(60) Move(200) 'Draw right angle Turn(0) ' undo the previous turn JumpTo(550,300) ' jump to start position Move(-200) ' move in the -x direction 200 pixels Turn(90) ' turn 90 degrees anti clockwise for positive angle Move(200) ' move forward 200 pixels 'Draw obtuse angle Turn(0) JumpTo(400,550) Move(-200) Turn(135) Move(200) 'Draw the labels or captions for the three angles DrawText(180,320,acute) DrawText(400,320,right) DrawText(250,550,obtuse) Stop()

Sketch

65 | P a g e

A triangle is a three sided figure. The sum of the internal angles of a triangle add up

to 180 degrees. Angle a +b + c = 180o

We give names to some triangles. A Triangle with three equal sides and therefore

three equal angles is called an equilateral triangle. The named triangles are listed

below.

We will now write a Sketch program to draw a triangle that is both isosceles and a right triangle. That is, it must

have a 900 angle and since the sum of the three angles is 1800 the other two angles of our triangle must be 45

each.

3 equal sides

3 equal angles 2 equal sides

2 equal angles

no equal sides

no equal angles

One angle is 90

degrees. Indicated

by the small square.

Sketch

66 | P a g e

Advanced Programming Exercise

Develop subroutines to draw equilateral and isosceles triangles.

Solutions are given below, but other variations are possible.

' DemoTriangles ' Draw a Right Triangle '------------------------- Clear(Fade blue to White) Brush(Black) Pen(White,2) 'Draw acute angle JumpTo(500,300) DrawTo(100,300) DrawTo(300,100) DrawTo(500,300) ' to prove that the top angle is 90 degrees ' we will draw a square at that position ' the square needs to be translaped tp point (300,100) ' and rotated by 45 degrees' The square is drawn with a yellow pen Pen(Yellow,1) Translate(300,100) Rotate(45) DrawRectangle(0,0,50,5 0) ' Our little square, with every corner having a 90 degree angle ' seems to fit very well. Change the size of the square to 50 pixels ' so you can see it better. Stop()

Sketch

67 | P a g e

Sub EquilateralTriangle( x , y , Length ) ' Draw Equilateral Triangle ' x,y = starting point (left bottom of triangle) ' BaseLength = Length of Base ' All angles are 60 degrees Turn(0) JumpTo(x,y) Move(Length) Turn(120) Move(Length) Turn(120) Move(Length) End Sub Sub IsoscelesTriangle( x , y , BaseAngle , BaseLength ) ' Draw Isosceles Triangle ' x,y = starting point (left bottom of triangle) ' BaseAngle = angle at base ' BaseLength = Length of Base ' Calculate x,y of apex (top of triangle) xapex = x + baselength/2 yapex = y - (baselength/2)*tan(baseangle) Turn(0) JumpTo(x,y) 'bottom left corner DrawTo(x + baseLength, y) 'draw to bottom right corner DrawTo(Xapex,Yapex) 'draw to apex DrawTo(x,y) 'close triangle End Sub See the file DemoTriangles2.Sketch for the full working demonstration code.

Sketch

68 | P a g e

End of Sketch Documentation