Coursera Plus Annual is 40% Off — Ends June 29.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Frontend Masters

Creative Coding with Canvas & WebGL

via Frontend Masters

Go to class Write review
CodeSignal Ad

Learn the Skills Netflix, Meta, and Capital One Actually Hire For

Learn More → Simplilearn Ad

Earn a Michigan Engineering AI Certificate — Stay Ahead of the AI Revolution

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
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.

Syllabus

  • Introduction
  • Setup & Guidebook
  • Installing canvas-sketch-cli
  • Canvas Sketch Introduction
  • Canvas API Basics
  • Canvas Sketch Applications
  • The Grid
  • Drawing the Grid
  • Linear Interpolation
  • Adding Randomness
  • Radius & Organic Randomness
  • Color Palettes
  • Noise
  • Coding Noise with noise2D
  • Drawing with Text Characters
  • Canvas Q&A
  • Generative Wall Drawings
  • Generative Wall Exercise
  • Takeaways of Generative Wall Exercise
  • The Third Dimension
  • Three.js Concepts
  • Coding a ThreeJS Isometric Cube
  • Capabilities of Three.js: Isometric Perspective
  • Capabilities of Three.js: Color, Lighting, and Composition
  • Three Dimensional Thinking Q&A
  • Rationale for Simple Shapes
  • Making a GIF
  • Exporting GIFs & MP4s
  • Easing & Trigonometry
  • Troubleshooting and webGL Q&A
  • Shaders
  • Primary Branding
  • Shaders Example: Introduction
  • Shaders Example: Shape & Form
  • Shaders Example: Step Functions
  • Shaders Example: Additional Thoughts
  • Shaders Q&A
  • Hot Reloading & Future Features
  • Introducing Noise
  • Introducing Color
  • Additional Thoughts and Q&A
  • Live Example: Thought Process
  • Live Example: Advanced Topics
  • Penplotter
  • Blender
  • Current Projects

Taught by

Matt DesLauriers

Reviews

Start your review of Creative Coding with Canvas & WebGL

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.