Introduction to Computer Graphics, jgfoster/2022

Source Code and Demos


This page contains links to source code for the programs that are used as examples in this book. In the web site download of the book, the source code examples can be found in the folder named source. This page also contains a list of links to all of the "live demos" that are used in the book; they can be found in the folder named demos.

(Note: Examples and demos for HTML canvas graphics, three.js, and WebGL are html files, which can be opened in a web browser. Many of the html programs use images. In certain browsers, the three.js and WebGL programs that use images will not work when the html files are loaded from a local hard drive. That is, they will fail in some web browsers when run from the source or demo folder in the web site download of this book. The programs should work OK when loaded from a web server.)


1. Java Graphics2D Examples

There are a few examples in Section 2.4 and Section 2.5 that use Java's 2D graphics API. In the web site download, the source code for these examples can be found in the folder named java2d inside the source folder. Each example is a single file that can be compiled to produce an application; no additional Java files are needed.

  • HierarchicalModeling2D.java — shows a simple animated scene, with a moving cart and rotating windmills, that uses hierarchical modeling. In this version of the program, the hierarchy is implemented procedurally, using subroutines to draw the objects in the scene.
  • SceneGraphAPI2D.java — shows the same scene as the previous example, but this time implemented using a scene graph data structure. The scene graph is implemented using static nested classes in the main class.
  • GraphicsStarter.java and AnimationStarter.java draw simple static and animated scenes, respectively, and are meant to be used as a framework for experimenting with Java graphics. EventsStarter.java is a similar framework for working with mouse and key events in a graphics program.
  • PaintDemo.java draws a polygon that can be filled with either a gradient or a texture image, and lets you adjust their properties. This is just a demo of Java paints. The image files QueenOfHearts.png and TinySmiley.png are part of this program and must be in the same location as the compiled Java class files when the program is run.
  • JavaPixelManipulation.java is a demo that manipulates colors of individual pixels in a BufferedImage. The user can draw a simple picture or load an image from a file. A "Smudge" tool smears out pixel colors, and filters modify the image by performing averaging operations on the pixel colors in the image.

2. HTML Canvas 2D Examples

The 2D canvas API is discussed in Section 2.6, and several examples are mentioned in that section. Canvas examples are written as web pages, and you can look at the web page in a browser to see what it does. However, you are also meant to read the source code. And the first four examples are meant to be used as a basis for your own experimentation. (Note that all of the live demos in Chapter 2 use the canvas API, but you are not necessarily meant to understand the source code of the demos.) In the web site download of this book, you can find these examples in the canvas2d folder inside the source folder.

  • GraphicsStarter.html is a minimal framework for drawing on an HTML canvas. It includes examples of drawing text and various shapes.
  • GraphicsPlusStarter.html adds a few convenience functions to the previous example, including a function for setting up a coordinate system on the canvas and functions to draw shapes such as lines and ovals that are not included in the basic API. It includes examples of using transforms
  • AnimationStarter.html adds animation to the previous example and includes a simple example using hierarchical modeling.
  • EventsStarter.html is a minimal framework for using keyboard and mouse events with a canvas, with some examples of basic event handling.
  • SimplePaintProgram.html lets the user draw using simple shapes. There is also a "smudge" tool that lets the user smudge the drawing as if it is drawn in wet paint; this is an example of pixel manipulation in the HTML canvas API. The program shows how to use an "off-screen canvas." The demo program c2/SimplePaintDemo.html is a version of this program that uses an "overlay canvas" instead of an off-screen canvas.

3. Scalable Vector Graphics Examples

Section 2.7 discusses SVG, a scene description language for 2D vector graphics. Several examples were discussed in that section. These examples can be opened in a web browser to see the images they produce. View the source code for the web page to see the program that produces the image. You can also open the files in a text editor to read the source. Some of the examples produce animated images. SVG images should work in almost all modern web browsers. These examples can be found in the svg folder inside the source folder.

  • first-svg-example.svg is a very short first example that just draws a few basic shapes.
  • svg-starter.svg shows the basic document structure for an SVG image, includes examples of most of the basic shapes, and has a lot of comments to explain what is going on.
  • svg-face.svg is a very simple first example of grouping.
  • svg-hierarchy.svg is an example of hierarchical modeling that makes a model of a wheel and a model of a cart that uses two wheels as components. The image shows a wheel and four copies of the cart. The wheel and cart models are also used in the cart-and-windmill animation at the end of this list.
  • first-svg-animation.svg contains examples of simple animation, keyframe animation, and transform animation.
  • hierarchical-animation.svg shows a simple animated hierarchical model.
  • cart-and-windmill.svg is a more complex example of hierarchical modeling in SVG. The scene is an animation that shows a "cart" moving down a road as windmills turn in the background. The animation is the same as the one implemented in the Java example java2d/HierarchicalModeling2D.java and in the JavaScript demo c2/cart-and-windmills.html.

4. OpenGL 1.1 Examples

OpenGL 1.1 is the topic of Chapter 3 and Chapter 4. Examples in those chapters primarily use the C API for OpenGL. However, the Java API, JOGL, is also discussed. Most program examples are available in both the C and the Java APIs. The JOGL versions can be found in the directory named jogl inside the source directory. The C versions, which use the GLUT library to create and manage OpenGL windows, can be found in the directory named glut inside source. (Many of these programs use a "camera" API defined in jogl/Camera.java for Java and in glut/camera.c and glut/camera.h for C.)

The OpenGL demos in the book are written using glsim.js, a JavaScript library that implements a small subset of the C API for OpenGL 1.1 on top of WebGL 1.0. Information about glsim can be found in glsim/glsim-doc.html. Some of the program examples are available in HTML versions that use the glsim library. They can be found in the glsim directory inside the source directory.


5. Three.js Examples

Three.js is a JavaScript library for 3D graphics on Web pages, using WebGL and the HTML canvas. It is discussed in Chapter 5. The examples can be found in the folder named threejs, inside the source folder of the web site download. All of the examples use the JavaScript file threejs/three.min.js, which is a "minified" version of the library, not meant for human readers. A human-readable version, threejs/three.js is also available. The version is three.js Release 129. Note that although three.js is written using JavaScript modules, the examples in this book only use the non-modular form of the library. Three.js is an open-source project. It can be downloaded from threejs.org.

  • threejs/full-window.htmlThree.js is typically used to write programs that fill the browser window and continually run an animation. This example shows how to do that, but my other examples do not follow the same pattern. The animation shows colored balls bouncing around inside a translucent box. The user can rotate the scene with the mouse. From Section 5.1
  • threejs/modeling-starter.html — A starter program for experimenting with building and animating a scene graph model with three.js. The user can rotate the model using the keyboard. It includes a simple example. From Section 5.1
  • threejs/diskworld-1.html — Shows an animated model of a simple "car" driving around the edge of a disk, with "trees" made from a cylinder and a cone. Based on the previous sample program. From Section 5.1
  • threejs/vertex-groups.html — Shows how to use an array of materials on a cube and on a pyramid whose geometry is constructed by hand. This uses the "vertex group" feature of THREE.BufferedGeometry. This is also a version threejs/vertex-groups-indexed.html that represents the pyramid using the indexed face set pattern. From Section 5.2
  • threejs/textured-pyramid.html — Shows the same pyramid as the previous example, with a texture. Shows how to define texture coordinates for a three.js geometry. From Section 5.2
  • threejs/curves-and-surfaces.html — Creates several surfaces using a parametric surface, tube geometry, lathing, and extrusion. From Section 5.2
  • threejs/json-model-viewer.html — Displays models that are loaded from files in the JSON format used by three.js. I exported one of the models from Blender. The others are from the three.js download. (See the demo c5/mesh-animation.html to see animated versions of two of the models.) From Section 5.2
  • threejs/instanced-mesh.html — A small example of using a THREE.InstancedMesh object, which makes it possible to draw a large numbers of instances of the same basic geometry, with different transformations and, optionally, different colors for each copy. From Section 5.3
  • threejs/skybox.html — Demonstrates using a cubemap texture to make a skybox. From Section 5.3
  • threejs/reflection.html — A demonstration of using an environment map to simulate the reflection by an object of its environment. The environment is a skybox. From Section 5.3
  • threejs/refraction.html — A demonstration of simulated refraction. This example is almost identical to the previous example, except for using refraction rather than reflection. From Section 5.3

6. WebGL Examples

WebGL is the version of OpenGL for use on Web pages. It is discussed in Chapter 6 and Chapter 7. The sample programs can be found in a folder named webgl, inside the source folder of the web site download. The sample programs for WebGL are HTML files. Run the programs by opening them in a Web browser. View the source code in a text editor or using a "View Source" command in a web browser. Part of a WebGL program is written in JavaScript. The other part consists of a vertex shader and a fragment shader written in GLSL. Many of these examples rely on scripts that are in the same webgl directory. In particular, the 3D examples use the glMatrix library (Subsection 7.1.1).


7. Live Demos

This book includes "live" or "interactive" demos that are embedded in the web pages. The demos are small programs written as web pages using JavaScript and either HTML canvas graphics or WebGL. Although they are designed to be run as small applications inside other web pages, they can also be run as independent web pages. In the web site download of this book, you can find the demos in the folder named demos, organized by chapter number. They can be run directly from that folder. Note that each of the demos requires certain other files that are contained in the demos folder; if you copy a demo to a different location, be sure to also copy all the files on which it depends.

The demos from Chapter 2 use the 2D canvas graphics API, which will work in almost all modern web browsers, Demos from the remaining chapters use WebGL, which will also work with almost all modern desktop browsers, and many browsers on mobile devices. (However, WebGL might still have problems in some of these browsers on some machines.) All demo programs that use WebGL will work with WebGL 1.0.

The demos in Chapter 3 and Chapter 4 use glsim.js, a JavaScript library that I wrote to simulate a subset of OpenGL 1.1. Information about glsim can be found in glsim/glsim-doc.html.

For many of the demos, the reader is not expected to understand the program code for the demo at the point where the demo occurs in the book. Note that the JavaScipt code in the demos has not been updated to use the more modern version of JavaSctipt that is covered in Section A.3.


James Foster, January 2022