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
Scrimba Ad

Free courses from frontend to fullstack and AI

Learn More → GetSmarter Ad

AI Adoption - Drive Business Value and Organizational Impact

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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.