Geom Module

The Geom module contains 2D geometry and graphics. These can currently be output to JavaFx canvas, Html canvas and Svg. It also contains other geometries including 3D with associated graphics. Development of targets for 3d graphics is still rudimentary. The 2D and 3D can also be defined in length units such as metres, miles and picometres. There is also 2D geometry and graphics that can be defined in latitudes and longitudes.

2D Geometry and Graphics

Let us start with 2D. At is base we have "2D points and Vectors. Points can be combined to create line segments and can be use to to define curves . Line segments and curves can be combined to create line paths, curve paths and shapes. Line segments, line paths, curves and curve paths can be drawn. Shapes can be drawn, filled and activated, meaning that the user can interact with them using a mouse, track pad or gestures. Shapes includes polygons, mathematically simple shapes such as circles, more complex shape such as stadiums and user created shapes that consist of a sequence of curves, including line segments arcs and cubic beziers.

Currently there are 2 ShapeGen classes, an old one that uses an Array of Doubles and a new one that uses an Array of curveTails.

The Geom module contains

  1. Geometry. Immutable classes for points, lines and shapes. These classes build on the Array based collections from the Util module.
  2. Colour class. A 32 bit integer class that can be built from rgba and named defues.
  3. Graphic primitives. Immutable classes for fills, draws and active elements based on the geometry classes.
  4. Compound Graphics. Again immutable classes. Useful for selection and placing.
  5. Geometric transformations on both the geometric and graphical elements, preserving maximum type information.
  6. An abstract canvas on which to display the graphic elements. Concrete implementations for JavaFx and HtmlCanvas, allowing applications to be created with minimal platform specific code. The abstract canvas api could be implemented on DirectX or OpenGL, but this would require significantly more work than for the ScalaFx canvas or the Html Canvas.
  7. Conversion of Graphic classes into SVG, giving an alternative target and greater flexibility.
  8. Web library. Classes for XML, HTML, CSS and simple JavaScript functions. These pages have been generated using this.
  9. 3D geometry as well as distance unit classes as opposed to scalars for 1D, 2D and 3D. Basic 3D Graphics will be provided, but currently there is no attempt to provide any kind of 3D or physics engine, although a 3D implementation for canvas is entirely possible.
  10. Series of lessons / tutorials in geometry and graphics.
  11. Earth geometry. This is for Earth maps. Allows the manipulation of latitude and longitude allowing free conversion between them and 2D and 3D coordinates.

Polygons

Polygons are used a lot in this module and in modules that use this module. So it is important to establish conventions or defaults. The vertices of an N sided polygon are numbered from 0 to n - 1. With the vertex 0 appearing at 12 o'clock or 00 hundred hours as in the dodecahedron below. Vertex 1 appears at the 1 o'clock position, vertex 2 at the 2 o'clock position etc. The middle of side 0 is at 12.30 or 00.30 hours, the middle of side 1 is at 01.30 hours etc.

Centre V0 V1 V2 V3 V4 V5 V6 V7 V8 V9 V10 V11 Sd0 Sd1 Sd2 Sd3 Sd4 Sd5 Sd6 Sd7 Sd8 Sd9 Sd10 Sd11

I've included the Scala code below both for the above diagram. If you check the html source code for this web page you will see that it is pretty succinct compared with the generated SVG code. The code is in small font and is not type annotated so it is not intended as a tutorial, but just to give an idea of possibilities. It is only the last line that creates the SVG. The rest of the code could be used in an HTML or a JavaFx canvas.

val width: Int = 250
val polyColour: Colour = DarkGreen
val dodec1: DoDeclign = DoDeclign(width)
val dodec2 = dodec1.draw(polyColour)
val circ = Circle(width * 2).draw()
val verts = dodec1.vertsIFlatMap{ (pt, i) => pt.textArrowToward(Pt2Z, "V" + i.str) }
val sides = dodec1.sidesIFlatMap{ (sd, i) => sd.midPt.textArrowAwayFrom(Pt2Z, "Sd" + i.str, colour = polyColour) }
val cen = Pt2Z.textAt("Centre")
val clock = RArr(dodec2, circ, cen) ++ verts ++ sides
val svg1 = HtmlSvg(dodec1.boundingRect.addMargin(svgMargin), clock, RArr(CentreBlockAtt))

If there is no vertex at the 12 o'clock / 00 hundred hours postion as in the rectangle below vertex 0 is the first vertex clockwise of 12 o'clock. The other vertices then follow clockwise. The last vertex being immediately anti clockwise of 12 o'clock.

Centre V0 x = 200; y = 125 V1 x = 200; y = -125 V2 x = -200; y = -125 V3 x = -200; y = 125 Sd0 Sd1 Sd2 Sd3

The positions of the vertices have been shown above. Note that the positions are speciified relative .

Circles and Ellipses

Line Paths

Operator naming conventions for sequences and line paths.

XML, HTML and CSS

The package consists of a number of types of objects
  1. XHml elements Xml and Html elements with their opening and closing tags and HTML void elements with just an opening tag.
  2. XAtt attributes XML and HTML attributes. They are not called XHAtts, because in this regard HTML is consistent with XML and there is no need to distinguish between XML and HTML attributes, as with elements, where XML and HTML has different rules.
  3. CSS CSS rules and declarations
  4. SVG Scalable Vector Graphics. This is just a form of XML.
  5. XCon XML and HTML content This consists of XConElems and plain Strings. XConElems includes XML and HTML elements but also includes CSS rules as they can be used as content in an HTML style element. XCon can be divided into 3 types, depending on how it is formatted as HTML code. Note this is different to how it is formatted in the browser.
    • Inline elements Includes plain Strings and spans. The elements continue on the same line following another inline element. White space distinctions between new lines, tabs and spaces in the element are ignored and the white space is reformatted into single space and new lines to fit the indentations and line lengths of the XML / HTML / CSS output.
    • OwnLine elements Includes list items. These element may be encapsulated on a single line, but may not share a line with sibling content. They may however be enclosed within parent tags on a single line, if it is the only child content of its parent element.
    • MultiLine elements Includes Lists, Body, Section. These elements opening and closing tags must appear on their own lines, separate from both the parent element tags and their own content.