WinGeom Basics - Geometric drawing for the web

RoderickT - March 2009

Wingeom - Basics

Page : 1

Wingeom - Basicsfor preparing geometric diagrams for the web

I am developing a web site explaining various mathematical processes that interest me. As partof this exercise I need to draw many geometric diagrams,and I tried several tools, including

· Open Office Draw· Serif DrawPlus· Paint.Net· Google Sketchup

But in the end decided to use Wingeom.

Wingeom

This fascinating program was developed by a teacher (R D Parris I think) at Phillips ExeterAcademy, in Exeter, NH USA and appears to still be active. You can download for free from

http://math.exeter.edu/rparris/wingeom.html

There are other related programs that are also distributed free under the name ofPeanuts Software. I expect that I will also be using their Winplot program.

Reason for document

I often find I can spend some hours of work determining how to do some action or other andwhen I want to do it again some week or months later, cannot remember how I did it and haveto spend the same time figuring it out again.

So now I have developed the practise of recording things as I do them, this may take the form of

· Taking a screen shot· Entry in blog· Page on web site· PDF document

The above is in ascending order of difficulty and/or size.

This is the first document I have written for Wingeom and will add to it as I learn more in oneof the above four ways, and link them all together through my Maths Tools for WebDevelopment Blog. It is basically an annotated collection of screen shots.

http://math.exeter.edu/rparris/wingeom.html

http://math.exeter.edu/rparris/

http://serif-webplus-pageplus.blogspot.com/

http://serif-webplus-pageplus.blogspot.

http://maths-tools.blogspot.com/


Wingeom - Basics

Page : 2

Wingeom has a two phase startup.

First screen contains a tip, which I read and thenclose.

You need to select either 2 or 3 dimensionaldrawing.

To date I have not needed 3D, so selectWindows -> 2D.

Note: In typical Windows fashion if there is ashortcut key it is shown in the menu. In this caseit is F2

This is the standard work window of Wingeom. It can be resized in the usual windowsmethod by dragging its side or corners.


Wingeom - Basics

Page : 3

In the process of drawing you often need to switch to various modes. Thiscan be achieved by selecting the Btns menu, but I prefer to have thismenu open as a toolbox which can be achieved by selecting the Toolbaroption in the Btns menu.

I then drag this toolbar just off to the right of the Wingeom window.

The x,y axes can be turned onand off.


Wingeom - Basics

Page : 4

My screen layout is now as above.

Select Point and then Coordinates to display followingwindow where you can enter the coordinates of pointsyou want to create.


Wingeom - Basics

Page : 5

You can also add pints by having Btns in Segments mode and clicking right hand button.

To connect the points A,B,C with lineswith arrows to show general directionsselect Line - Rays and add them to thelist in the box provided.

Alternatively set Btns to Rays andconnect by dragging mouse with leftbutton clicked from D to A, D to B andD to C


Wingeom - Basics

Page : 6

To add arrows to these rays selectEdit > Highlights > Markings

In the markings box click the down arrow at thebottom left and select ray/vector, type in the andpoints of the ray in the “Where” box in the lineabove.

In my case I did not want solid arrows. To changethis deselect the “Other” menu and deselect “Solidarrowheads..” see next page.


Wingeom - Basics

Page : 7

To rearrange the diagram so that it concentrates onthe important pieces select View > Window.

The result is shown in the window below. It doesnot look a lot different from the previous onebecause I cropped the screenshot to fit the page, inits entirety it has a lot of waste space in the lowerhalf.

Note Alt-W is the shortcut key.


Wingeom - Basics

Page : 8

If you want to change the diagram, in this example I have moved point Cup and to the left. To do this first select “drag vertices” in the BtnsToolbar.

This so far is a very simple drawing and the power of this command isshown in more advanced drawings. It maintains all the links you have set,which in our simple drawing is just the ray from D to C.


Wingeom - Basics

Page : 9

Add point E on DC

Select Point > on Segment

In the “new point” identify the segment CD and specify1/5 of the way alongsegment from C towards D.

Alternatively just confirm that Btns isset to Segment and right click wherethe new point is to be, and as long asit is close to the segment it shouldsnap onto it.


Wingeom - Basics

Page : 10

Draw Perpendicular

Select Line > Perpendiculars > Altitudes

And in the “draw altitude “ box identify the line that itis to be perpendicular to, and the point through whichit is to pass.


Wingeom - Basics

Page : 11

Change Point Letter

Set Btns to “text edit”

Place mouse over the letter to bechanged and right click and in the

“new label..” box type the requiredletter.

To move the letter to anotherposition click left button and drag.

Remove axes

Select Window > View > Axes to switch axes onand off.

Short cut key is Ctrl+A

The following shows drawing after axes removed, various letters changed and additional perpendicularsare added.


Wingeom - Basics

Page : 12

Intersection Point

Select Line > Coordinates > Line-Line

In the “intersection” box type the lines that cause theintersection.

Alternatively just use right button when over theintersection


Wingeom - Basics

Page : 13

Line attributesSelect Edit > Highlites > Line Attributes

This opens the “line attributes” and the colours boxes.

Type in the lines to change and select thickness and colour and click onapply.

Note I discovered that if thickness is greater than one then solid is theonly line style that is used, even though others may be specified. Isuspect this is a bug.

MistakeNow this was not the result I washoping for, I did not want the wholeray changed but rather just thesegments ON,OD and OP.

To rectify this you need to delete therays and build the segments first, asshown in following pages.


Wingeom - Basics

Page : 14

Delete line

Select Edit > Delete > Line and in the “delete line” box identify the lines to be deleted. I deleted ODwhich removed the whole ray.

This time build segment first, select Line > Segments, and rebuilt segments OD and OM by usingLine > Segment and typing in names in “segment” box. Finally rebuild ray and add arrow as before.

Repeat for OB and OC.


Wingeom - Basics

Page : 15

Line attributes are now restricted to the required segments.

Rebuild the rays.


Wingeom - Basics

Page : 16

Result after rays built and line attributes are modified. Note that OM is dashed.

Save

Don’t forget to save regularly.


Wingeom - Basics

Page : 17

Background Colour

Select Other > Colors > Background

And then select colour from colour box. I selected white.


Wingeom - Basics

Page : 18

FontsI wanted a larger font for the letters so that when Ireduced size of final image suitable for web page theletters would not become hard to read.

Select

Edit > Labels > Font

And then make appropriate choices in the font box.

Note. Alternatively you can turn off labels whenfinished and rewrite them after the drawing has beenresized in an image manipulation program, likeFaststone Image Viewer, Paint.Net, PhotoShop etc.

To do this select

Edit > Labels >letters on/off

Or use shortcut key Alt+L


Wingeom - Basics

Page : 19

Adding angle arcs

In mathematical diagrams one often needs to markangles with a small arc near their vertices. This isachieved by selecting

Edit > Highlights > Markings

And then in the “Markings” box click on the downarrow for the type and select “angle arc”. Type in theidentity of the angles, one at a time (you do not needto prefix with angle sign < or use upper case) andclick on mark.


Wingeom - Basics

Page : 20

Free text

Text can be entered anywhere on the drawing.Make sure that Btns is set to text, right clickwhere you want the text to be and the “edit text”box will appear where you can type in therequired text.

Font

By clicking on the Font box within the “edit text”window you can choose font and set details.

The settings are remembered for the next time youenter text.

I used this to enter x and y for the angle arcs.


Wingeom - Basics

Page : 21

Adjusting Highlights

As an example to change arc size. Select Edit > Highlights > Arc radiusand set arc radius to required size.


Wingeom - Basics

Page : 22

MeasurementsAlthough I do not use it in this example you can make various measurements by selecting Meas tab andthen entering the id of what you want to measure. The results will be displayed on the drawing top left,but you can drag this to another position if you wish.

Note I have found that unlike all the other boxes we have investigated you have to use the correct caseSo <hon is not the same as <HON.


Wingeom - Basics

Page : 23

Extending lines

I wanted to extend the line OM to the left, just for visual effect.

Select Line > Extensions and then identify line in the “extensions on/off”box.


Wingeom - Basics

Page : 24

Perpendicular bracket

It aids understanding to indicate perpendicular lines.

This is achieved by selecting Edit > Highlights > Markings

And in the markings box click down arrow for typeand select “perp bracket”.

Identify angle in the where box and click on mark.


Wingeom - Basics

Page : 25

Final drawing is shown below.

Metafile

As well as saving drawing in its ownWingeom format you can save as a anemf file (Extended Windows MetafileFormat).

This can be opened directly by otherprograms such as Open Office and MSOffice.

Note. The Wingeom saves files asxxx.wg2 and wg2 is also used by IBM-Lotus for spread sheet files and are ofcourse not compatible


Wingeom - Basics

Page : 26

Preparing for web page

I use PNG (Portable Network Graphic) files for my web diagrams.To convert to this type I copy final drawing as a bit map and type itinto an image manipulation program, such as Paint.Net, Photoshopor Serif PhotoPlus.

Before copying I make sure the High Resolution is turned on.

Whilst the image manipulation program I may take the opportunityto colour fill any parts of the image to help understanding. There arefacilities to do this in Wuingeom but I find it quicker to do itafterwards.

In Wingeom you select Edit > Highlights > Fill region and type inthe are identifiers.

Finally I may resize further to make suitable size for online use,making sure that the reduction does not effect legibility.


Wingeom - Basics

Page : 27

Final Result

After adding some colour to the angle arcs in PhotoPlus to clarify that the upper x refers to angle KPNand not just KPR.

You can see the drawing in my Roderickt - Maths web pages by clicking here.

http://roderickt.uuuq.com/page16.html

http://roderickt.uuuq.com/page16.html

WinGeom Basics - Geometric drawing for the web

Documents

Transcript of WinGeom Basics - Geometric drawing for the web