Layout

We can seen how to create basic images. We can combine 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 shown below.

(Image.circle(100).beside(Image.rectangle(100, 200))).draw()

A circle beside a rectangle

Image contains many layout methods for combining images. Here are one we'll use to start with.

beside places images horizontally next to one another. Example:
```
Image.circle(100).beside(Image.circle(50)) 
```
above places images vertically next to one another. Example:
```
Image.circle(100).above(Image.circle(50)) 
```
on places images centered on top of one another. Example:
```
Image.circle(100).on(Image.circle(50)) 
```

Try out these methods until you're sure you understand them.

Exercises

Exercise: The Width of a Circle

Create the picture below using the layout methods and basic images we've covered so far.

The width of a circle

It's three small circles on top of a bigger circle, and we can just about state this as is in code.

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

←Images Color→