Master Animations using HTML5 Canvas: Create Bubbles with JavaScript!

Let’s dive deep into the world of HTML5 Canvas animations as I show you how to create dynamic, animated bubbles using JavaScript. No CSS required!

Here’s what we will learn -

1. Creating Circles: Explore the canvas arc method to draw circles.

2. Animation: Harness the power of requestAnimationFrame for seamless and efficient circle animations.

3. JavaScript Classes: Implement JavaScript classes to manage multiple bubbles, without repetitive code.

4. Styling Bubbles: Make your circles look like bubbles by adding stroke styles and fill styles, giving your bubbles a cool 3D effect.

The Code

Getting Started: Set up an HTML5 Canvas element that fills the entire window. Access the canvas context for drawing. Access the full code on CodePen

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Creating Bubbles: We will handle click events to draw bubbles precisely where you click, using event coordinates.

const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;
  drawCircle(x, y);
};
canvas.addEventListener('click', handleDrawCircle);

Drawing Circles: Add functionality to drawCircle function to use the arc method to create circles and apply stroke and fill styles for a visually appealing effect.

const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);
  context.strokeStyle = 'white';
  context.stroke();
};

Animating Bubbles: Make bubbles move gracefully by incrementing their coordinates. We use the requestAnimationFrame method for continuous animation.

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  move();
  drawCircle(x, y);
  requestAnimationFrame(animate);
};
animate();

Creating Particles: Use JavaScript classes to create Particle class, encapsulating attributes like position, size, and movement.

class Particle {
  constructor(x = 0, y = 0) {

    // Initialization code here

  }
  draw() {

    // Drawing code here

  }
  move() {

    // Movement code here

  }
}

Multiple Bubbles: Create and manage multiple bubbles by using an array to store and animate them.

const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;
  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};

Gradient Styling: Achieve a cool bubble effect with gradient fill styles using createRadialGradient method.

const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');
context.fillStyle = gradient;

Access the Full code on CodePen

Links from the Tech World

1. Things you forgot (or never knew) because of React - This is an interesting read where the author, Josh Collinsworth, argues that React, while widely used, has fallen behind other frontend frameworks and discusses various shortcomings of React, including its outdated features and ecosystem limitations and makes a case for exploring alternatives to React in modern frontend development.

2. Clean Code practices for JavaScript - Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript.

3. How does GPT-4 work and how to build apps with it? - A wonderful talk that explains AI terminologies and gives inspiration on 4 categories of apps that can be created using GPT.

Coming up on Fireside Chats with Developers:

September 9, 2023 @ 9AM PST - Discussing Career, Imposter Syndrome and Getting over burnout with Sunny Gupta.

Personal Life Tidbit:

I went to a beautiful hike in Vancouver, British Columbia, Canada and let me tell you – I witnessed paradise. Not in the I-almost-died heaven, but in the I-can’t-believe-this-place-exists heaven. Check this picture out to see for yourself.