https://github.com/changhuixu/canvas-animation-step-by-step

Canvas animation with flowers step by step using TypeScript.
https://github.com/changhuixu/canvas-animation-step-by-step

angular animation canvas frontend html5 javascript typescript

Last synced: 8 days ago
JSON representation

Canvas animation with flowers step by step using TypeScript.

• Host: GitHub
• URL: https://github.com/changhuixu/canvas-animation-step-by-step
• Owner: changhuixu
• License: mit
• Created: 2018-07-19T20:24:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:58:25.000Z (almost 2 years ago)
• Last Synced: 2023-03-01T18:25:46.934Z (almost 2 years ago)
• Topics: angular, animation, canvas, frontend, html5, javascript, typescript
• Language: TypeScript
• Homepage: https://flowerscanvas.firebaseapp.com
• Size: 2.76 MB
• Stars: 25
• Watchers: 3
• Forks: 3
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Canvas Animation in TypeScript

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I3I63W4OK)

Canvas Animation written in TypeScript. No jQuery and no other 3rd party dependencies. You may also interested in [my another repo about canvas animation](https://github.com/changhuixu/canvas-animation-demos).

![Interactive Canvas with Flowers](./images/flowers-on-canvas.gif)

## Step-by-step guide can be found in [this Medium Post](https://medium.com/@changhuixu/how-to-compose-canvas-animations-in-typescript-9368dfa29028)

This repo includes blooming flowers animation examples. The flower drawing was inspired and optimized from [this tutorial](https://www.html5canvastutorials.com/advanced/html5-canvas-blooming-flowers-effect/).

## Project Structure

1. **models**

   flower.ts

   flower-center.ts

   petal.ts

   point.ts

1. **services**

   flower-randomization.service.ts

1. **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 draw flower on canvas](./images/canvas-animation-1.png)

## How to build locally

```sh

// run the animation app

npm start

// build the app

npm run build

```

Then visit [http://localhost:8080/](http://localhost:8080/)

## License

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

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/I3I63W4OK)