I’ve been doing some more experimenting with image-making in Elm, an example of which is displayed on the left. It was constructed with an updated version of the
Graph.elm library used for simulating a dice-playing game. See GitHub for both code and images. With the
Graph module one can make statements like
paintCircle "#00ff00" 0.6 30.0 40.0 50.0 to paint a blue circle with center at (30,40), radius 50, and and opacity of 0.6. Similar code works for rectangles and ellipses.
A “painting” like the one displayed consists of a set of statements like
blueCircle = paintCircle "#00ff00" 0.6 30.0 40.0 50 and then a list of the form
[ SA.width "1200", SA.height "1200" ]
[ (G.boundingRect graphData)
graphData element is used to translate between the Cartesian coordinates with which you, the user works, and the screen coordinates which the computer uses to render your image. Here is how it was set up
G.Rect 0.0 0.0 200.0 200.0target =
G.Rect 60.0 60.0 500.0 500.0graphData =
G.GraphData source target "#ffffff" "black"
In this case the user is working in 200 by 200 unit region in the first quadrant of the Cartesian plane, with the origin in the lower left corner, x increasing to the right, and y increasing as we go up. This region is defind by
source . The region in the browser screen in which objects are drawn has dimensions 500 by 500 pixels with upper left corner at (60,60). The
"#ffffff" string instructs the program to use white as the background for the display rectangle and to use black to draw its border. See the code in
src/Composition1 on GitHub to see details on how this is done.