For the last few days I am learning WebGL (and OpenGL too) as a hobby. As part of the learning process I have decided to convert some examples of OpenGL programs to WebGL programs. The book that I am reading currently is Computer Graphics Using Open GL (2nd Edition) by Francis S. Hill. There is a newer edition of this book but I don’t have that with me. Though the basic idea and graphics concepts, maths, algorithms behind these example are taken from this book, the implemented code is largely different as the book is about OpenGL with C++ and here I am working in WebGL with JavaScript. And some of these are present as exercise in the book.

Acknowledgments:

As stated before, the original OpenGL examples/exercises are taken from the book(chapter two Getting Started: Drawing Figures) written by Francis S. Hill.

The code to find out mouse coordinates relative to the canvas is taken from here, suggested by N4ppeL and Ryan Artecona.

Disclaimer: These are not complete tutorials. I have not explained anything regarding maths, graphics, OpenGL, WebGL etc. I have written only some test codes, and written them as a hobby. Anyone can consult with the original book and lessons if interested. And as I am still learning, there could be misconceptions too. If you notice anything wrong please feel free to put a comment. I will try to fix them as early as possible.

Flurry of diamonds. All simple diamond shapes are drawn by calling drawDiamond(center, radius). Live WebGL version is here.

Three polygons. All are drawn by calling drawPolygon(points). Live WebGL version is here.

Draw a point in random color after every click. Following screenshot is taken after enough clicks.Live WebGL version is here.

Draw random colored rectangle with every two mouse clicks. Click points specify the opposite corners of the rectangle. Right click clears the canvas. Following screenshot is taken after 16 left button clicks.Live WebGL version is here.

Draw random Sierpinski Gasket in random color with every three mouse clicks. Click points specify the corners of the Sierpinski Gasket. Right click clears the canvas. Live WebGL version is here.

Draw polyline with mosuse clicks. Every click adds a point in polyline. Right click clears the canvas. Following screenshot is taken after seven clicks. Live WebGL version is here.

Freehand drawing with a fat brush using mouse. Move the mouse while clicking left button to draw. Right click clears the canvas.Live WebGL version is here.

Consider the functionNow construct a sequence of integers by taking an intial positive integer and repeating this function where output of a step is the input of the next step. The Collatz conjecture is: This process will eventually reach the number 1, regardless of which positive integer is chosen initially. For example, if initial input is 11 then we get: 11, 34, 17, 52, 26, 13, 40, 20, 10, 5, 16, 8, 4, 2, 1.

After taking an initial positive integer value, construct a ling graph by plotting number of steps k on x-axis and and value of f(k) on y-axis. Following screenshot is taken for initial value 1234.Live WebGL version is here.

Infinite Regressions of the Golden Rectangle.Live WebGL version is here.

Random perfect maze generator of size R x C. Following screenshot is taken from one particular run with R = 59, C = 47. This article briefly describes the maze generation algorithm.Live WebGL version is here.