CREATIVE NOTES / CODING & PLAYFUL LEARNING
Can You Recognise the Weather Without Colour? Three Ways to Draw Pocket Weather
Cover the names. What do a ring of rounded rays, a droplet with an umbrella and two lines curling to the side bring to mind? Pocket Weather Blind Boxes, featured in the portfolio of Hong Kong primary pupil Zhan Yining, also known as Monica, pictures weather as little figures. This editorial observation looks at three of the site’s vector illustrations and its reveal screen to see what clues come from shape, colour, line and text.
Sunny Bun: look outward from the centre
Sunny Bun’s face sits inside a pale yellow disc. Rounded rays project all around it, shading from bright yellow into golden orange, with a coral scarf below. Imagine it in black and white. The round centre and the edge spreading out in every direction are still there. Warm colours give it a sunny look, and the radiating edge offers a separate clue to its identity.
Pitter Drop: a small umbrella beside a pointed top
Pitter Drop narrows to a point at the top and widens below, with a curved white highlight on its blue body. The little yellow umbrella on the right has a scalloped edge and a hooked handle. The pointed top and broad base suggest a drop of water. The umbrella places that shape in a rainy scene. The line beside the reveal also says that the character carries an umbrella for friends, so picture and text point to the same character in different ways.
Whistle Wind: send the lines in the same direction
Whistle Wind has a rounded body that shades from pale green to mint, with an outline that curls up towards the right. Two lines extend from its right side and curl at the ends. Its yellow scarf trails to the right as well. Even in a still frame, these cues lead the eye in the same direction and can suggest a breeze. All three figures share similar little eyes, blush and smiles. The family resemblance comes from the faces, while the outline, props and direction of the lines help tell the figures apart.
The reveal and the name do different jobs
The selected box shakes as the seal opens. At the reveal, the figure starts smaller and slightly tilted, then pops into place as the text beside it fades in a little later. The figures share this sequence. A name and a short character line identify the result, with both Chinese and English available.
When the system or browser requests reduced motion, the page disables these animations and transitions. The script also skips the pause reserved for the opening effect. The image, name and short line still appear. The curves that help identify Whistle Wind are already in the illustration. The reveal simply brings the figure into view.
Try a recognition experiment with one black pen
You can see these three regular figures in the Weather Album. For a paper exercise, invent three weather symbols using only a black pen: a circle with short lines pointing outwards, a pointed top and wide base with a hooked umbrella, and a rounded curl with two lines sweeping sideways. Write the names on the back. Ask a partner what each drawing suggests, then ask which mark gave them the clue. If the drop looks like a balloon to them, try making the umbrella clearer. Turn the paper over to read the names and compare what the outline, prop and words each contributed.
Two more questions
Can I still identify a figure with reduced motion on?
The result still shows the figure, its name and its short line. Reduced motion removes effects such as the box shake and the figure’s entrance. Rays, the umbrella and curling lines remain visible in the illustrations.
Why can the three figures be told apart even though their faces are similar?
Similar expressions make them look like one group, while their outlines and props offer different clues. Sunny Bun has a radiating edge, Pitter Drop has a pointed top and umbrella, and Whistle Wind has lines that curl to one side.
Explore the project
Prepared by the portfolio editorial team from the project rules and existing code, with AI-assisted writing and translation. Calculations and suggested activities are not Monica’s quotations or personal records. Portfolio inclusion does not mean she independently completed every design or line of code.