GRAPHICS-05Repository only
AI & Learning · WebGL learning tool
I documented a browser-based shader learning playground designed to connect shader code, mathematical concepts and the pixels they produce.
The problem I addressed
I found that shader mathematics can feel abstract when code, coordinate systems and rendered output are learned separately.
What I built
- A detailed product and lesson plan
- Lesson definitions for UV coordinates, distance-based shapes, colour mixing and sine motion
- A planned Shader Math Lab using WebGL and Canvas 2D
- Node-based smoke-test specifications for the intended project structure
My role
I designed and documented the learning tool concept and its intended lesson structure.
Why this matters to me
I use this project to document how I would make complex graphics concepts visible, while keeping its incomplete repository state explicit.
Decisions I made
- Kept the lessons small and inspectable
- Paired each mathematical idea with immediate visual feedback
- Added basic automated checks without introducing a large test framework
Challenges I handled
- Explaining graphics math clearly
- Keeping rendering work controlled
- Designing lessons that reveal rather than hide the underlying code
System signals
- Documented concept
- Test specification
- Small intended dependency surface
- Incomplete repository
Technologies used
HTMLCSSJavaScriptWebGLCanvas 2DNode.js tests
Current limitations
- I confirmed that the public repository does not currently include the referenced index.html, main.js or styles.css files
- I cannot run the included smoke test until I restore those page assets
- I do not present visual evidence until I can verify the runnable implementation