changhuixu / canvas-animation-step-by-step

Canvas animation with flowers step by step using TypeScript.

Canvas Animation in TypeScript

Canvas Animation written in TypeScript. No jQuery and no other 3rd party dependencies. You may also interested in my another repo about canvas animation.

Step-by-step guide can be found in this Medium Post

This repo includes blooming flowers animation examples. The flower drawing was inspired and optimized from this tutorial.

Project Structure

1. models

   flower.ts

   flower-center.ts

   petal.ts

   point.ts

2. services

   flower-randomization.service.ts

3. animations

   blooming-flowers.ts

   interactive-flowers.ts

Supplementary

In order to show the steps of drawing flower, I also kept the "sandbox" that I played with in supplementary folder. The code in supplementary folder generates an illustration below.

How to build locally

// run the animation app
npm start

// build the app
npm run build

Then visit http://localhost:8080/

License

Feel free to use the code in this repository as it is under MIT license.