WebGL: Getting Started: Drawing Figures

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.
  • A major portion of the codes are directly taken from Learning WebGL lessons written by Giles Thomas.
  • WebGLUtils utility library from Google is used for initializing WebGL and requesting animation frames.
  • glMatrix is used as matrix and vector library.
  • 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.

Here are the examples:

  • Three simple dots where pointsize = 4.

    Live WebGL version is here.
  • Big Dipper Constellation.

    Live WebGL version is here.
  • Random Sierpinski Gasket with 3000 points.

    Live WebGL version is here.
  • Dot plot of function f(x) = e(-x) * cos(2 * pi * x) for x = [0, 4).

    Live WebGL version is here.
  • Line graph of function f(x) = 300 - 100\cos{\frac{2\pi x}{100}} + 30\cos{\frac{4\pi x}{100.0}} + 6\cos{\frac{6\pi x}{100.0}}  . Origin is at top left, y increases downwards.

    Live WebGL version is here.
  • Loading polylines data from a file and render them. The data file dino.dat is taken from here.

    Live WebGL version is here.
  • A village of parameterized houses. Houses are drawn by calling function parameterizedHouse(peak, width, height).

    Live WebGL version is here.
  • Two aligned rectangles filled with colors.

    Live WebGL version is here.
  • Random number of rectangles with random sizes, colors at random positions.

    Live WebGL version is here.
  • Checkerboard pattern.

    Live WebGL version is here.
  • 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.
  • Random constellation of dots where random positions are generated using Linear congruential generator n(i + 1) = [A * n(i) + B] % m. Input A, B, m, seed n(0) and generate points. Following screenshot is taken for values A = 1664525, B = 1013904223, m = 4294967296, n(0) = 123456.

    Live WebGL version is here.
  • Consider the function
    f(x) =  \left\{  	\begin{array}{ll}  		x / 2  & \mbox{if } x\text{ is even} \\  		3x + 1 & \mbox{if } x\text{ is odd}  	\end{array}  \right.
    Now 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.
  • The Gingerbread Man.

    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.

All codes can be downloaded from here. Any feedback is welcome.

This entry was posted in Graphics, WebGL and tagged , . Bookmark the permalink.

3 Responses to WebGL: Getting Started: Drawing Figures

  1. Pingback: WebGL around the net, 3 May 2012 | Learning WebGL

  2. Amrin says:

    Thanku so much bhaijan 4 da help…..

  3. Abdullah says:

    Man you really helped me, i already had a line drawing webpage using the canvas lines properties but the line would always be drawn in wrong positions. thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s