canvas


Canvas Module

Canvas for drawing drawing simple 2D graphics, including features simple user-interaction

Types

Type Description

Event

Represents one of the events: Key, DownArrow, UpArrow, LeftArrow, RightArow, Return, TimerTick, MouseButtonDown, MouseButtonUp, and MouseMotion.

Font

A font defined by a font name and its size in dots-per-inch (dpi).

FontFamily

A collection of font variations specified by the family name.

Picture

A picture.

Position

PrimitiveTree

A tree of graphics primitives, define as a tree of graphics primitives.

color

A color define as 4 values red, green, blue, and alpha.

Functions and values

Function or value Description

Bottom

Full Usage: Bottom

Returns: Position

An alignh position-value for aligning boxes along their bottom edge.

Returns: Position

Center

Full Usage: Center

Returns: Position

An alignh and alignv position-value for aligning boxes along their center.

Returns: Position

Left

Full Usage: Left

Returns: Position

An alignv position-value for aligning boxes along their left edge.

Returns: Position

Right

Full Usage: Right

Returns: Position

An alignv position-value for aligning boxes along their right edge.

Returns: Position

Top

Full Usage: Top

Returns: Position

An alignh position-value for aligning boxes along their top edge.

Returns: Position

alignH pic1 pos pic2

Full Usage: alignH pic1 pos pic2

Parameters:
    pic1 : PrimitiveTree - The first graphic primitive tree to be aligned.
    pos : Position - One of Top, Center, or Bottom, defining how pic1 and pic2 are to be aligned.
    pic2 : PrimitiveTree - The second graphic primitive tree to be aligned.

Returns: PrimitiveTree A new graphic primitive tree object representing the two graphic primitive trees aligned horizontally at the specified position.

Aligns two graphic primitive trees horizontally at a specific position.

The alignH function joins two trees where pic2 is translated such that its boundary box's left edge is aligned with pic1's boundary box's right edge. When pos=Bottom then the boxes are align along their edge with lowest x-value, i.e., closest to the top edge of the image. When pos=Center then pic2's midpoint in the y-direction is aligned with pic1's midpoint in the y-direction. When pos=Top then pic2's boundary box's highest x-value is aligned with pic1's boundary box's highest x-value. The following code-example:

    let box1 = rectangle goldenrod 1.0 20.0 80.0
    let box2 = rectangle yellow 1.0 30.0 30.0
    alignH box1 Top box2
val box1: obj
val box2: obj
represents a new tree of a box from (0,0) to (20,80) in goldenrod and another (20,50) to (50,80)in yellow. The bounding box is the enclosing box in this case from (0,0) to (50,80).

pic1 : PrimitiveTree

The first graphic primitive tree to be aligned.

pos : Position

One of Top, Center, or Bottom, defining how pic1 and pic2 are to be aligned.

pic2 : PrimitiveTree

The second graphic primitive tree to be aligned.

Returns: PrimitiveTree

A new graphic primitive tree object representing the two graphic primitive trees aligned horizontally at the specified position.

alignV pic1 pos pic2

Full Usage: alignV pic1 pos pic2

Parameters:
    pic1 : PrimitiveTree - The first graphic primitive tree to be aligned.
    pos : Position - One of Left, Center, or Right, defining how pic1 and pic2 are to be aligned.
    pic2 : PrimitiveTree - The second graphic primitive tree to be aligned.

Returns: PrimitiveTree A new graphic primitive tree object representing the two graphic primitive trees aligned vertically at the specified position.

Aligns two graphic primitive trees vertically at a specific position.

The alignV function joins two trees where pic2 is translated such that its boundary box's bottom edge is aligned with pic1's boundary box's top edge. When pos=Left then the boxes are align along their edge with lowest y-value, i.e., closest to the left edge of the image. When pos=Center then pic2's midpoint in the x-direction is aligned with pic1's midpoint in the x-direction. When pos=Right then pic2's boundary box's highest y-value is aligned with pic1's boundary box's highest y-value. The following code-example:

    let box1 = rectangle goldenrod 1.0 20.0 80.0
    let box2 = rectangle yellow 1.0 30.0 30.0
    alignV box1 Right box2
val box1: obj
val box2: obj
represents a new tree of a box from (0,0) to (20,80) in goldenrod and another (-10,80) to (20,100)in yellow. The bounding box is the enclosing box in this case from (-10,0) to (20,100).

pic1 : PrimitiveTree

The first graphic primitive tree to be aligned.

pos : Position

One of Left, Center, or Right, defining how pic1 and pic2 are to be aligned.

pic2 : PrimitiveTree

The second graphic primitive tree to be aligned.

Returns: PrimitiveTree

A new graphic primitive tree object representing the two graphic primitive trees aligned vertically at the specified position.

animateToFile width height frameDelay repeatCount filePath drawLst

Full Usage: animateToFile width height frameDelay repeatCount filePath drawLst

Parameters:
    width : int - The width of each frame in pixels.
    height : int
    frameDelay : int - The delay between frames in the animation in milliseconds.
    repeatCount : int - The number of times the animation should repeat. Use 0 for infinite looping.
    filePath : string - The file path where the animated GIF will be saved.
    drawLst : Picture list - The list of picture objects to be drawn as frames in the animation.

Draws a list of pictures generated by make or explain to an animated GIF file with the specified width, height, frame delay, and repeat count.

The functions renders a list of Pictures to a file as an animated gif. For example,

    let w,h = 256,256
    let bck = filledRectangle black w h
    let tree (i:float) : PrimitiveTree =
       onto (ellipse darkCyan 2.0 85.0 64.0 |> translate i i) bck
    let sequence = List.map (fun j -> make (tree j)) [0.0 .. 128.0]
    let frameDelay = 10
    let repeatCount = 5
    animateToFile 256 256 frameDelay repeatCount "sample.gif" sequence
val w: int
val h: int
val bck: obj
val tree: i: float -> 'a
val i: float
Multiple items
val float: value: 'T -> float (requires member op_Explicit)

--------------------
type float = System.Double

--------------------
type float<'Measure> = float
val sequence: obj list
Multiple items
module List from Microsoft.FSharp.Collections

--------------------
type List<'T> = | op_Nil | op_ColonColon of Head: 'T * Tail: 'T list interface IReadOnlyList<'T> interface IReadOnlyCollection<'T> interface IEnumerable interface IEnumerable<'T> member GetReverseIndex: rank: int * offset: int -> int member GetSlice: startIndex: int option * endIndex: int option -> 'T list static member Cons: head: 'T * tail: 'T list -> 'T list member Head: 'T member IsEmpty: bool member Item: index: int -> 'T with get ...
val map: mapping: ('T -> 'U) -> list: 'T list -> 'U list
val j: float
val frameDelay: int
val repeatCount: int
makes a list of pictures of a primitive tree translated for a number of steps and saves the sequence as an animated gif. In the example, the onto command is used to ensure that each frame is shown on a black background.

width : int

The width of each frame in pixels.

height : int
frameDelay : int

The delay between frames in the animation in milliseconds.

repeatCount : int

The number of times the animation should repeat. Use 0 for infinite looping.

filePath : string

The file path where the animated GIF will be saved.

drawLst : Picture list

The list of picture objects to be drawn as frames in the animation.

arc c sw center rx ry start sweep

Full Usage: arc c sw center rx ry start sweep

Parameters:
    c : color - The color of the arc.
    sw : float - The stroke width of the arc.
    center : Point - The center point of the ellipse.
    rx : float - The horizontal radius of the ellipse.
    ry : float - The vertical radius of the ellipse.
    start : float - The starting angle of the arc in degrees.
    sweep : float - The sweep angle of the arc in degrees.

Returns: PrimitiveTree A primitive tree representing the arc.

Draws an elliptical arc.

The arc function represents part of an ellipse. It takes a color, a line width, a center (rx, ry), a start angle in radians, and the span of degrees in radians to draw from start. The drawing direction takes it origin along the x-axis and increases in angle clockwise. Example of code generating an arc tree is:

    let col = goldenrod
    let strokeWidth = 3.0
    arc col strokeWidth (128.0,128.0) 64.0 32.0 (-45.0*System.Math.PI/180.0) System.Math.PI
val col: obj
val strokeWidth: float
namespace System
type Math = static member Abs: value: decimal -> decimal + 7 overloads static member Acos: d: float -> float static member Acosh: d: float -> float static member Asin: d: float -> float static member Asinh: d: float -> float static member Atan: d: float -> float static member Atan2: y: float * x: float -> float static member Atanh: d: float -> float static member BigMul: a: int * b: int -> int64 + 2 overloads static member BitDecrement: x: float -> float ...
<summary>Provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions.</summary>
field System.Math.PI: float = 3.14159265359
which generates a PrimitiveTree representing an arc curve from -45 degrees to 135 degrees with color goldenred and width 3.0. The bounding box is the same as the full ellipse. This may change in the future.

c : color

The color of the arc.

sw : float

The stroke width of the arc.

center : Point

The center point of the ellipse.

rx : float

The horizontal radius of the ellipse.

ry : float

The vertical radius of the ellipse.

start : float

The starting angle of the arc in degrees.

sweep : float

The sweep angle of the arc in degrees.

Returns: PrimitiveTree

A primitive tree representing the arc.

cubicBezier c sw point1 point2 point3 point4

Full Usage: cubicBezier c sw point1 point2 point3 point4

Parameters:
    c : color - The color of the curve.
    sw : float - The stroke width of the curve.
    point1 : Point - The first control point of the curve.
    point2 : Point - The second control point of the curve.
    point3 : Point - The third control point of the curve.
    point4 : Point - The fourth control point of the curve.

Returns: PrimitiveTree A primitive tree representing the cubic Bezier curve.

Draws a cubic Bezier curve.

The cubic bezier function represents a cubic bezier curve which takes 4 points, a color, and stroke width. The curve starts and ends in point index 0 and 3, and the line from index 0 to 1 gives the derivative at 0, while the line from index 2 to 3 gives the derivative at 3. Example of code generating an arc tree is:

    let col = ivory
    let strokeWidth = 3.0
    cubicBezier col strokeWidth (10.0,10.0) (12.0,10.0) (56.0,60.0) (70.0,70.0)
val col: obj
val strokeWidth: float
which generates a PrimitiveTree representing a bezier curve from (10.0,10.0) to (70.0, 70.0). The bounding box is the rectangle spanning the minimum and maximum values of all the x- and y-coordinates in the 4 points.

c : color

The color of the curve.

sw : float

The stroke width of the curve.

point1 : Point

The first control point of the curve.

point2 : Point

The second control point of the curve.

point3 : Point

The third control point of the curve.

point4 : Point

The fourth control point of the curve.

Returns: PrimitiveTree

A primitive tree representing the cubic Bezier curve.

ellipse c sw rx ry

Full Usage: ellipse c sw rx ry

Parameters:
    c : color - The color of the ellipse.
    sw : float - The stroke width of the ellipse.
    rx : float - The horizontal radius of the ellipse.
    ry : float - The vertical radius of the ellipse.

Returns: PrimitiveTree A new graphic primitive tree object representing the ellipse.

Creates an ellipse with the specified radii and stroke width.

The ellipse function represents an ellipse with center in 0,0, radius rx and ry along the x- and y-axis, and a color and strokeWidth. Example of code generating an ellipse tree is:

    let col = ivory
    let strokeWidth = 3.0
    ellipse col strokeWidth 10.0 20.0
val col: obj
val strokeWidth: float
which generates a PrimitiveTree representing an ellipse of radii 10.0 and 20.0 with a line drawn in ivory and which is 3 wide. The bounding box is the smallest rectangle enclosing the ellipse, which in this case is (-10,-20) to (10.20).

c : color

The color of the ellipse.

sw : float

The stroke width of the ellipse.

rx : float

The horizontal radius of the ellipse.

ry : float

The vertical radius of the ellipse.

Returns: PrimitiveTree

A new graphic primitive tree object representing the ellipse.

emptyTree

Full Usage: emptyTree

Returns: PrimitiveTree

An empty graphics primitive tree.

Returns: PrimitiveTree

explain p

Full Usage: explain p

Parameters:
    p : PrimitiveTree - The graphic primitive tree object to be explained.

Returns: Picture A new Picture object representing a visual explanation of the given graphic primitive tree.

Provides a visual explanation of a graphic primitive tree object.

The functions make and explain both converts a primitive tree to a picture, which can be rendered. For example,

    let tree = ellipse darkCyan 2.0 85.0 64.0 |> translate 128.0 128.0
    let picture = explain tree
    renderToFile 256 256 "sample.tif" picture
val tree: obj
val picture: obj
makes a primitive tree consisting of a single ellipse, converts the tree to Picture and renders it to the file sample.tif as a tif-file. In contrast to make, explain adds bounding boxes of the graphics primitives in random colors. This is useful for debugging composition expressions.

p : PrimitiveTree

The graphic primitive tree object to be explained.

Returns: Picture

A new Picture object representing a visual explanation of the given graphic primitive tree.

filledArc c center rx ry start sweep

Full Usage: filledArc c center rx ry start sweep

Parameters:
    c : color - The fill color of the arc.
    center : Point - The center point of the ellipse.
    rx : float - The horizontal radius of the ellipse.
    ry : float - The vertical radius of the ellipse.
    start : float - The starting angle of the arc in degrees.
    sweep : float - The sweep angle of the arc in degrees.

Returns: PrimitiveTree A primitive tree representing the filled arc.

Draws a filled elliptical arc.

The arc function represents part of a filled ellipse. It takes a color, a center (rx, ry), a start angle in radians, and the span of degrees in radians to draw from start. The drawing direction takes it origin along the x-axis and increases in angle clockwise. Example of code generating an arc tree is:

    let col = goldenrod
    let strokeWidth = 3.0
    filledArc col (128.0,128.0) 64.0 32.0 (-45.0*System.Math.PI/180.0) System.Math.PI
val col: obj
val strokeWidth: float
namespace System
type Math = static member Abs: value: decimal -> decimal + 7 overloads static member Acos: d: float -> float static member Acosh: d: float -> float static member Asin: d: float -> float static member Asinh: d: float -> float static member Atan: d: float -> float static member Atan2: y: float * x: float -> float static member Atanh: d: float -> float static member BigMul: a: int * b: int -> int64 + 2 overloads static member BitDecrement: x: float -> float ...
<summary>Provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions.</summary>
field System.Math.PI: float = 3.14159265359
which generates a PrimitiveTree representing an filled arc from -45 degrees to 135 degrees. The bounding box is the same as the full ellipse. This may change in the future.

c : color

The fill color of the arc.

center : Point

The center point of the ellipse.

rx : float

The horizontal radius of the ellipse.

ry : float

The vertical radius of the ellipse.

start : float

The starting angle of the arc in degrees.

sweep : float

The sweep angle of the arc in degrees.

Returns: PrimitiveTree

A primitive tree representing the filled arc.

filledCubicBezier c point1 point2 point3 point4

Full Usage: filledCubicBezier c point1 point2 point3 point4

Parameters:
    c : color - The fill color of the curve.
    point1 : Point - The first control point of the curve.
    point2 : Point - The second control point of the curve.
    point3 : Point - The third control point of the curve.
    point4 : Point - The fourth control point of the curve.

Returns: PrimitiveTree A primitive tree representing the filled cubic Bezier curve.

Draws a filled cubic Bezier curve.

The filled cubic bezier function represents a cubic bezier curve which takes 4 points, and a color. The curve starts and ends in point index 0 and 3, and the line from index 0 to 1 gives the derivative at 0, while the line from index 2 to 3 gives the derivative at 3. The fill area is between the curve and the straight line between point 0 and 3. Example of code generating an arc tree is:

    let col = ivory
    filledCubicBezier col (10.0,10.0) (12.0,10.0) (56.0,60.0) (70.0,70.0)
val col: obj
which generates a PrimitiveTree representing a filled bezier curve from (10.0,10.0) to (70.0, 70.0). The bounding box is the rectangle spanning the minimum and maximum values of all the x- and y-coordinates in the 4 points.

c : color

The fill color of the curve.

point1 : Point

The first control point of the curve.

point2 : Point

The second control point of the curve.

point3 : Point

The third control point of the curve.

point4 : Point

The fourth control point of the curve.

Returns: PrimitiveTree

A primitive tree representing the filled cubic Bezier curve.

filledEllipse c rx ry

Full Usage: filledEllipse c rx ry

Parameters:
    c : color - The color of the ellipse.
    rx : float - The horizontal radius of the ellipse.
    ry : float - The vertical radius of the ellipse.

Returns: PrimitiveTree A new graphic primitive tree object representing the filled ellipse.

Creates a filled ellipse with the specified radii.

The filled ellipse function represents an ellipse with center in 0,0, radius rx and ry along the x- and y-axis, and a color and strokeWidth. Example of code generating a filled ellipse tree is:

    let col = ivory
    filledEllipse ivory 10.0 20.0
val col: obj
which generates a PrimitiveTree representing an filled ellipse of radii 10.0 and 20.0 in ivory. The bounding box is the smallest rectangle enclosing the ellipse, which in this case is (-10,-20) to (10.20).

c : color

The color of the ellipse.

rx : float

The horizontal radius of the ellipse.

ry : float

The vertical radius of the ellipse.

Returns: PrimitiveTree

A new graphic primitive tree object representing the filled ellipse.

filledPolygon c lst

Full Usage: filledPolygon c lst

Parameters:
    c : color - The color of the polygon.
    lst : (float * float) list - The list of vertices of the polygon.

Returns: PrimitiveTree A new graphic primitive tree object representing the filled polygon.

Creates a filled polygon with the specified vertices.

The filledPolygon function takes a color, and list of pairs of x and y coordinates and makes a PrimitiveTree representing a polygon. Example of code generating a filled polygon tree is:

    let col = darkOliveGreen
    filledPolygon col [(0.0,0.0);(10.0,80.0);(20.0,40.0)]
val col: obj
which generates a PrimitiveTree representing a closed polygon which is filled with the color darkOliveGreen. Note that a filledPolygon with its outline marked in another color can be achieved by using this function together with the onto and the piecewiseAffine functions. The bounding box is the smallest axis aligned rectangle enclosing the shape which in this case is denoted by the corners (0.0,0.0) and (20.0,80.0).

c : color

The color of the polygon.

lst : (float * float) list

The list of vertices of the polygon.

Returns: PrimitiveTree

A new graphic primitive tree object representing the filled polygon.

filledRectangle c w h

Full Usage: filledRectangle c w h

Parameters:
    c : color - The color of the rectangle.
    w : float - The width of the rectangle.
    h : float - The height of the rectangle.

Returns: PrimitiveTree A new graphic primitive tree object representing the filled rectangle.

Creates a filled rectangle with the specified width and height.

The filledRectangle function takes a color, a width, and a height and makes a PrimitiveTree representing a rectangle, whose lower left corner is (0.0,0.0) and upper right corner is (w,h). Example of code generating a rectangle tree is:

    let col = goldenrod
    filledRectangle col 20.0 80.0
val col: obj
which generates a PrimitiveTree representing a rectangle filled with the color goldenrod. The bounding box is the same as the rectangle which in this case is (0.0,0.0) and (20.0,80.0). Note that a filledRectangle with its outline marked in another color can be achieved by using this function together with the onto and the rectangle functions.

c : color

The color of the rectangle.

w : float

The width of the rectangle.

h : float

The height of the rectangle.

Returns: PrimitiveTree

A new graphic primitive tree object representing the filled rectangle.

fromRgb r g b

Full Usage: fromRgb r g b

Parameters:
    r : int - The amount of red.
    g : int - The amount of green.
    b : int - The amount of blue.

Returns: color A color.

Generate a non-transparent color.

The fromRgba produces the color representation of the given red, green, blue. All values are en the range 0 to 255 and in the example:

    fromRgba 255 0 0
the resulting color is (non-transparent) red.

r : int

The amount of red.

g : int

The amount of green.

b : int

The amount of blue.

Returns: color

A color.

fromRgba r g b a

Full Usage: fromRgba r g b a

Parameters:
    r : int - The amount of red.
    g : int - The amount of green.
    b : int - The amount of blue.
    a : int - The degree to which the color is transparent.

Returns: color A color.

Generate a color.

The fromRgba produces the color representation of the given red, green, blue, and alpha values. All values are en the range 0 to 255 and in the example:

    fromRgba 255 0 0 128
the resulting color is semi-transparent red.

r : int

The amount of red.

g : int

The amount of green.

b : int

The amount of blue.

a : int

The degree to which the color is transparent.

Returns: color

A color.

getBoundingBox p

Full Usage: getBoundingBox p

Parameters:
    p : PrimitiveTree - The graphic primitive tree for which to get the size.

Returns: Rectangle The bounding box of the tree as x1,y1,x2,y2 where x2>x1 and y2>y1.

Retrieves the bounding box of a given graphic primitive tree.

p : PrimitiveTree

The graphic primitive tree for which to get the size.

Returns: Rectangle

The bounding box of the tree as x1,y1,x2,y2 where x2>x1 and y2>y1.

getFamily name

Full Usage: getFamily name

Parameters:
    name : string - The name of the font family to retrieve.

Returns: FontFamily The FontFamily corresponding to the specified name.

Retrieves a FontFamily of a given name.

name : string

The name of the font family to retrieve.

Returns: FontFamily

The FontFamily corresponding to the specified name.

getSize rect

Full Usage: getSize rect

Parameters:
    rect : Rectangle - The bounding box as a rectangle x1,y1,x2,y2 where x2>x1 and y2>y1.

Returns: Size The width and height of the bounding box.

Converts a rectangle into a size.

rect : Rectangle

The bounding box as a rectangle x1,y1,x2,y2 where x2>x1 and y2>y1.

Returns: Size

The width and height of the bounding box.

interact t w h interval draw react s

Full Usage: interact t w h interval draw react s

Parameters:
    t : string - The title of the application window.
    w : int - The width of the application window in pixels.
    h : int - The height of the application window in pixels.
    interval : int option - An optional interval for the timer in milliseconds.
    draw : 's -> Picture - A function that takes the current state and returns a Picture object representing the current visual state of the application.
    react : 's -> Event -> 's option - A function that takes the current state and an Event object and returns an optional new state, allowing the application to react to events.
    s : 's - The initial state of the application.

Runs an application with a timer, defining the drawing and reaction functions.

The interact function can render still images in a window, show animations in a window, and to interact with the user via the keyboard and the mouse. For example,

    let tree = ellipse darkCyan 2.0 85.0 64.0 |> translate 128.0 128.0
    let draw _ = make tree
    let react _ _ = None
    interact "Render an image" 256 256 None draw react 0
val tree: obj
val draw: 'a -> 'b
val react: 'a -> 'b -> 'c option
union case Option.None: Option<'T>
The main workhorses of interact are the draw and react functions, which communicate via a user-defined state value. In the above example, the state value is implicitly defined as an integer, since the last argument of interact is of integer type, but both draw and react ignore the state. To make an animation with interact, the react function must react on TimerTicks. Consider the following example,
    type state = float
    let tree (i:state) : PrimitiveTree = 
        ellipse darkCyan 2.0 85.0 64.0 |> translate i i
    let draw (j: state) : Picture = make (tree j)
    let react (j: state) (ev:Event) : state option = 
        match ev with
            | Event.TimerTick -> Some ((j+1.0)%128.0)
            | _ -> None
    let interval = Some 100
    let initialState = 0.0
    interact "Render an image" 256 256 interval draw react initialState
type state = float
Multiple items
val float: value: 'T -> float (requires member op_Explicit)

--------------------
type float = System.Double

--------------------
type float<'Measure> = float
val tree: i: state -> 'a
val i: state
val draw: j: state -> 'a
val j: state
val react: j: state -> ev: 'a -> state option
val ev: 'a
Multiple items
module Event from Microsoft.FSharp.Control

--------------------
type Event<'T> = new: unit -> Event<'T> member Trigger: arg: 'T -> unit member Publish: IEvent<'T>

--------------------
type Event<'Delegate,'Args (requires delegate and 'Delegate :> Delegate and reference type)> = new: unit -> Event<'Delegate,'Args> member Trigger: sender: obj * args: 'Args -> unit member Publish: IEvent<'Delegate,'Args>

--------------------
new: unit -> Event<'T>

--------------------
new: unit -> Event<'Delegate,'Args>
type 'T option = Option<'T>
union case Option.Some: Value: 'T -> Option<'T>
union case Option.None: Option<'T>
val interval: int option
val initialState: float
Here, we define a state type as float, which is the value controlling what to draw. The draw function is then a function, which takes a state and produces a Picture in this case the make of an tree containing an ellipse. The react function is set to listen for TimerTick events. When one such event occurs, it returns the next value of the state wrapped in an option type (Some). Other events may happen, but they are all ignored by returning None. Note that there is no mutable value, which contains the present value of the state. Further, note that the draw function is called inside interact, whenever interact deems it necessary, such as when react has been called to produce a new value of the state. The function react is called when the following events occur: Key of char - when the user presses a regular key DownArrow - when the user presses the down arrow UpArrow - when the user presses the up arrow LeftArrow - when the user presses the left arrow RightArrow - when the user presses the right arrow Return - when the user presses the return key MouseButtonDown(x,y)- when the user presses the left mouse button MouseButtonUp(x,y) - when the user releases the left mouse button MouseMotion(x,y,relx,rely) - when the user moves the mouse TimerTick - when the requested time interval has passed Note that there is no guarantee that the exact interval has occurred between each TimerTick event, and depending on the computing system being used, there is a lower limit to how fast an event loop can be served. Finally, the state can be any value, and thus the system offers much flexibility in terms of the communication between the draw and the react function. However, since the programmer (and the user) are only indirectly in control of their communication, it may be useful to think of draw and react as isolated functions. E.g., a call by interact to draw j should produce a Picture for state j regardless of the previous picture or the possible next. Likewise, a call to read j ev should react to the situation specified by j and ev only, and the programmer should concentrate only on what the next event should be given said input.

t : string

The title of the application window.

w : int

The width of the application window in pixels.

h : int

The height of the application window in pixels.

interval : int option

An optional interval for the timer in milliseconds.

draw : 's -> Picture

A function that takes the current state and returns a Picture object representing the current visual state of the application.

react : 's -> Event -> 's option

A function that takes the current state and an Event object and returns an optional new state, allowing the application to react to events.

s : 's

The initial state of the application.

make p

Full Usage: make p

Parameters:
    p : PrimitiveTree - The graphic primitive tree object used to create the graphic primitive tree.

Returns: Picture A new Picture object representing the given graphic primitive tree.

Creates a Picture object from a given graphic primitive tree.

The functions make and explain both converts a primitive tree to a picture, which can be rendered. For example,

    let tree = ellipse darkCyan 2.0 85.0 64.0 |> translate 128.0 128.0
    let picture = make tree
    renderToFile 256 256 "sample.tif" picture
val tree: obj
val picture: obj
makes a primitive tree consisting of a single ellipse, converts the tree to Picture and renders it to the file sample.tif as a tif-file.

p : PrimitiveTree

The graphic primitive tree object used to create the graphic primitive tree.

Returns: Picture

A new Picture object representing the given graphic primitive tree.

makeFont fam size

Full Usage: makeFont fam size

Parameters:
    fam : string - The name of the font family to use.
    size : float - The size of the font.

Returns: Font The newly created Font object.

Creates a Font object using the given family name and size.

fam : string

The name of the font family to use.

size : float

The size of the font.

Returns: Font

The newly created Font object.

measureText f txt

Full Usage: measureText f txt

Parameters:
    f : Font - The font used to render the text.
    txt : string - The text to measure.

Returns: float * float A tuple representing the width and height of the measured text.

Measures the size of the given text when rendered with the specified font.

f : Font

The font used to render the text.

txt : string

The text to measure.

Returns: float * float

A tuple representing the width and height of the measured text.

onto pic1 pic2

Full Usage: onto pic1 pic2

Parameters:
    pic1 : PrimitiveTree - The first graphic primitive tree, which will be placed on top of the second.
    pic2 : PrimitiveTree - The second graphic primitive tree, over which the first graphic primitive tree will be placed.

Returns: PrimitiveTree A new graphic primitive tree object representing the combined image with the first graphic primitive tree on top of the second.A new graphic primitive tree object representing the filled ellipse.

Places one graphic primitive tree on top of another.

The onto function joins two trees where pic1 will be drawn on top of pic2. The following code-example:

    let boundary = ellipse red 3.0 10.0 20.0
    let ell = filledEllipse blue 10.0 20.0
    onto boundary ell
val boundary: obj
val ell: obj
represents a tree of a filled ellipse in blue with its boundary on top in red and with a line thickness of 3. The bounding box is the smallest rectangle enclosing the ellipse, which in this case is (-10,-20) to (10.20).

pic1 : PrimitiveTree

The first graphic primitive tree, which will be placed on top of the second.

pic2 : PrimitiveTree

The second graphic primitive tree, over which the first graphic primitive tree will be placed.

Returns: PrimitiveTree

A new graphic primitive tree object representing the combined image with the first graphic primitive tree on top of the second.A new graphic primitive tree object representing the filled ellipse.

piecewiseAffine c sw lst

Full Usage: piecewiseAffine c sw lst

Parameters:
    c : color - The color to be used.
    sw : float - The stroke width.
    lst : (float * float) list - The list of control points for the transformation.

Returns: PrimitiveTree A new graphic primitive tree object representing the transformed graphic primitive tree.

Creates a piecewise affine transformation on a graphic primitive tree.

The piecewiseAffine function takes a color, a stroke width, and list of pairs of x and y coordinates and makes a PrimitiveTree representing a piecewise affine curve also known as a piecewise linear curve. Note any smooth curve can be approximately arbitrarily well as piecewise affine curve when the coordinate pairs are sampled sufficiently closely along the smooth curve. Example of code generating a piecewise affine curve tree is:

    let col = darkOliveGreen
    let strokeWidth = 2.0
    piecewiseAffine col strokeWidth [(0.0,0.0);(10.0,80.0);(20.0,40.0);(0.0,0.0)]
val col: obj
val strokeWidth: float
which generates a PrimitiveTree representing a set of lines, colored filledPolygon and with a width of 2.0. In this case is also a closed polygon and a triangle. The bounding box is the smallest axis aligned rectangle enclosing the shape which in this case is denoted by the corners (0.0,0.0) and (20.0,80.0).

c : color

The color to be used.

sw : float

The stroke width.

lst : (float * float) list

The list of control points for the transformation.

Returns: PrimitiveTree

A new graphic primitive tree object representing the transformed graphic primitive tree.

rectangle c sw w h

Full Usage: rectangle c sw w h

Parameters:
    c : color - The color of the rectangle.
    sw : float - The stroke width of the rectangle.
    w : float - The width of the rectangle.
    h : float - The height of the rectangle.

Returns: PrimitiveTree A new graphic primitive tree object representing the rectangle.

Creates a rectangle with the specified width, height, and stroke width.

The rectangle function takes a color, a stroke width, a width, and a height and makes a PrimitiveTree representing a rectangle, whose lower left corner is (0.0,0.0) and upper right corner is (w,h). Example of code generating a rectangle tree is:

    let col = goldenrod
    let strokeWidth = 1.0
    rectangle col strokeWidth 20.0 80.0
val col: obj
val strokeWidth: float
which generates a PrimitiveTree representing a rectangle drawn with the color goldenrod and the line width 1.0. The bounding box is the same as the rectangle which in this case is (0.0,0.0) and (20.0,80.0).

c : color

The color of the rectangle.

sw : float

The stroke width of the rectangle.

w : float

The width of the rectangle.

h : float

The height of the rectangle.

Returns: PrimitiveTree

A new graphic primitive tree object representing the rectangle.

render t w h draw

Full Usage: render t w h draw

Parameters:
    t : string - The title of the application window.
    w : int - The width of the application window in pixels.
    h : int - The height of the application window in pixels.
    draw : Picture - A function that returns a Picture object representing the current visual state of the application.

Runs an application, defining the drawing function.

The function render shows a Picture in a window on the screen. For example,

    let tree = ellipse darkCyan 2.0 85.0 64.0 |> translate 128.0 128.0
    let pict = make tree
    render "Sample title" 256 256 pict
val tree: obj
val pict: obj
creates a translated ellipse graphic primitive tree converts it to a Picture using make and shows on the screen with render.

t : string

The title of the application window.

w : int

The width of the application window in pixels.

h : int

The height of the application window in pixels.

draw : Picture

A function that returns a Picture object representing the current visual state of the application.

renderToFile width height filePath draw

Full Usage: renderToFile width height filePath draw

Parameters:
    width : int - The width of the output image in pixels.
    height : int - The height of the output image in pixels.
    filePath : string - The file path where the image will be saved.
    draw : Picture - The picture object to be drawn.

Draws a picture generated by make or explain to a file with the specified width and height.

The functions renders a Picture to a file. For example,

    let tree = ellipse darkCyan 2.0 85.0 64.0 |> translate 128.0 128.0
    let picture = make tree
    renderToFile 256 256 "sample.tif" picture
val tree: obj
val picture: obj
makes a primitive tree consisting of a single ellipse, converts the tree to Picture and renders it to the file sample.tif as a tif-file. The following formats are supported: Bmp, Gif, Jpeg, Pbm, Png, Tiff, Tga, WebP, and the desired format is specified by the file name suffix. Typically the suffix is given as lower case, and and Tiff images uses either of the tiff or tif suffixes.

width : int

The width of the output image in pixels.

height : int

The height of the output image in pixels.

filePath : string

The file path where the image will be saved.

draw : Picture

The picture object to be drawn.

rotate x y rad p

Full Usage: rotate x y rad p

Parameters:
    x : float - The x-coordinate of the point around which to rotate.
    y : float - The y-coordinate of the point around which to rotate.
    rad : float - The angle in radians to rotate the graphic primitive tree.
    p : PrimitiveTree - The graphic primitive tree to be rotated.

Returns: PrimitiveTree A new graphic primitive tree object that is rotated by the specified angle.

Rotates a given graphic primitive tree by the specified angle in radians around a point.

The rotate function takes a PrimitiveTree and three floating-point values representing the x and y coordinates of the center of rotation and the amount of rotation in radians. It constructs a new Rotate tree that encapsulates the original tree. For example:

    ellipse darkCyan 2.0 85.0 64.0 |> rotate 0.0 0.0 (45.0*System.Math.PI/180.0)
namespace System
type Math = static member Abs: value: decimal -> decimal + 7 overloads static member Acos: d: float -> float static member Acosh: d: float -> float static member Asin: d: float -> float static member Asinh: d: float -> float static member Atan: d: float -> float static member Atan2: y: float * x: float -> float static member Atanh: d: float -> float static member BigMul: a: int * b: int -> int64 + 2 overloads static member BitDecrement: x: float -> float ...
<summary>Provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions.</summary>
field System.Math.PI: float = 3.14159265359
<summary>Represents the ratio of the circumference of a circle to its diameter, specified by the constant, π.</summary>
rotates the ellipse 45 degrees around the point 0,0. The ellipse's bounding box is currently unchanged which may cause undesired effects when used in together with alignH and alignV and this may change in future releases.

x : float

The x-coordinate of the point around which to rotate.

y : float

The y-coordinate of the point around which to rotate.

rad : float

The angle in radians to rotate the graphic primitive tree.

p : PrimitiveTree

The graphic primitive tree to be rotated.

Returns: PrimitiveTree

A new graphic primitive tree object that is rotated by the specified angle.

scale sx sy p

Full Usage: scale sx sy p

Parameters:
    sx : float - The scaling factor along the x-axis.
    sy : float - The scaling factor along the y-axis.
    p : PrimitiveTree - The graphic primitive tree to be scaled.

Returns: PrimitiveTree A new graphic primitive tree object that is scaled by the specified factors.

Scales a given graphic primitive tree by the specified factors along the x and y axes.

The scale function takes a PrimitiveTree and two floating-point values representing the scaling factor along the x and y axes, respectively. It constructs a new Scale tree that encapsulates the original tree. For example:

    ellipse darkCyan 2.0 85.0 64.0 |> scale 1.0 2.0
scales the ellipse with radii 85 and 64 with its center in 0,0 such that resulting ellipse has radii 85 and 128 and center in 0,0. The ellipse's bounding box is scaled accordingly.

sx : float

The scaling factor along the x-axis.

sy : float

The scaling factor along the y-axis.

p : PrimitiveTree

The graphic primitive tree to be scaled.

Returns: PrimitiveTree

A new graphic primitive tree object that is scaled by the specified factors.

systemFontNames

Full Usage: systemFontNames

Returns: string list

The list of names of available system fonts.

Returns: string list

text c f txt

Full Usage: text c f txt

Parameters:
    c : color - The color of the text.
    f : Font - The font used to render the text.
    txt : string - The text to render.

Returns: PrimitiveTree A PrimitiveTree object representing the rendered text.

Creates a PrimitiveTree representing the given text with specified properties.

This function is used to create a text primitive with specific styling. For example:

    let fontName = "Microsoft Sans Serif"
    let font = makeFont fontName 24.0
    let white = yellow
    let tree = text white font "Hello World"
val fontName: string
val font: obj
val white: obj
val tree: obj
creates a graphic primitive of the string "Hello World".

c : color

The color of the text.

f : Font

The font used to render the text.

txt : string

The text to render.

Returns: PrimitiveTree

A PrimitiveTree object representing the rendered text.

toString p

Full Usage: toString p

Parameters:
    p : PrimitiveTree - The graphic primitive tree to be converted into a string.

Returns: string A string representing the given graphic primitive tree.

Converts a graphic primitive tree into its string representation.

The toString function returns a string representation of a primitive tree including all graphics primitives, transformations, and combinations, one per line. Enclosed trees are shown below with indentation according to their level of indentation. For example:

    let box1 = rectangle goldenrod 1.0 20.0 80.0
    let box2 = rectangle yellow 1.0 30.0 30.0
    let tree = alignH (alignV box1 Right box2) Center box1  
    printfn "%s" (toString tree)
val box1: obj
val box2: obj
val tree: obj
val printfn: format: Printf.TextWriterFormat<'T> -> 'T
results in
    AlignH position=0.5
    
      
      
    
which demonstrates that alignV encloses box1 and box2 including data about each element.

p : PrimitiveTree

The graphic primitive tree to be converted into a string.

Returns: string

A string representing the given graphic primitive tree.

translate dx dy p

Full Usage: translate dx dy p

Parameters:
    dx : float - The distance to translate the graphic primitive tree along the x-axis.
    dy : float - The distance to translate the graphic primitive tree along the y-axis.
    p : PrimitiveTree - The graphic primitive tree to be translated.

Returns: PrimitiveTree A new graphic primitive tree object that is translated by the specified distances.

Translates a given graphic primitive tree by the specified distances along the x and y axes.

The translate function takes a PrimitiveTree and two floating-point values representing the distances to translate the tree along the x and y axes, respectively. It constructs a new Translate tree that encapsulates the original tree with a translation primitive. For example:

    ellipse darkCyan 2.0 85.0 64.0 |> translate 128.0 128.0
translates the ellipse with radii 85 and 64 and center in 0,0 a such that the resulting ellipse has its center in 128,128. The ellipse's bounding box is translated accordingly.

dx : float

The distance to translate the graphic primitive tree along the x-axis.

dy : float

The distance to translate the graphic primitive tree along the y-axis.

p : PrimitiveTree

The graphic primitive tree to be translated.

Returns: PrimitiveTree

A new graphic primitive tree object that is translated by the specified distances.