Google Code-in

(1) Objective

Setup a Pythagoras tree, and animate it from bottom to top.

(2) Requirement

1) You are required to use Mozilla Thimble in order to save your work and share it later on. Please create an account if you don’t have one.

2) Learn about Pythagoras tree.

3) Learn about HTML canvas Element and Basic animations.

4) Create new project in Thimble. You need at least 3 files in the project: html, css, and js.

5) Build a data structure that contains a series of rectangles for a Pythagoras tree in JavaScript.

6) Visualize your data with HTML canvas while animating them from bottom to top.

7) Add support for asymmetric form. See images in the following link: A fractal with symmetric and asymmetric forms

8) Additionally, you can decorate the tree by using different colors for different branches, or by randomizing some other factors so that the tree looks more like a real one.

9) Share & publish your work through the Thimble.

(3) Expected outcome

An animating Pythagoras tree in HTML canvas.