Every shape is a program.

Draw a triangle and VAMS writes the OpenGL that draws it, then shows the math underneath. No compiler, no setup. Just the concept.

Open the app Browse the lessons

glBegin(GL_TRIANGLES);
  glVertex2f(-0.5f, -0.5f);
  glVertex2f( 0.5f, -0.5f);
  glVertex2f( 0.0f,  0.5f);
glEnd();

Fig. 1. A triangle in VAMS and the OpenGL calls that draw it. The selected vertex and its line of code stay linked.

OpenGL is taught as code you can't see.

Setup before shapes. A compiler, a GLUT install and a build script stand between a student and their first triangle.
Cause and effect, delayed. Every change means edit, compile, run, then work out which line did what.
The math stays hidden. Coordinates, colour values and matrices are applied out of sight.

One scene, three views.

Drag a vertex. The code and the math follow.

Canvas

Drag a vertex, or focus one and use the arrow keys. Hold Shift for bigger steps.

Code

glBegin(GL_TRIANGLES);    glColor3f(1.00f, 0.00f, 0.00f);    glVertex2f(-0.5000f, -0.5000f);    glColor3f(0.00f, 1.00f, 0.00f);    glVertex2f(0.5000f, -0.5000f);    glColor3f(0.00f, 0.00f, 1.00f);    glVertex2f(0.0000f, 0.5000f);glEnd();

Math

Vertex: 3 of 3
Pixel: (150, 75) in a 300 × 300 view
x: 2 · 150 / 300 − 1 = 0.00
y: 1 − 2 · 75 / 300 = 0.50

This is VAMS's own code generator, running on this page.

Five sections, one pipeline.

Pipeline
The rendering pipeline, rasterization, normalized device coordinates and the GLUT program structure.
- glutInit
- glutDisplayFunc
- glutMainLoop
Primitives
glBegin and glEnd primitives, colour, line styles, bitmap text and GLUT callbacks.
- glBegin
- glColor3f
- glLineStipple
Buffers
Immediate mode, vertex arrays and VBOs, side by side.
- glVertexPointer
- glBufferData
- glDrawElements
Transforms
Translate, rotate and scale, the matrix stack and glOrtho.
- glTranslatef
- glRotatef
- glPushMatrix
Textures
Texture objects, UV coordinates, filtering and wrapping.
- glBindTexture
- glTexParameteri
- glTexCoord2f

Author: Build freely. The code follows every change.
Lesson: Guided steps and exercises that check your scene.

See every lesson

Built like the thing it teaches.

One-way data flow: Every action updates one store, and the canvas, code and math recompute from it. Views only read.
Code is a pure function of the scene: The same scene always produces byte-identical C++.
Verified: More than 270 automated tests, with the matrix math checked against an independent reference implementation.

Preact
TypeScript
Zustand + Immer
PixiJS 8
Vitest

Panic@TheCisco.

BS Computer Science, Software Engineering. FEU Institute of Technology

Mikhael Edman P. Gomez: Primary Developer & Designer, Research & Documentation
Justine Jhigz D. Vizco: Thesis Leader, Research, Documentation & QA
Johann Patrick S. Taguiam: Research, Documentation & QA
Elisa V. Malasaga: Thesis Adviser

The full story

Try it.

Open the app

vams.pages.dev

Runs in your desktop browser. Nothing to install.

Every shape is a program.

Pipeline

Primitives

Buffers

Transforms

Textures