Moons on Canvas

Published on February 14, 2022

In the previous guide we have drawn different shapes, such as rectangles and triangles, but in this guide, we will draw moons. Moons, like triangles, have different shapes. Here are phases of the moons which change over time.

🏷️ Tags: #tutorials-and-guides, #canvas

This is what we will accomplish at the end. Thank you Tim!

NOTE: Drawing each moon has a particular order, and you cannot mess the orders up.

A. Basic Procedures

First, we need to create a canvas. We will have to set the background to #000099 in the Designer. We also set the height to 100 pixels and the width to fill parent.

To begin with, we will draw outlines of the moons. This will be a white, hollow circle with a blue background.

We will also have procedures to draw full moons and to draw shadow moons. Notice the color change between the two procedures.

B. Drawing Moons

We first start with a full moon and a new moon.

  • A full moon is a moon which is completely shown, in other words, a full circle. So, we set the paint color to white and draw a full circle.

    • The X will be given later to specify whether the circle should be drawn on the left or right.

  • A new moon is a moon which is completely hidden, in other words, invisible. So, we will blend it in with the background as a shadow, but we have to make an outline for a new moon.

    • The X is given as 20 to make sure it is the same as the radius of the outline, as you can see. This makes sure the circle is on the very left of the canvas.

Next, we draw a waxing crescent moon.

EXPLANATION:

  1. We draw a full moon, with an X of 60 pixels.

  2. Next we draw a shadow moon left to it, with 50 pixels. Note that 60 - 50 = 10, which is exactly the diameter of the circle.

  3. At last, we draw the outline of the moon.

Below / right is the drawing process of the moon. The background is set to orange for viewing purposes. In our program, the orange background is dark blue.

The same thing applies for a waning crescent moon, which is just flipping the waxing crescent moon horizontally.

Next, we draw a waxing gibbous moon. This is going to be a little difficult. I set the background color to light blue. Notice the steps of drawing it.

Blending that with the background color, you will get this.

If I were to only do step 3, I would get this.

I'll show you the steps one by one.

  • We first draw a shadow moon, which cannot be seen.

  • We then draw a full moon, but a little bit on the right.

  • We draw a larger, hollow moon around the white moon that makes people think that it is a waxing gibbous.

  • The final touch: we draw an outline.

Waning gibbous is about the same, just flipping it horizontally.

That leaves us to the final two moons: the first and third quarter moons.

Explanation:

  • We first draw a full moon with white. After that, we set the paint color to the background color (dark blue).

  • We shade the left half of the full moon with the background color so the user does not see it.

  • We add an outline to the whole full moon (including the shaded parts).

For the third quarter, we almost do the exact thing, but we shade the right part, not the left half.

At last, we draw all of the moons. However, note that they are not in the order I wrote in. That is because of covering - if you draw it in the order of this guide, you will have some moons not showing the content they supposed to show.

Remember to call it in a certain event (when the screen initializes)!

Acknowledgements

I would like to thank TIMAI2 for his special effort in this .AIA and all people who joined the discussion. It was fun!