
Creative Coding with WebGL and Three.js: Unlocking Interactive Design Mastery
Course Description
Explore the exciting realm of creative coding with our in-depth course on WebGL and Three.js. Immerse yourself in the world of 3D graphics, generative art, and custom shaders using GLSL. This course is designed for developers, artists, and creatives who want to master the tools needed to build stunning, interactive experiences. From creating cutting-edge VR/AR applications to crafting interactive websites and computational art, you'll gain the expertise needed to turn your creative ideas into fully realized digital projects.
Throughout the course, you’ll learn how to utilize WebGL and Three.js for 3D rendering, design custom visual effects, and generate dynamic, real-time content. We’ll also cover the fundamentals of GLSL for creating complex shaders that bring your designs to life with rich textures and animations. Whether you're building interactive web projects, immersive environments, or artistic digital works, this course provides the foundational skills to bring your creative visions into the world of interactive design.
By the end of the course, you’ll be ready to push the boundaries of what’s possible on the web, creating experiences that are visually captivating and technologically sophisticated. Join now and take the first step towards mastering creative coding for the next generation of interactive digital design!
Course Curriculum
- 1.Installing canvas-sketch-cli: The First Step in Your Creative Coding Toolbox
- 2. Introduction to Canvas Sketch: Mastering the Fundamentals of Creative Coding
- 3. Understanding the Canvas API: A Beginner’s Guide
- 4. Applications of Canvas Sketch: Unlocking Creative Possibilities
- 5. The Grid
- 6. Creating the Grid
- 7. Linear Interpolation
- 8. Introducing Randomness
- 9. Radius & Organic Randomness
- 10. Color Palettes
- 11. Noise
- 12. Implementing Noise with noise2D
- 13. Creating Art with Text Characters
- 14. Canvas Q&A Session
- 1. Algorithmic Wall Art
- 1. Exploring the Third Dimension
- 2. Interactive Wall Art Exercise
- 2. Core Concepts of Three.js
- 3. Creating an Isometric Cube with Three.js
- 3. Key Learnings from the Generative Wall Activity
- 4. Three.js Features: Isometric Perspective
- 5. Three.js Features: Color, Lighting, and Composition
- 6. 3D Thinking Q&A
- 7. The Logic Behind Simple Shapes
- 1. Understanding Shaders
- 2. Core Branding
- 3. Introduction to Shaders with an Example
- 4. Shaders Example: Shapes and Structures
- 5. Shaders Example: Using Step Functions
- 6. Shaders Example: Further Considerations
- 7. Shader Discussion and Troubleshooting
- 8. Hot Reloading and Upcoming Features
- 9. An Introduction to Noise
- 10. Exploring the Basics of Color