This flower has sixteen two-colored petals. And even though they don’t look like circles, each petal is drawn by drawing a red circle on top of a larger pink circle.
This flower has sixteen two-colored petals. And even though they don’t look like circles, each petal is drawn by drawing a red circle on top of a larger pink circle.
(Petal—Context View)
(Petal—Outside View)
The petals look like ovals and not circles because I am changing the x-scale of the context from 1 to 0.3. An x-scale of 1 is normal. An x-scale greater than 1 stretches the context in the x-direction, making everything drawn into the context wider when viewed from outside of the context. Conversely, an x-scale less than 1 makes everything skinnier.
Change the values in the number fields to draw your own flower.
Outer petal color: red: , green: , blue:
Outer petal circle: x-coordinate: , y-coordinate: , radius:
Inner petal color: red: , green: , blue:
Inner petal circle: x-coordinate: , y-coordinate: , radius:
Context: x-scale:
(Petal—Context View)
(Petal—Outside View)
(Center—Context View)
(Flower—Outside View)
Center color: red: , green: , blue:
Center circle: x-coordinate: , y-coordinate: , radius:
Number of petals:
So why is the center of the flower a perfect circle? When I draw each petal, I apply an x-scale of 0.3, but when I draw the center of the flower, I reset the x-scale back to 1. Any change that we make to the context is stored in a context stack and can be undone by removing it from the stack.