This is my first attempt at Generative Art.  Using the tutorial provided by Frank's Laboratory.  https://www.youtube.com/watch?v=0v4_Dw0K8pw.  Hold the left mouse button down and drag across the white background to generate pink flowers on screen.

The flowers are Png images and the stems are made from stacked circles and squares drawn on an HTML Canvas Element.

The Javascript gets the HTML Canvas Element and the two-dimensional drawing context to create drawings.  The HTML Canvas Element is changed in size to the same area as the browser window content area.  

Some of the options set for the two-dimensional drawing context are the width of the drawing line, how the drawing is composited and a shadow for the drawn elements.

- The X and Y properties will be the same as the X and Y coordinates of the cursor and are used as the center point of the circle being drawn and the starting point for drawing the rectangle.  

- SpeedX and SpeedY properties will be used to change the X and Y properties so each shape is offset from the previous.  

- AngleX and AngleY are used to alter X and Y giving as well making the roots curve.

-  VaX and VaY properties change the AngleX and AngleY and are also used for curving the roots.

- MaxSize as it states is used to keep Size property from going beyond the max value.

- Size property is the inital size.

- VS property changes the Size Property for each subsequent circle and rectangle.  giving the illusion the root is growing towards the viewer.

- The Lightness and Saturation property are used to color the circle and are changed as well.

- The Update method is used to draw the shapes and change the properties for the next shapes

- The RequestAnimationFrame method calls the update method to run again before the browser repaints the content area.  calling the method to run up to 60 times per second.

- The update method will stop drawing the root once the Size property reached the maximum size and the Flower object will be created.

- The X and Y properties used to position the flower image.

- The size property will be the width and height of the image.

- The VS property increase the size of the image and the MaxFlowerSize gives it a size limit

- Image property is used to create a new image that will be drawn on canvas

- Angle and VA property are used to rotate the flower.

- The Grow method uses a save method to store settings before rotate and translate are applied and restore method is used so they can revert back for the next flower image being drawn on the canvas to be positioned and rotated properly.

There is three event listeners to listen for when to draw.  only when the mouse is down and moved across the canvas.