Categories

What we'll be building

By the end of this tutorial you should be able to run an ionic application within your browser that randomly generates particles within a HTML5 Canvas object and additionally provides buttons and a slider to perform the following:

Stop the current particle generator animation playing

Replay the particle generator animation

Change the number of particles available for use with the particle generator

As the animation progresses the number of generated particles proliferates across the HTML5 Canvas area:

Pretty fun huh? Pure abstract expressionism driven by code....

Jackson Pollock eat your heart out!

Now we know what we'll be developing let's get started...

First steps

Open your system terminal, navigate to where you store your digital projects and use the Ionic CLI to perform the following actions:

Generate a new Ionic Framework project named ionic-particles (that uses a blank template)

With the project, and the particlesProvider servce, now generated the next step involves ensuring that the HttpClientModule is imported and configured within the application root module - which can be located at ionic-particles/src/app/app.module.ts - like so:

With that final modification for the HomePage component we can now test our application within the browser using the following command from the Ionic CLI:

ionic serve

Which, if no errors have occured during the development phase (and don't you just love being greeted by unexpected TypeScript errors during the transpilation process?), will run the following application:

If you're seeing this then congratulations - you've built your first random particle generator in Ionic!

In summary

Hopefully you've found the above tutorial useful and it's given you a taste for how HTML Canvas animations can be implemented within an Ionic project.

There's definitely further ways in which we could develop the functionality for this application such as, for example:

Allowing the user to generate different sized particles

Allowing the user to change the particle colour

Adding the ability to save or export the generated animation

These shouldn't be too difficult to accomplish (particularly if we integrated further Ionic components and models to transfer values from the template to the component class logic) but I'll leave these for you to experiment with!

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore animations, using Angular's built in animation modules, for the Ionic framework within my e-book featured below and if you're interested in learning more about further articles and e-books please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...