golf-2d-graphs-prototype

Golf 2D Graphs Prototype

Golf statistics and graph visualisations using the Canvas API.

Adding further visualisations

Any new canvas visualisation can be added as a new static method on the Golf2DGraphs class, prefixed with "render" and passed as an argument to Golf2DGraphs.init. This method can render anything the the canvas context (Golf2DGraphs.ctx).

For elements and coordinates needing to be resized, use the util functions getShapeSize() to set them dynamically based on the window size.

NOTE - Perspective

Overall view perspective is controlled using the constant VIEW_PERPECTIVE, which will be applied to all elements drawn with the transformByPerspective() util.

For elements drawn without perspective (ie arcs and markers), their coordinates must be passed to the getTransformedCoordinates() util, unless their y coordinate is the canvas centre (in the case of flags and balls) so transformation doesn't apply.

Adding trees

Trees are rendered via the Tree class, which utilises 2 images converted to base64 and stored within the treeImages object (in src/images.ts). They are indexed using the name taken from the golf 3D assets repo, which is passed to the Tree class when instantiating, ie med5.

Upon instantiating an optional colour string parameter can be passed for leaf colour.

Images are saved as a black and white desaturated image with the _leaves suffix, and a coloured trunk image _trunk. These are saved as PNG-8 with 4 or 8 colours, and cropped to >=250 pixels width with the trunk centred, before base64 conversion.