Splash Letters [Vanilla JavaScript Project Tutorial]

HTML Canvas Mouse Move Animation

Some of you asked for more generative art so today we will build a particle system algorithm and turn in into mouse trail effect that switches into autopilot whenever user stops moving the mouse or leaves the canvas.

This tutorial is part of a series – Creative coding with vanilla JavaScript and HTML canvas COMPLETE PLAYLIST: https://www.youtube.com/watch?v=lGJ9i6CYKyQ&list=PLYElE_rzEw_siuo-kkHh5h7Sk–6IPYNh

I will show how to use set Interval and clear interval and how to connect it to event listeners and we will learn how to create and handle animated text on canvas with couple of built in context methods such as ctx.font and ctx.filltext. This is creative coding so we will use some of the techniques we talked about in previous videos, tweak them and combine them in different ways. We will build HTML canvas mouse move animation completely from scratch and I will explain every line as we code along.

You can message me on TWITTER twitter.com/code_laboratory
Check out some of my source code on CODEPEN codepen.io/franksLaboratory

Have fun coding 🙂

Leave a Reply