Pixel Effects with JavaScript and HTML Canvas - Tutorial

Overview

This course teaches how to implement pixel effects using JavaScript and HTML canvas. The learning outcomes include creating interactive animated logos or headers, practicing fundamental JavaScript coding techniques, and developing multiple pixel effects from basics to advanced. The course covers skills such as analyzing image pixel data, color shifting images, creating grayscale images, implementing particle systems, connecting particle movement to pixel data, using HTML canvas gradients and filters, and shaping particles as letters. The teaching method involves hands-on projects and coding demonstrations. This course is intended for individuals interested in web development, JavaScript programming, and creating visual effects on websites.

Syllabus

Intro.
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.