Creative Coding with Canvas & WebGL

4 hours, 45 minutes CC
Creative Coding with Canvas & WebGL

Course Description

Learn to use Canvas and WebGL with ThreeJS in this JavaScript course on Creative Coding! Tour the vast landscape of graphics programming on the web. Learn about generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. These are the fundamental concepts behind creative development work, including VR/AR apps, games, art installations, interactive web experiences, and various other forms of computational arts.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: December 11, 2018

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 14 minutes
  • Introduction
    Matt DesLauriers introduces himself and the general structure of the workshop. Generative art is defined, and some interesting projects are highlighted within the field, showcasing work that can be created with code for both artistic and commercial purposes.
  • Setup & Guidebook
    Matt introduces the repo for the workshop, which includes recommendations for tooling, a cheatsheet, external repos that will be utilized, and a quick how-to for command line arguments. We recommend using Node version 16+ in this course.

Print Art with Canvas

Section Duration: 1 hour, 15 minutes

Physical World Canvas

Section Duration: 8 minutes

Three Dimensional Thinking

Section Duration: 51 minutes

Making a GIF

Section Duration: 23 minutes


Section Duration: 58 minutes


Section Duration: 52 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now