Color
In addition to layout, Doodle has some simple operators to add a splash of colour to our images. Try these out the methods described in Table pictures:color to see how they work.
+-----------------------------+-----------+-------------------------+------------------------------+
| Method | Parameter | Description | Example |
+=============================+===========+=========================+==============================+
| fillColor
| Color
| Fills the image with | Image.circle(10) |
| | | the specified color. | .fillColor(Color.red)
|
+-----------------------------+-----------+-------------------------+------------------------------+
| strokeColor
| Color
| Outlines the image with | Image.circle(10) |
| | | the specified color. | .strokeColor(Color.blue)
|
+-----------------------------+-----------+-------------------------+------------------------------+
| strokeWdith
| Double
| Sets the width of the | Image.circle(10) |
| | | image outline. | .strokeWidth(3)
|
+-----------------------------+-----------+-------------------------+------------------------------+
| noFill
| None | Removes any fill from | Image.circle(10).noFill
|
| | | the image. | |
+-----------------------------+-----------+-------------------------+------------------------------+
| noStroke
| None | Removes any stroke from | Image.circle(10).noStroke
|
| | | the image. | |
+-----------------------------+-----------+-------------------------+------------------------------+
: Some of the methods to add color to images in Doodle. Table pictures:color
Doodle has various ways of creating colours. The simplest are the predefined colours in CommonColors.scala. Some of the most commonly used are described in Table pictures:colors.
+--------------+-------+------------------------------------------+
| Color | Type | Example |
+==============+=======+==========================================+
|Color.red
|Color
| Image.circle(10).fillColor(Color.red)
|
+--------------+-------+------------------------------------------+
|Color.blue
|Color
| Image.circle(10).fillColor(Color.blue)
|
+--------------+-------+------------------------------------------+
|Color.green
|Color
| Image.circle(10).fillColor(Color.green)
|
+--------------+-------+------------------------------------------+
|Color.black
|Color
| Image.circle(10).fillColor(Color.black)
|
+--------------+-------+------------------------------------------+
|Color.white
|Color
| Image.circle(10).fillColor(Color.white)
|
+--------------+-------+------------------------------------------+
|Color.gray
|Color
| Image.circle(10).fillColor(Color.gray)
|
+--------------+-------+------------------------------------------+
|Color.brown
|Color
| Image.circle(10).fillColor(Color.brown)
|
+--------------+-------+------------------------------------------+
: Some of the most common predefined colors. Table pictures:colors
Exercises {-}
Evil Eye {-}
Make the image in Figure pictures:evil-eye, designed to look like a traditional amulet protecting against the evil eye. I used cornflowerBlue
for the iris, and darkBlue
for the outer color, but experiment with your own choices!
<div class="solution"> Here's my amulet:
Image
.circle(10)
.fillColor(Color.black)
.on(Image.circle(20).fillColor(Color.cornflowerBlue))
.on(Image.circle(30).fillColor(Color.white))
.on(Image.circle(50).fillColor(Color.darkBlue))
// res0: Image = On(
// t = On(
// t = On(
// t = FillColor(
// image = Circle(d = 10.0),
// color = RGBA(
// r = UnsignedByte(value = -128),
// g = UnsignedByte(value = -128),
// b = UnsignedByte(value = -128),
// a = Normalized(get = 1.0)
// )
// ),
// b = FillColor(
// image = Circle(d = 20.0),
// color = RGBA(
// r = UnsignedByte(value = -28),
// g = UnsignedByte(value = 21),
// b = UnsignedByte(value = 109),
// a = Normalized(get = 1.0)
// )
// )
// ),
// b = FillColor(
// image = Circle(d = 30.0),
// color = RGBA(
// r = UnsignedByte(value = 127),
// g = UnsignedByte(value = 127),
// b = UnsignedByte(value = 127),
// a = Normalized(get = 1.0)
// )
// )
// ),
// b = FillColor(
// image = Circle(d = 50.0),
// color = RGBA(
// r = UnsignedByte(value = -128),
// g = UnsignedByte(value = -128),
// b = UnsignedByte(value = 11),
// a = Normalized(get = 1.0)
// )
// )
// )
</div>