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

Geometry. Immutable classes for points, lines and shapes. These classes build on the Array based collections from the Util module.
Colour class. A 32 bit integer class that can be built from rgba and named defues.
Graphic primitives. Immutable classes for fills, draws and active elements based on the geometry classes.
Compound Graphics. Again immutable classes. Useful for selection and placing.
Geometric transformations on both the geometric and graphical elements, preserving maximum type information.
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.
Conversion of Graphic classes into SVG, giving an alternative target and greater flexibility.
Web library. Classes for XML, HTML, CSS and simple JavaScript functions. These pages have been generated using this.
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.
Series of lessons / tutorials in geometry and graphics.
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.

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. This 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.

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.

++ append This is a standard scala operator name for appending the adding the operand sequence to the end of this sequence. Example intArr1 ++ intArr2 returns a new IntArr . For the RArr class type widening is allowed. So catsRArr ++ dogsRArr dogsRArr might return a new RArr[Animal].
++ append Add the operand line path to the end of this line path returning a new line path.
++ append Add the operand line path to this line path returning a new line path.
|++| appendToPolygon Adds a line path to the end of this line path and closes it into a Polygon.
%: prepend This is a non standard scala operator name for prepending an element to a sequence The '%' character has been chosen because of left right operator precedence, it makes for better combination with the append element method
%: prepend Adds a point to the beginning of a line path, returning a new line path
%<: prependReverse Adds a point to the beginning of the reverse of a line path, returning a new line path
+% appendElem Adds an element to the end of this sequence. returning a new sequence.
+% appendPt Adds an point to the end of this line path.
|+%| appendPt Adds an point to the end of this line path and close it into a Polygon.
+-+ appendTail Add the tail of the operand to the end of this line path returning a new line path. The - between the + characters indicates to drop the first point of the operand.
|+-+| appendTailToPolygon Add the tail of the operand to the end of this line path closing to a polygon. The - between the + characters indicates to drop the first point of the operand.
++< appendReverse Append the reverse of a line path to a line path returning a new line path. The < after the ++ indicates that it is the operand that is reversed
|++<| appendReverseToPolygon Append the reverse of a line path to a line path closing it into a polygon. The < character after the ++ indicates that it is the operand to be reversed.
+<+ reverseAppend Reverse this line path and append the operand line path, returning a new line path. The < between the + characters indicates that it is this line segment that is reversed
|+<+| reverseAppendToPolygon Reverse this line path and then append the operand line path, closing it into a polygon. The < character between the + characters indicates that it is this the first line path that is reversed.
+<+< reverseAppendReverse Reverse this line path and append the reverse of the operand line path, returning a new line path. The < between the + characters indicates that this line segement is reversed. The < character after the 2nd + charcters indicates that the operand is also reversed

A1 Circles 1
A2 Squares
A3 Circles 2
A4 Polygons
A5 Rotation
A6 Arcs 1
A7 Arcs 2
A8 Shape creation
A9 Shapes Reproduction
A10 Beziers
A11 Diagram
A12 Reflection
A13 Hexagon enumeration
A14 Tiling
A15 Ellipses 1
A16 Ellipses 2
A17 Inner Rect
A18 Polygon Sides
A19 Text

B1 Timer Lesson
B2 Moving Rectangle
B3 Moving Rectangles 2

C1 Mouse click Lesson
C2 Pointer position Lesson
C3 Pointer targeting Lesson
C4 Targeting Ellipse Lesson
C5 Pointer Rects Lesson
C6 Targeting overlap Lesson
C7 Key up
C8 Bezier change
C9 Pointer moving 2

D1 RSON Lesson 1
D2 RSON Lesson 2
D3 RSON Lesson 3
D4 RSON Lesson 4
D5 RSON Lesson 5

E1 Turn app 1
E2 Unknown purpose

XML, HTML and CSS

The package consists of a number of types of objects

XHml elements Xml and Html elements with their opening and closing tags and HTML void elements with just an opening tag.
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.
CSS CSS rules and declarations
SVG Scalable Vector Graphics. This is just a form of XML.
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.