Layout

We can seen how to create primitive images. We can combine together images using layouts methods to create more complex images. Try the following code---you should see a circle and a rectangle displayed beside one another, as in Figure picture:circle-rect.

(Image.circle(10).beside(Image.rectangle(10, 20))).draw()

Image contains several layout methods for combining images, described in Table pictures:layout. Try them out now to see what they do.

+---------------+-----------+----------------------------+------------------------------+ | Method | Parameter | Description | Example | +===============+===========+============================+==============================+ | beside |Image | Places images horizontally | Image.circle(10) | | | | next to one another | .beside(Image.circle(10))| +---------------+-----------+----------------------------+------------------------------+ | above |Image | Places images vertically | Image.circle(10) | | | | next to one another | .above(Image.circle(10)) | +---------------+-----------+----------------------------+------------------------------+ | below |Image | Places images vertically | Image.circle(10) | | | | next to one another | .below(Image.circle(10)) | +---------------+-----------+----------------------------+------------------------------+ | on |Image | Places images centered | Image.circle(10) | | | | on top of one another | .on(Image.circle(10)) | +---------------+-----------+----------------------------+------------------------------+ | under |Image | Places images centered | Image.circle(10) | | | | on top of one another | .under(Image.circle(10)) | +---------------+-----------+----------------------------+------------------------------+

: Layout methods available in Doodle Table pictures:layout

Exercises {-}

The Width of a Circle {-}

Create the picture Figure picture:width-of-a-circle using the layout methods and basic images we've covered so far.

<div class="solution"> It's three small circles on top of a bigger circle, and we can just about state this as is in code.

(Image
   .circle(20)
   .beside(Image.circle(20))
   .beside(Image.circle(20))).on(Image.circle(60))
// res0: Image = On(
//   t = Beside(
//     l = Beside(l = Circle(d = 20.0), r = Circle(d = 20.0)),
//     r = Circle(d = 20.0)
//   ),
//   b = Circle(d = 60.0)
// )

</div>