365 Days on Canvas: Days 22 to 28

365 days on canvas, is a project where I spent 20 minutes every day on the <canvas> tag. More about it here.

Here is the work of the last 7 days.

Days 22/23

New week, new features! If you wondered what the bounding box detector introduced last week was for, now I can tell you: it will be used to interact with the objects on the screen.

Before that, let me show you the “mode selector”. There are now 3 different modes in this canvas: the normal mode, the add mode, where you can add birds in the sky and the edit mode, where you can change the existing objects. For now you can’t edit anything but it’s coming!

Click on the colored squares to switch between modes:

Day 24

And now, some edition features! In “edit mode” (the green square), you can click on the birds to make them black, click on SquareMan to change its color (randomly between white, red, cyan, blue and black) and you can also click on the sun to change its radius.

Day 25

Not much to show today: the current mode is now displayed and the associated button has a border.

Days 26/27

A big addition that took 40 minutes: randomly generated clouds. If you reload the page, you will see that the clouds are different each time.

I’ll probably write a article someday on how I made those clouds.

Day 28

I made the clouds more configurable. Now, I can easily control the width/height ratio, and the shape of the curves.

Next

What do you want next week?