DotPlacer Applet

Scroll down for instructions...

• You will see a set of checkboxes at the top of the applet. Initially, the checkbox labeled "Add" is selected. This means you can Add points to the plane by clicking on the screen. Try it!
• If you click on the "Remove" checkbox, you will be able to delete the points you created. Each time you click on the screen, the point nearest to your mouse cursor will be deleted. Try it!
• If you click on the "Move" checkbox, you will be able to move the points around. Each time you click on the screen, the point nearest your mouse cursor will be moved instantly to the place where you clicked. What's more, if you hold down your mouse button, and move the mouse around, the point will follow your mouse cursor like a magnet. Try it! Or, if you deleted all the points before, Add some more points first, then try it.
• The points initially look like red blobs. This is because of the green check mark next to the word "blobs". If you click on the green check mark, it will turn grey and all the blobs will disappear! Don't worry :- the points are still there, but you can't see them. You have switched blobs "off". If you now click on the grey check mark next to "circles", the points will re-appear, but drawn as red circles.
• You can also draw the points as dots (a single very small dot for each point), or as + signs, or X's. You can even choose several at once, for example, making a star from a + and a X.
• You can change the colours of the blobs or circles, or of any of the mathematical constructions, using the colour control panels. Each item has its own colour control panel. The panel shows 10 colours you can choose from, as well as two buttons that allow you to make the panel brighter or darker. Therefore, you have a choice of 30 colours for each item displayed on the plane.
• To help you place the points more carefully, or just for fun, you can also draw a grid, or a pair of axes, or both on the screen, by clicking the check marks next to the words "grid" or "axes", until the check mark is green. The axes are black, and the grid will be light grey, but you can change that using the colour control panel.
• You can also change the background colour of the plane. Black is nice, but you'll need to change the colour of the axes as well. Then again, perhaps you have some other favourite colour. If you click on the check mark near the word "background", it stays green, of course. You can't switch off the background!
• Finally, just for fun, if you click on the Animate checkbox, the points will slowly crawl around the screen, as if tugged and pulled by a mysterious force...

• Voronoi: This option draws the Voronoi Diagram calculated from the set of points. The Voronoi diagram, also called the Thiessen diagram, is a set of polygons, each one containing exactly one of the given points, and all other points in the plane which are closer to that point than to any of the other given points. It is also known as the Thiessen diagram or the Dirichlet Tessellation.
• Delauney: This option draws the Delauney Triangulation of the points. If you draw the Convex Hull (see below) of the points, there are many ways to divide the convex hull into triangles, that is, to triangulate it. The Delauney triangulation is the triangulation with the smallest total edge length. It is related to the Voronoi diagram by duality, that is, the vertices, edges and faces of the one correspond exactly to the faces, edges and vertices (in that order) of the other.
• Hull: This option draws the Convex Hull of the points. Imagine if the points were nails hammered into a board of wood, and you stretched an elastic band around the outermost nails. What you would see would be the convex hull. The convex hull is the smallest possible convex polygon containing the points.
• Bezier: This option draws a set of Cubic Bezier Curves. It works best when there are 4 points on the screen, but it tries to draw sensible drawings when there are different numbers of curves. The cubic Bezier curve is defined by 2 endpoints P0, P3, and two control points P1 and P2. It starts from P0, leaving in the direction of P1, and eventually arrives at P3, approaching from the direction of P2 (although in general it does not touch the control points).
• Lines: This option draws a set of lines between the points. It is principally useful to help illustrate the Bezier curves.
• Spline: This option draws the cubic spline interpolation of the set of points. This cubic spline curve is made up of a number of cubic polynomials, chosen so that the curve passes through the points, and has continuous first and second derivatives. This implementation also makes the slope equal to zero at the endpoints.
• Lin Int: This option draws a piecewise linear function passing through the points.
• Poly Int: This option draws the interpolating polynomial, that is, the smallest degree polynomial passing through the points. So if there are two points, it draws a line, if three, it draws a parabola, and so on.
• L.Sq Line: This option draws the line of best fit, or the least squares regression line. If y is related by a linear function to x, and the points are obtained by trying to measure y for various values of x, the least squares line gives the best approximation to the true relationship between x and y.
• L.Sq. Quad: This option draws the least squares quadratic. It is very similar in concept to the least squares line, except that it assumes that y is related to x according to a quadratic equation.
• L.Sq. Cubic: This option draws the least squares cubic polynomial. It is very similar in concept to the least squares line and least squares quadratic.
• L.Sq. Quartic: This option draws the least squares quartic. Need I say more?

• Draw the Voronoi and Delauney diagrams together. See how they change together as you move the points around.
• Draw the Bezier and Lines together. See how they change as you move the points around. Can you make a bezier curve with a loop? With a corner?
• Use the grid to line up some points in a straight line. Turn on Polynomial Interpolation. See what happens as the number of points increases beyond 15 or 20 or so. Compare this with the spline interpolation.
• Place some points scattered around a straight line. Turn on the Least Squares Line. Add one more point, far away from the line. See what happens to the line as you move that point around.

There exist books devoted entirely to many of the mathematical constructs given in this applet, as well as excellent books on coding the methods into common programming languages. You may like to explore some of the titles below. I recommend especially the first one.

Warnings and Tips:

• This applet places no upper limit on the number of points that you can add. However, some of the mathematical constructions are very CPU-intensive, especially if you move points around, so that the drawing must be recalculated several times per second. If it seems a bit slow, try removing some points, or some constructions. Or buy a faster computer :-)
• If you want to use an image produced by this applet, why not do a "screen capture"?
  • Under Windows 95, pressing the "Print Screen" button will copy the screen onto the clipboard. ALT-Print Screen will copy just the active window. Then, open Microsoft Paint, and press CTRL-V. This will paste an image of the screen, which you can then edit. You should be able to select any portion you want of the image, and then use "Copy To.." to save the portion as a separate image.
  • Under many flavours of Linux, pressing "Print Screen" will open up a dialog prompting you to save the captured screen image to a file.
  • Would anyone like to provide instructions for doing a "screen capture" under other systems?
• Copyright: All rights are reserved. Do not copy the Applet or load it in other webpages before asking permission. If you wish to use the Applet for teaching purposes, and you cannot use this online version, please email me with information about how you intend to use it, and for how long, then wait for my reply. Thank you. The Applet is intended for the general benefit of humankind. The Applet itself can display a brief copyright notice, and knows which web page it was loaded from.