GPU Accelerated Visualizations in Education

Aaron Montag and Jürgen Richter-Gebert
Technical University of Munich, Germany

Coimbra, June 29

Technical Background

Tasks that initially were done on the CPU can now be accelerated on the GPU.

However: The programming concepts in conventional programming are quite difficult:

Shaders/kernels are in separate language (GLSL, CUDA C…)

The number of lines of code drastically increases

GPU specific code often causes platform dependency

\Rightarrow additional development effort is enormous, not suitable for education

Our answer: CindyGL

a plug-in for CindyJS, a Cinderella compatible framework for the web.

Brings easy shader programming via WebGL into dynamic geometry software
WebGL: a JavaScript API for interactive 3D and 2D graphics without the use of plug-ins.

CindyGL translates a subset of CindyScript to GLSL \rightarrow One programming language for both the CPU and GPU

Aim: Making WebGL easy for students and instructors

A minimal example

For each pixel with coordinates x and y a grayscale-value is computed.

CindyGL in the classroom: Waves

Aim: simulate the interference patterns of water waves

An image of a single wave:

seconds() returns the exact time \rightarrow enables animations.

Two circular sinusoidal waves

Alternatively: the double slit experiment

Areas of destructive interference become immediately visible.

Why using GPU Accelerated Visualizations in Education?

Instructors:

fast creation of appealing visual teaching material, which can be easily shared

Students:

Interactive generation of visual content
Strongly motivates the visual learning type
Connect learning contents from Mathematics, Computer Science, Physics and other fields

Colors in CindyGL

If colorplot outputs a three component-vector, the color is obtained by additive mixing of red, green and blue.

Phase portraits of complex functions.

Assign colors to complex numbers based on their argument (Wegert 2012).

z=x+i \cdot y is the pixel coordinate as complex number.

Convergence discs of Taylor series

phase portrait of a function f:\mathbb{C}\to\mathbb{C}.

Approximation \sum_{k=0}^n \frac{f^{(k)}(a)}{k!} (z-a)^k through Taylor polynomials

Deformation of images

For each pixel we look up a color in a texture at the given coordinates.

Deformation of images (complex)

Also access to the webcam is possible

Raycasting

Aim: render the surface x^2+y^2+z^2 - 1 = 0

The intersection of the ray behind each pixel with the surface is computed.

Raycasting (Advanced)

The stereographic projection

Editing spherical images

The (spherical) Droste effect

Further Applications of `CindyGL`

Fractals & Limit sets

FFT

Partial Differential Equations

Fluid Simulation

Video-Deformations with Henry Segerman

Monte Carlo Raytracing

Celluar Automata

Thank you!

More information on cindyjs.org.

Tutorial for CindyGL: cindyjs.org/docs/cindygltutorial/

References

(Stussak 2009) (Gagern et al. 2016) (Montag and Richter-Gebert 2016) (Wegert 2012) (Schleimer and Segerman 2016) (Klöckner et al. 2012)

Gagern, Martin von, Ulrich Kortenkamp, Jürgen Richter-Gebert, and Michael Strobel. 2016. “CindyJS.” In International Congress on Mathematical Software, 319–26. Springer.

Klöckner, Andreas, Nicolas Pinto, Yunsup Lee, Bryan Catanzaro, Paul Ivanov, and Ahmed Fasih. 2012. “PyCUDA and Pyopencl: A Scripting-Based Approach to Gpu Run-Time Code Generation.” Parallel Computing 38 (3). Elsevier: 157–74.

Montag, Aaron, and Jürgen Richter-Gebert. 2016. “CindyGL: Authoring Gpu-Based Interactive Mathematical Content.” In International Congress on Mathematical Software, 359–65. Springer.

Schleimer, Saul, and Henry Segerman. 2016. “Squares That Look Round: Transforming Spherical Images.” arXiv Preprint arXiv:1605.01396.

Stussak, C. 2009. “RealSurf-a Gpu-Based Realtime Ray Caster for Algebraic Surfaces.” In Proc. Spring Conf. Computer Graphics.

Wegert, Elias. 2012. Visual Complex Functions: An Introduction with Phase Portraits. Springer Science & Business Media.