Lecture Notes: Advanced Particle Effect on HTML Canvas

Introduction

• Transition from drawing a single circle to creating an advanced particle effect.
• Goals: Improve front-end web development skills using HTML Canvas and JavaScript.

Project Setup

1. Project Folder Contents:

   • index.html: HTML markup.
   • style.css: Styling for the canvas.
   • script.js: JavaScript functionality.

2. index.html Structure:

   • Basic web page markup with title.
   • HTML5 Canvas element with id canvas1.
   • Link to style.css in the head.
   • Link to script.js before the closing body tag.

3. Canvas Basics:

   • The canvas is a transparent element where graphics can be drawn using JavaScript.
   • Positioning:
     • Set canvas to cover the entire page using CSS.
     • Style: position: absolute; background: black; width: 100%; height: 100%; top: 0; left: 0;

JavaScript Basics for Canvas

1. Getting Canvas Element:

   • Create a reference to the canvas in script.js:

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

2. Canvas Drawing Methods:

   • Accessing properties like fillStyle, strokeStyle, etc.
   • Common methods: arc, fillRect, fillText.

3. Drawing Shapes:

   • Example: Drawing a rectangle with ctx.fillRect(10, 10, 50, 150);
   • To draw a circle, use ctx.arc(x, y, radius, startAngle, endAngle) and call ctx.fill() after ctx.beginPath().

Handling Canvas Resizing

1. Event Listener for Resize:
   • Set canvas width and height to match the window dimensions.
   • Use addEventListener for resize to dynamically adjust dimensions.
   • Re-draw shapes inside the resize function to maintain visibility.

Custom Mouse Object for Interactivity

1. Tracking Mouse Coordinates:

   • Create a mouse object with x and y properties to store mouse coordinates.
   • Update coordinates on mouse click and mouse move events.

2. Drawing on Click:

   • Create a drawCircle function to draw a circle at the mouse position.
   • Call this function inside mouse event listeners.

Animation Loop

1. Creating Animation:

   • Define an animate function to repeatedly call drawing methods.
   • Use requestAnimationFrame for a smooth animation loop.
   • To clear the canvas, use ctx.clearRect(0, 0, canvas.width, canvas.height);.

2. Adding Particles:

   • Create a Particle class to manage individual particle properties (position, size, speed).
   • Implement methods for each particle to update its position and draw it on canvas.

Advanced Effects

1. Adding Randomized Particle Movement:

   • Initialize particles with random positions and speeds.
   • Update their positions using the update method based on their speeds.

2. Implementing Constellation Effect:

   • Create lines between particles based on their proximity.
   • Use nested loops to compare distances between particles and draw lines if they are within a specified range.

3. Dynamic Color and Size:

   • Use HSL for dynamic colors.
   • Assign each particle a color at creation and allow it to remember that color.
   • Update particle sizes and clear old paint for fading trails.

Conclusion

• Successfully created an interactive particle system using only vanilla JavaScript and HTML canvas.
• Encourage practice and exploration of different visual effects based on the provided concepts.