WebGL: More Drawing Tools

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 three More Drawing Tools) 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:

  • Plotting function sinc(x) = \frac{sin(\pi x)}{\pi x} for x = [-4.0, 4.0).

    Live WebGL version is here.
  • Tiling Window with Dinosaurs.

    Live WebGL version is here.
  • Tiling Window with Flipped Dinosaurs.

    Live WebGL version is here.
  • Zooming in and out a dinosaur. Use + and - button to zoom in and out. Following screenshot is taken after zooming in certain amount.

    Live WebGL version is here.
  • Clipping lines against a rectangle using Cohen-Sutherland algorithm. 50 random lines are generated and clipped against the 25% gray rectangle. Clipped portions are drawn in red. The implementation is based on the C/C++ example from Wikipedia.

    Live WebGL version is here.
  • Plotting sinusoidal sequence y_{k} = ay_{k - 1} - y_{k - 2} \text{ for } k = 1, 2, 3, ... \text{ where } y_{k} = 0 \text{ for } k < 0, y_{0} = 1, a = 2 \cos \frac{2 \pi}{S} \text{. Following screenshot is taken for } S = 59 \text{.}

    Live WebGL version is here.
  • Building a figure out of several turtle motions. The hook on left is generated via three pairs of turtle forward, turn commands and the figure on right is generated by calling hook four times.

    Live WebGL version is here.
  • Polyspirals using Turtle Graphics.

    Live WebGL version is here.
  • Meander using Turtle Graphics.

    Live WebGL version is here.
  • The 5-, 11- and 17-Rosettes.

    Live WebGL version is here.
  • Pattern of 21 stars.

    Live WebGL version is here.
  • n-Gons sharing a common edge.

    Live WebGL version is here.
  • Rotated Hexagons.

    Live WebGL version is here.
  • Shape based on pentagon and arcs.

    Live WebGL version is here.
  • Patterns of Teardrops.

    Live WebGL version is here.
  • Curves with simple polar forms. Cardioid, Rose curves with 3 and 7 petals, Archimedean Spiral.

    Live WebGL version is here.
  • Electrostatic Field Lines with Orthogonal Circles.

    Live WebGL version is here.
  • Basic Tiling.

    Live WebGL version is here.
  • Truchet Tiles.

    Live WebGL version is here.
  • Random generated polyline for points on a parametric ellipse. A flurry of seemingly unrelated lines first appears, but soon the eye detects some order in the chaos and an elliptical envelope emerging around the cloud of lines. First screenshot is taken just after start, second one is taken after some time.


    Live WebGL version is here.

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

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

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