More image-making experiments in Elm
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 theGraph 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
main =
S.svg
[ SA.width "1200", SA.height "1200" ]
[ (G.boundingRect graphData)
, square
, blueCircle
, redCircle
, rectangle1
, rectangle2
, yellowEllipse
, ETC.
]The 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
source =
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.
See also:
