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