Learning Guide
Complete guide for creating visual effects with TypeScript.
Introduction
TSL enables you to create real-time graphics using JavaScript and TypeScript. No complex technical knowledge required - just programming skills to create stunning visual effects.
Learning Path
🌱 Fundamentals
Learn the basics of visual programming with TypeScript
| Step | Topic | What You'll Learn |
|---|---|---|
| 1 | Getting Started | Environment setup and first steps |
| 2 | Colors and Coordinates | Color specification and screen coordinates |
| 3 | Time and Animation | Creating dynamic visual expressions |
🎨 Techniques
Master practical drawing techniques
| Step | Topic | What You'll Learn |
|---|---|---|
| 4 | Shapes and Patterns | Basic shapes and repeating patterns |
| 5 | Images and Textures | Loading and processing images |
| 6 | Interactive Effects | Responding to mouse and keyboard |
🚀 Advanced
Learn sophisticated visual techniques
| Step | Topic | What You'll Learn |
|---|---|---|
| 7 | 3D Graphics | Creating three-dimensional visuals |
| 8 | Physics | Dynamic systems and simulations |
Learning Flow
Recommended Order
Getting Started
↓
Colors and Coordinates
↓
Time and Animation
↓
Shapes and Patterns
↓
Images and Textures
↓
Interactive Effects
↓
3D Graphics
Chapter Structure
| Section | Content |
|---|---|
| Overview | What you'll learn in this chapter |
| Basic Examples | Simple code examples and results |
| Detailed Explanation | In-depth concepts and techniques |
| Application Examples | More complex real-world examples |
Learning Prerequisites
Required Knowledge
| Technology | Level | Description |
|---|---|---|
| JavaScript | ★★★☆☆ | Basic variables and functions |
| Math | ★☆☆☆☆ | Elementary arithmetic (addition, multiplication) |
| HTML/CSS | ☆☆☆☆☆ | Basic web page structure |
Browser Requirements
| Browser | Minimum Version | Recommended |
|---|---|---|
| Chrome | 80+ | Latest |
| Firefox | 75+ | Latest |
| Safari | 14+ | Latest |
| Edge | 80+ | Latest |
Tutorial Features
Progressive Learning
Each chapter builds on previous knowledge, allowing you to learn techniques step by step.
Hands-On Approach
Not just theory - write actual code and see immediate results on screen.
Visual Understanding
Code results are instantly visible, making concepts intuitive to grasp.
Community and Support
Learning Resources
- 📚 Official Documentation: Technical reference
- 🎨 Sample Gallery: Various visual examples
- 💬 Community Forum: Q&A exchange
Learning Tips
- Take small steps: Don't try to learn everything at once
- Actually write code: Don't just copy-paste, write it yourself
- Enjoy trial and error: Mistakes and unexpected results are part of learning
- Create projects: Combine learned techniques to build original works
Math Concepts Made Simple
Understanding Numbers in Graphics
In visual programming, we work with different types of numbers:
- Coordinates: Numbers that tell us where something is on screen
- Colors: Numbers that represent how bright red, green, and blue should be
- Time: Numbers that change continuously to create animation
- Angles: Numbers that control rotation (like the hands of a clock)
No Advanced Math Required
You don't need to understand complex mathematics. TSL handles the difficult parts automatically. You just need to understand:
- Adding and subtracting numbers
- Multiplying numbers (making things bigger/smaller)
- What coordinates mean (like finding a location on a map)
Next Steps
When you're ready, start with Getting Started to begin your journey.
Enjoy exploring the world of visual programming with TypeScript!