🎨

HTML Canvas Particle Animation Tutorial

Mar 29, 2025

HTML Canvas Crash Course

Overview

  • The tutorial covers creating an advanced particle effect using the HTML canvas.
  • Aimed at beginners to intermediate JavaScript developers.
  • Will transition from basic drawings to complex animations.

Initial Setup

Project Structure

  • Create a project folder with the following files:
    • index.html: For HTML markup.
    • style.css: For styling the canvas.
    • script.js: For JavaScript functionality.

HTML Markup in index.html

  • Basic structure includes:
    • Title for the webpage.
    • HTML5 <canvas> element with id="canvas1".
  • Link to style.css in the <head>.
  • Link to script.js before the closing </body> tag.

CSS Styling in style.css

  • Target the canvas using its ID:
    • Set position to absolute.
    • Background color to black.
    • Width and height to 100% to cover the entire page.

JavaScript Basics in script.js

Drawing on the Canvas

  • Create a constant variable canvas referencing the <canvas> element.
  • Create a constant variable ctx for the 2D drawing context using getContext('2d').
    • This object allows access to various canvas drawing methods and properties.

Basic Drawing Methods

  • Use methods like fillStyle, fillRect, and arc to draw shapes.
  • Example to draw a rectangle:
    • Set ctx.fillStyle and use ctx.fillRect(x, y, width, height).

Handling Canvas Resizing

  • Set canvas width and height to match the window size to avoid stretching.
  • Use window.addEventListener('resize', ...) to adjust canvas size on resize events.

Drawing Circles

  • To draw a circle:
    • Use ctx.beginPath() to start a new shape.
    • Use ctx.arc(x, y, radius, startAngle, endAngle) to create a circular path.
    • Call ctx.fill() to fill the circle, or ctx.stroke() to outline it.

Interactivity: Drawing on Mouse Click

Creating a Mouse Object

  • Create a mouse object to store x and y coordinates of mouse clicks.
  • Use addEventListener('click', ...) to update mouse coordinates.

Drawing on Click

  • Create a function to draw circles at mouse coordinates when the canvas is clicked.
    • Modify the drawCircle function to accept parameters for the coordinates.

Animation Loop

Creating an Animation Loop

  • Use requestAnimationFrame() to create a loop that updates and redraws the canvas.
  • Clear the canvas at the start of each animation frame using ctx.clearRect().

Handle Particles

  • Create a Particle class to manage particle behavior and positioning.
    • Use properties for x, y, size, speedX, and speedY.
    • Define update() and draw() methods for particle movement and rendering.

Generating Multiple Particles

  • Create an array to hold multiple particles.
  • Use a loop to instantiate multiple particles and store them in the array.
  • Update and draw each particle in the animation loop.

Advanced Effects

Color Trails

  • Experiment with color settings using HSL.
  • Assign random colors to particles upon creation.
  • Implement trails by adjusting the canvas clearing method.

Connecting Particles (Constellations Effect)

  • Use a nested loop to calculate distances between particles and draw lines if within a certain range.
    • Implement Pythagorean theorem for distance calculation.
    • Adjust line width based on particle size.

Final Adjustments

  • Tweak particle behavior, sizes, and speeds for visual effects.
  • Allow particles to shrink and be removed from the array when below a certain size.

Conclusion

  • The course covers both basic and advanced concepts in canvas animation.
  • Encouragement for students to experiment and build upon learned techniques.

Full transcript