You can use JavaScript to create some amazing pixel effects.

We've just published a course that will teach you how to use JavaScript to create really cool effects with images and text. You will learn multiple different particle effects with vanilla JavaScript and HTML canvas.

This course was developed by Frank Dvorak. Frank loves to demonstrate his creative coding experiments on his own YouTube channel, and now he is sharing some of his coolest experiments with the freeCodeCamp community.

In this course you will learn to make your website come to life with interactive animated logos or headers. You will also get a chance to practice fundamental JavaScript coding techniques using fun examples.

The tutorial starts with a simple beginner friendly project, where you will learn to analyze an image for pixel data and use it to color shift the image and turn it into grayscale.

Then you will use that basic knowledge in a powerful way to create many different advanced animations with vanilla JavaScript and HTML canvas, completely from scratch.

The course features four different projects. Here are the sections in the course:

Project 1: Introduction to pixel manipulation for beginners

  • How to bring image into HTML canvas project
  • How to analyze image for pixel data
  • How to turn image into grayscale

Project 2: Black and white pixel rain using image data

  • Particle system using JavaScript classes
  • Connect particle movement to pixel data

Project 3: Pixel flow effects

  • HTML canvas gradients, filters and other experiments

Project 4: Interactive particle text

  • Creating particles
  • Particle physics and mouse interactions
  • How to shape particles as letters
  • Constellations effect from particles.js with vanilla JavaScript

Watch the full course below or on the YouTube channel (2-hour watch).