archive-edu.com » EDU » H » HWS.EDU

Total: 727

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Introduction to Computer Graphics, Appendix A -- Programming Languages
    t already know Only some basic information about each language is given but hopefully enough to let you understand examples in the book and to write some programs that use the graphics techniques that are covered You should at least be able to work with the sample programs that accompany this textbook Java is obligatory only for Section 2 5 For the material on OpenGL 1 1 in Chapter 3

    Original URL path: http://math.hws.edu/graphicsbook/a1/index.html (2016-02-07)
    Open archived version from archive

  • Introduction to Computer Graphics, Appendix B -- Blender: A 3D Modeling Program
    produce professional graphics and animation Blender can be downloaded from blender org The site includes a great deal of information about what it can do blender org features and how to use it blender org support I have included some work with Blender as part of my computer graphics courses since 2001 as a supplement to the graphics programming that is the main topic of the course While we use only a very small part of Blender s capabilities I believe that it is useful for students to have some experience with interactive 3D modeling It helps them develop their ability to visualize in three dimensions and it lets them see the role that fundamental concepts such as transformations lighting and material and textures play in real applications Most people are intimidated at first by Blender s complex interface but it s actually not difficult to learn how to use it for basic tasks Many of my students have enjoyed using it and have learned enough about it to use it in a final project The material in this appendix was adapted from handouts about Blender that I have written in the past for my computer graphics courses It should

    Original URL path: http://math.hws.edu/graphicsbook/a2/index.html (2016-02-07)
    Open archived version from archive

  • Introduction to Computer Graphics, Appendix C -- Gimp and Inkscape for 2D Graphics
    to get some experience with 2D image manipulation programs Such programs illustrate some important concepts such as color manipulation transparency shape creation and editing Bezier curves and in drawing programs grouping graphical objects into hierarchical structures And the programs are often useful even in 3D graphics for working with texture images This appendix offers just a very brief introduction to Gimp and Inkscape but maybe enough to let you start

    Original URL path: http://math.hws.edu/graphicsbook/a3/index.html (2016-02-07)
    Open archived version from archive

  • Introduction to Computer Graphics Source Code
    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 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 source glut first triangle c jogl FirstTriangle java and glsim first triangle html are C Java and JavaScript versions of the very first OpenGL example a triangle whose vertices are assigned the colors red green and blue You can use this example as a starting point for trying out some basic 2D drawing commands From Section 3 1 glut unlit cube c jogl UnlitCube java and glsim unlit cube html are C Java and JavaScript versions of a program that draws a cube using modeling transformations applied to a square There is no lighting in this program and it uses a basic orthographic projection so the image is not realistic From Section 3 2 glut opengl cart and windmill 2d c for C jogl CartAndWindmillJogl2D java for Java and glsim opengl cart and windmill html for JavaScript are versions of an example of hierarchical modeling and animation in two dimensions with OpenGL 1 1 It illustrates 2D graphics in OpenGL as well as the use of glPushMatrix and glPopMatrix for hierarchical modeling The animation is almost the same as the one implemented in the Java Graphics2D example java2d HierarchicalModeling2D java and in the HTML canvas graphics demo c2 cart and windmills html From Section 3 2 glut camera c and the corresponding header file glut camera h for C or jogl Camera java for JOGL implement a camera API for use with OpenGL 1 1 This is a library for use in other programs not itself a complete program The corresponding API for JavaScript is part of my GLSim library glsim glsim js A camera is used in most of the following examples Discussed in Section 3 3 glut ifs polyhedron viewer c and jogl IFSPolyhedronViewer java are C and Java versions of a program that lets the user view polyhedra that are defined as indexed face sets The polyhedra models are defined in jogl Polyhedron java for Java and in glut polyhedron c and glut polyhedron h for C This program also requires the camera API discussed in the previous item From Section 3 4 glut cubes with vertex arrays c jogl CubesWithVertexArrays java and the JavaScript version glsim cubes with vertex arrays html demonstrate drawing using glDrawArrays and glDrawElements From Section 3 4 glut color cube of spheres c and jogl ColorCubeOfSpheres java draw a large number of spheres using a variety of rendering methods and show the time that it takes to render the image The point is to compare render times for different rendering methods including display lists glDrawArrays and vertex buffer objects The reader is not expected to understand all of the code in this program From Section 3 4 glut glut starter c jogl JoglStarter java and glsim glsim starter html are starter files for writing OpenGL 1 1 applications using C Java and my JavaScript OpenGL simulator These programs don t draw anything but they have function method stubs for drawing as well as for mouse and keyboard interaction and animation Discussed in Section 3 6 glut four lights c and jogl FourLights java are an example of using light sources and material properties The program demonstrates multiple moving light sources and lets the user turn the lights on and off to see the effect The demo glsim fout lights demo html is a JavaScript version of the same program From Section 4 2 glut texture demo c is a C program that shows a variety of textures on a variety of objects It depends on the files glut textured shapes c and glut textured shapes h and on the folder glut textures that contains the texture images used by the program The Java version is jogl TextureDemo java and it requires jogl TexturedShapes java as well as the image folder jogl textures From Section 4 3 glut texture from color buffer c and jogl TextureFromColorBuffer java demonstrate the technique of copying an image from the color buffer using the function glCopyTexImage2D Draws an animated 2D scene and then uses it as a texture on various objects Requires the same textured shape libraries mentioned in the previous item From Section 4 3 glut texture objects c is a small program to demonstrate the use of texture objects to handle multiple textures It is available for C only From Section 4 3 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 The original version threejs three js is also available The version is three js Release 71 Three js is an open source project It can be downloaded from threejs org threejs full window html Three 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 MeshFaceMaterial html Shows how to use a MeshFaceMaterial on a cube and on a pyramid whose geometry is constructed by hand as an indexed face set 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 anaglyph html Uses an AnaglyphEffect to show a scene meant to be viewed with red cyan 3D glasses Aside from the anaglyph effect the program is a copy of threejs full window html 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 webgl webgl rgb triangle html The standard OpenGL example rendered using WebGL a triangle whose vertices are red green and blue where the colors of interior pixels are computed by interpolating colors from the vertices Demonstrates the use of attributes and varying variables From Section 6 2 webgl shape stamper html The user stamps shapes onto the canvas by clicking it with the mouse Properties of the shape are determined by a set of pop up menus Demonstrates the use of uniform variables the preserveDrawingBuffer option on the WebGL context and a simple coordinate transformation in the vertex shader From Section 6 2 webgl moving points html A set of circles moves around in the canvas bouncing off the edges Shows how to use the POINTS primitive in WebGL and introduces the discard statement in the fragment shader From Section 6 2 webgl simple texture html A very minimal texture example It just applies a texture image to a triangle From Section 6 4 webgl texture from pixels html Shows how to load a texture from an array that contains the pixel color component values for the texture Also demonstrates the difference between a gl LINEAR and a gl NEAREST magnification filter From Section 6 4 webgl cubemap fisheye html Loads a cubemap texture but uses it in a 2D context to imitate a picture taken with a fisheye lens 2D texture coordinates are first mapped onto a sphere to get the direction vector that is used to sample the cubemap From Section 6 4 webgl simple hierarchy2D html Demonstrates using 2D modeling transformations in WebGL and GLSL with some simple animated hierarchical objects Transforms are implemented in JavaScript as objects of type AffineTransform2D defined in the file webgl AffineTransform2D js From Section 6 5 webgl glmatrix cube unlit html A first example of doing 3D graphics directly in WebGL with no lighting From Section 7 1 webgl cube with simple rotator html Demonstrates the use of a SimpleRotator defined in webgl simple rotator js to do mouse rotation From Section 7 1 webgl cube with trackball rotator html Demonstrates the use of a TrackballRotator defined in webgl trackball rotator js to do mouse rotation This is almost identical to the previous example From Section 7 1 webgl cube with basic lighting html A first example of implementing lighting directly in WebGL Adds lighting to webgl glmatrix cube unlit html The lighting in this case uses only diffuse color and a directional light from the direction of the viewer From Section 7 2 webgl basic specular lighting html A first implementation of specular reflection From Section 7 2 webgl basic specular lighting Phong html A second implementation of specular reflection using Phong shading with the lighting calculations in the fragment shader Aside from moving the calculation to the fragment shader this example is identical to the previous example From Section 7 2 webgl parametric function grapher html Lets the user graph a parametric surface given by equations x u v y u v and z u v entered by the user A relatively complex program it illustrates GLSL data structures two sided lighting and polygon offset From Section 7 2 webgl spotlights html A demo of spotlights with three colored spotlights The user can change the cutoff angle and spot exponent From Section 7 2 webgl diskworld 2 html A relatively complex program with hierarchical modeling and several kinds of lighting including moving lights spotlights and light attenuation This is the same scene as the three js example threejs diskworld 1 html with added lighting features From Section 7 2 webgl texture transform html Animated texture images using glMatrix to implement texture transformations From Section 7 3 webgl bumpmap html A mostly successful attempt to implement bumpmapping From Section 7 3 webgl image blur html Applies a blur filter to an image A very simple demo of using blending for something other than transparency Also a very simple example of a multi pass algorithm From Section 7 4 webgl render to texture html Uses a WebGL framebuffer to draw an image directly into a texture From Section 7 4 webgl cube camera html Shows a skybox and moving cubes reflected on the surface of an object Uses a dynamic cubemap texture as an environment map on the reflective object The six images for the cubemap texture are redrawn for each frame of an animation From Section 7 4 webgl anisotropic filtering html Demonstrates the use of the WebGL anisotropic filtering extension Shows a large textured rectangle extending into the distance and lets the user turn anisotropic filtering on and off From Section 7 5 webgl image evolver html demonstrates use of the WEBGL color buffer float WebGL extension The application is a simple genetic algorithm that tries to approximate a given image The floating point color buffer is used for finding the average of the color values in an image From Section 7 5 7 Live Demos This book includes live or interactive demos 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 including Internet Explorer 9 or later Demos from the remaining chapters use WebGL which will work with most modern desktop browsers including Internet Explorer 11 or later and many browsers on mobile devices However WebGL might have problems in some of these browsers on some machines 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 c2 pixel magnifier html from Section 2 1 Magnifies a small square of pixels in an image so that the user can see how text lines and other shapes are made from pixels including antialiasing c2 rgb hsv html from Section 2 1 Lets the user modify a color in the RGB and HSV color spaces by dragging sliders c2 approximating ovals html from Section 2 2 Shows how ovals can be approximated by a polygons with different numbers of sides c2 cubic bezier html from Section 2 2 Lets the user modify a cubic Bezier curve by dragging endpoints and control points c2 quadratic bezier html from Section 2 2 Lets the user modify a quadratic Bezier curve by dragging endpoints and control points c2 transforms 2d html from Section 2 3 Lets the user apply a sequence of rotation scaling and translation transforms to a shape and see the results c2 transform equivalence 2d html from Section 2 4 attempts to demonstrate the equivalence between the modeling transform and the viewport transform in 2D c2 cart and windmills html from Section 2 4 Shows a simple animated 2D scene constructed using hierarchical modeling c2 SimplePaintDemo html from Section 2 6 Lets the user draw on a canvas using some basic shapes A Smudge tool illustrates pixel manipulation This demo is pretty much the same as the sample program canvas2d SimplePaintProgram html c2 image filters html from Section 2 6 Lets the user apply a variety of filters to several images A filter as the term is used here replaces the color of each pixel with a weighted average of the colors of that pixel and its eight neighbors c3 first triangle demo html from Section 3 1 Shows the usual first example for OpenGL A triangle with differently colored vertices For this demo you can change the colors of the vertices c3 first cube html from Section 3 1 Draws a cube with six different colors for the sides with no lighting effects and with the default

    Original URL path: http://math.hws.edu/graphicsbook/source/index.html (2016-02-07)
    Open archived version from archive

  • Introduction to Computer Graphics Glossary
    by the surface Emission color can make the object look like it is glowing but it does not illuminate other objects Emission color is often called emissive color environment mapping A way of simulating mirror like reflection from the surface of an object The environment that is to be reflected from the surface is represented as a cubemap texture To determine what point in the texture is visible at a given point on the object a ray from the viewpoint is reflected from the surface point and the reflected ray is intersected with the texture cube Environment mapping is also called reflection mapping Euclidean transform A transform that preserves distances and angles A Euclidean transform represents a rigid motion That is the transform of an object is an exact copy of the object with the same size and shape Any Euclidean transform can be represented as a composition of rotations and translations Euler angles Express the rotation of an object in its own coordinate system given as individual rotations about the x y and z axes in that coordinate system The cumulative effect of rotations about the three coordinate axes depends on the order in which the rotations are applied extrusion A technique for producing a solid from a 2D shape by moving the shape along a curve in 3D The solid is the set of points through which the shape passes as it moves along the curve The most common case is moving the shape along a line segment that is perpendicular to the plane that contains the shape In practice in computer graphics the object that is produced by extrusion is just the surface of the extruded solid eye coordinates The coordinate system on 3D space defined by the viewer In eye coordinates in OpenGL 1 1 the viewer is located at the origin looking in the direction of the negative z axis with the positive y axis pointing upwards and the positive x axis pointing to the right The modelview transformation maps objects into the eye coordinate system and the projection transform maps eye coordinates to clip coordinates filling a shape Drawing the interior of a shape by coloring the pixels that lie inside the shape Filling does not apply to shapes such as lines that have no interior fixed function pipeline A graphics processing pipeline with a fixed set of processing stages that cannot be modified by a programmer Data for an image passes through a sequence of processing stages with the image as the end product The sequence is called a pipeline With a fixed function pipeline the programmer can enable and disable stages and set options that control the processing but cannot add to the functionality flat shading A lighting computation for the faces of a polygon or polygonal mesh that uses the same normal vector at each point in the polygon giving the polygon a flat or faceted appearance fragment shader A shader program that will be executed once for each pixel in a primitive A fragment shader must compute a color for the pixel or discard it Fragment shaders are also called pixel shaders framebuffer In WebGL a data structure that organizes the buffers for rendering an image possibly including a color buffer a depth buffer and a stencil buffer A WebGL graphics context has a default framebuffer for on screen rendering and additional framebuffers can be created for off screen rendering frame buffer A region of memory that contains color data for a digital image Most often refers to the memory containing the image that appears on the computer s screen front face One of the two sides of a polygon in 3D A polygon has two sides One is taken to be the front face and the other is the back face In OpenGL the difference is determined by the order in which the vertices of the polygon are enumerated The default is that seen from the front the vertices are enumerated in counterclockwise order around the polygon frustum A truncated pyramid that is a pyramid from which the top has been cut off In OpenGL 1 1 the view volume for a perspective projection is a frustum geometric modeling Creating a scene by specifying the geometric objects contained in the scene together with geometric transforms to be applied to them and attributes that determine their appearance geometric primitive Geometric objects in a graphics system such as OpenGL that are not made up of simpler objects Examples in OpenGL include points lines and triangles but the set of available primitives depends on the graphics system Note that as the term is used in OpenGL a single primitive can be made up of many points line segments or triangles geometric transform A coordinate transformation that is a function that can be applied to each of the points in a geometric object to produce a new object Common transforms include scaling rotation and translation glMatrix An open source JavaScript library for vector and matrix math in two and three dimensions global ambient intensity In OpenGL ambient light that is present in the environment independent of any light source Total ambient light is the sum of the global ambient light plus the ambient light intensity of each enabled light source GLSL OpenGL Shader Language the programming languauge that is used to write shader programs for use with OpenGL GLU The OpenGL Utility library Defines several functions for use with older versions of OpenGL including gluPerspective and gluLookAt Not to be confused with GLUT GLU is a standard part of OpenGL GLUT The OpenGL Utility Toolkit A platform independent library for writing OpenGL applications OpenGL does not include support for windows or events GLUT adds such support It also has functions for drawing 3D shapes such as spheres and polyhedra not to mention a teapot GLUT is written in the C programming language and is used with the C API for OpenGL However many GLUT functions are also available in JOGL the Java API for OpenGL A newer and somewhat improved version of the toolkit named FreeGLUT is commonly used in place of the original version GPU Graphics Processing Unit a computer hardware component that performs graphical computations that create and manipulate images Operations such as drawing a line on the screen or rendering a 3D image are done in the GPU which is optimized to perform such operations very quickly gradient A pattern of color produced by assigning colors to certain reference points and computing color for other points by interpolating or extrapolating colors from the reference points The effect is a color progression along line segments between reference points Different rules for extending the colors beyond those lines produce different types of gradient such as linear gradients and radial gradients grayscale Refers to a color scheme or image in which each color is a shade of gray where the term shade of gray here includes black and white Typically 256 shades of gray are used Grayscale is also called monochrome GUI Graphical User Interface A user interface for a program where the user interacts with the program using components such as windows menus buttons and text input boxes hidden surface problem The problem in 3D graphics of deciding which object is visible at each pixel in an image When one object is behind another object from the point of view of the viewer only the front object should appear in the image A rendering algorithm for 3D graphics must satisfy this constraint Algorithms that solve the hidden surface problem include the painter s algorithm and the depth test algorithm hierarchical modeling Creating complex geometric models in a hierarchical fashion starting with geometric primitives combining them into components that can then be further combined into more complex components and so on homogeneous coordinates A way of representing n dimensional vectors as n 1 dimensional vectors where two n 1 vectors represent the same n dimensional vector if they differ by a scalar multiple In 3D for example if w is not zero then the homogeneous coordinates x y z w are equivalent to homogeneous coordinates x w y w z w 1 since they differ by multiplication by the scalar w Both sets of coordinates represent the 3D vector x w y w z w HSL color A color specified by three numbers giving the hue saturation and lightness of the component The HSL color model is similar to the HSV color model The main difference is that in HSL pure spectral colors occur when L 0 5 while in HSV they occur when V 1 HSV color A color specified by three numbers giving the hue saturation and value of the component The hue represents the basic color The saturation is the purity of the color with a saturation value of zero producing a shade of gray that is a color with no actual hue at all The value represents the brightness of the color with a value of zero giving black Value is also called brightness and the name HSB is sometimes used instead of HSV HTML HyperText Markup Language A language that is used for specifying the content of web pages An HTML document is made up of text along with elements for adding other content such as images and for defining the structure of the document Because of nesting of elements the document can be represented by a tree like data structure HTML canvas A canvas element on a web page The canvas appears as a rectangular area on the page The JavaScript programming language can use a canvas element as a drawing surface HTML is a language for specifying the content of a web page JavaScript is the programming language for web pages The canvas element supports a 2D graphics API In many browsers it also supports the 3D graphics API WebGL identity matrix The n by n identity matrix is an n by n matrix which has ones on the diagonal and zeros elsewhere Multiplication of any matrix B by the identity matrix in either order leaves B unchanged Multiplication of an n dimensional vector by the n by n identity matrix leaves the vector unchanged that is the identity matrix is the matrix for the identity transformation identity transform A transform that has no effect on its argument For example the identity transform in 2D is given by the formula I x y x y The identity transform I has the property that if T is any transform then I followed by T is the same as T and T followed by I is the same as T image texture An image that is applied to a surface as a texture so that it looks at if the image is painted onto the surface indexed color A color scheme in which colors are selected from a limited palette of colors For example if the palette contains 256 colors then a color can be specified by an eight bit integer giving its position or index in the list of colors indexed face set IFS A data structure that represents a polyhedron or polygonal mesh The data structure includes a numbered list of vertices and a list of faces A face is specified by listing the indices of the vertices of the face that is a face is given as a list of numbers where each number is an index into the list of vertices intensity of a light source A light source emits light at various wavelengths The intensity of a light at a given wavelength is the amount of energy in the light at that wavelength The total intensity of the light is its total energy at all wavelengths The color of a light is determined by its intensities at all wavelengths interpolation Given values for some quantity at certain reference points computing a value for that quantity at other points by some kind of averaging applied to the values at the reference points invariant qualifier In GLSL a modifier that ensures that when the same expression is used to compute the value of a variable in two different shaders the value will be the same in both shaders This can be important for multi pass algorithms where several shader programs are applied in succession to render one image inverse transform Given a transform T the inverse transform of T is a transform that reverses the operation of T For example for a 2D transform for R to be the inverse of T means that R T x y x y Scaling by 0 5 is the inverse of scaling by 2 Translation by 3 5 is the inverse of translation by 3 5 Not every transform has an inverse For example scaling by a factor of zero has no inverse IOR Index of Refraction A property of a medium such as air or glass that transmits light The refraction or bending of light rays that pass from one medium to another depends on the ratio of the IORs of the two media The index of refraction of a medium depends on the speed of light in that medium JavaScript A programming language for web pages JavaScript code on a web page is executed by a web browser that displays the page and it can interact with the contents of the web page and with the user There are JavaScript APIs for 2D and for 3D graphics JOGL A Java implementation of OpenGL JOGL is very complicated since it attempts to support all versions of OpenGL in one programming system JOGL integrates seamlessly with Java s Swing and AWT graphics JSON JavaScript Object Notation A syntax for representing JavaScript objects as strings similar to the object literal syntax that is used in JavaScript JSON objects cannot contain functions but they can contain strings numbers and booleans JSON has become a popular standard for storage and transmission of structured data keyframe animation An animation technique in which the value of some quantity is given explicitly only at certain times during the animation The times when the quantity is specified are called keyframes Between keyframes the value of the quantity is obtained by interpolating between the values specified for the keyframes Lambert shading A technique for computing pixel colors on a primitive using a lighting equation that takes into account ambient and diffuse reflection In Lambert shading the lighting equation is applied only at the vertices of the primitive Color values for pixels in the primitive are calculated by interpolating the values that were computed for the vertices Lambert shading is named after Johann Lambert who developed the theory on which it is based in the eighteenth century lathing A technique for producing a surface by rotating a planar curve about a line that lies in the same plane as the curve As each point rotates about the line it generates a circle The surface is the union of the circles generated by all the points on the curve Lathing imitates shapes that can be produced by a mechanical lathe length of a vector A vector is defined by its length and its direction so length is a fundamental property When a vector is represented as an arrow its length is just the length of that arrow For a 2D vector given by coordinates x y the length is the square root of x x y y For a 3D vector given as x y z the length is the square root of x x y y z z lighting Using light sources in a 3D scene so that the appearance of objects in the scene can be computed based on the interaction of light with the objects material properties lighting equation The equation that is used in OpenGL to compute the visible color of a point on a surface from the material properties of the surface the normal vector for that point the direction to the viewer the ambient light level and the direction and intensity of light sources linear algebra The field of mathematics that studies vector spaces and linear transformations between them Linear algebra is part of the essential mathematical foundation of computer graphics linear gradient A color gradient pattern in which there is a color variation along a certain line with constant color along lines perpendicular to that line linear transformation A function from one vector space to another that preserves vector addition and multiplication by constants Linear transformations can be represented by matrices In computer graphics they are used to implement geometric operations such as rotation and translation lossless data compression A scheme for reducing the size of a dataset without losing any of the information in that dataset The original data can be recovered exactly from the compressed data The image formats GIF and PNG use lossless data compression to reduce the size of the image file lossy data compression A scheme for reducing the size of a dataset in which some of the information in the dataset can be lost The data that is recovered from the compressed data can differ from the original data The image format JPEG use lossy data compression to reduce the size of the image file luminance A quantity representing the perceived brightness of a color For an RGB color it is a weighted average of the red green and blue components of the color The usual formula is 0 3 red 0 59 green 0 11 blue magnification filter An operation that is used when applying a texture to an object when the texture has to be stretched to fit the object For an image texture a magnification filter is applied to compute the color of a pixel when that pixel covers just a fraction of a pixel in the image material The properties of an object that determine how that object interacts with light in the environment Material properties in OpenGL include for example diffuse color specular color and shininess matrix A rectangular array of numbers A matrix can be represented as a two dimensional array with numbers arranged in rows and columns An N by N matrix represents a linear transformation from N dimensional space to itself matrix mode In OpenGL 1 1 a state variable that determines which one of several transformation matrices will be affected by functions such as glRotatef and glFrustum The matrix mode is set with the function glMatrixMode Possible values include GL MODELVIEW GL PROJECTION and GL TEXTURE minification filter An operation that is used when applying a texture to an object when the texture has to be shrunk to fit the object For an image texture a minification filter is applied to compute the color of a pixel when that pixel covers several pixels in the image mipmap One of a series of reduced size copies of a texture image of decreasing width and height Starting from the original image each mipmap is obtained by dividing the width and height of the previous image by two unless it is already 1 The final mimpap is a single pixel Mipmaps are used for more efficient mapping of the texture image to a surface when the image has to be shrunk to fit the surface modeling transformation A transformation that is applied to an object to map that object into the world coordinate system or into the object coordinate system for a more complex hierarchical object modelview transformation In OpenGL 1 1 a transform that combines the modeling transform with the viewing transform That is it is the composition of the transformation from object coordinates to world coordinates and the transformation from world coordinates to eye coordinates Because of the equivalence between modeling and viewing transformations world coordinates are not really meaningful for OpenGL and only the combined transformation is tracked multi pass algorithm A rendering algorithm that draws a scene several times and combines the results somehow to compute the final image A simple example is anaglyph stereo in which a left eye and right eye image of the scene are rendered separately and combined Netbeans An integrated development environment for writing programs in Java and other programming languages Netbeans is a free program that can be downloaded from https netbeans org nio buffer A Java object belonging to the class java nio Buffer or one of its subclasses Nio buffers are similar to arrays but they are optimized for input output operations Nio buffers are used instead of arrays for certain purposes in Java s JOGL API for OpenGL normalized vector The result of dividing a non zero vector by its length giving a unit vector that is a vector of length one Note that normalized vector and normal vector are confusingly unrelated terms normal vector A normal vector to a surface at a point on that surface is a vector that is perpendicular to the surface at that point Normal vectors to curves are defined similarly Normal vectors are important for lighting calculations norm of a vector Another term for the length of the vector For a 3D vector given as x y z the norm is the square root of x x y y z z object coordinates The coordinate system in which the coordinates for points in an object are originally specified before they are transformed by any modeling or other transform that will be applied to the object off screen canvas My term for a segment of the computer s memory that can be used as a drawing surface for drawing images that are not visible on the screen Some method should exist for copying the image from an off screen canvas onto the screen In Java for example an off screen canvas can be implemented as an object of type BufferedImage OpenGL A family of computer graphics APIs that is implemented in many graphics hardware devices There are several versions of the API and there are implementations or bindings for several different programming languages Versions of OpenGL for embedded systems such as mobile phones are known as OpenGL ES WebGL is a version for use on Web pages OpenGL can be used for 2D as well as for 3D graphics but it is most commonly associated with 3D orthographic projection A projection from 3D to 2D that simply discards the z coordinate It projects objects along lines that are orthogonal perpendicular to the xy plane In OpenGL 1 1 the view volume for an orthographic projection is a rectangular solid painter s algorithm A solution to the hidden surface algorithm that involves drawing the objects in a scene in order from back to front that is in decreasing order of distance from the viewer A disadvantage is that the order is usually not well defined unless some objects are decomposed into smaller sub objects Another issue is that the order of drawing has to change when objects move or when the point of view changes painting program A computer program for creating images using raster style graphics where the user creates the image by controlling the colors of each pixel path tracing A rendering algorithm based on the idea of computing all the paths that light could have followed to arrive at the position of a viewer from each direction Since that is literally impossible the algorithm traces a random sample of paths and averages the results As the number of samples increases the average converges to a very high quality image pattern fill Using copies of an image to fill the interior of a two dimensional shape The image can be repeated horizontally and vertically as necessary to cover the shape Perlin noise A technique invented by Ken Perlin in 1983 that is used in the computation of natural looking procedural textures A Perlin noise function has numerical inputs usually 2 or 3 and produces an output number in the range 1 0 to 1 0 The output is pseudo random but has some regularity with features that are similarly sized and regularly distributed and with variation on several scales per pixel lighting Doing lighting calculations at each pixel of a primitive which gives better results in most cases than per vertex lighting Phong shading uses per pixel lighting with normal vectors interpolated from the vertices perspective projection A projection from 3D to 2D that projects objects along lines radiating out from a viewpoint A perspective projection attempts to simulate realistic viewing A perspective projection preserves perspective that is objects that are farther from the viewpoint are smaller in the projection In OpenGL 1 1 the view volume for a perspective projection is a frustum or truncated pyramid per vertex lighting Doing lighting calculations only at the vertices of a primitive and interpolating the results to get the colors of interior pixels Per vertex lighting is the standard in traditional OpenGL Per vertex lighting without specular reflection is Lambert shading Phong shading A technique for computing pixel colors on a primitive using a lighting equation that takes into account ambient diffuse and specular reflection In Phong shading the lighting equation is applied at each pixel Normal vectors are specified only at the vertices of the primitive The normal vector that is used in the lighting equation at a pixel is obtained by interpolating the normal vectors for the vertices Phong shading is named after Bui Tuong Phong who developed the theory in the 1970s pixel A digital image is made up of rows and columns of small rectangles called pixels To specify a digital image a color is assigned to each pixel in the image point light A light source whose light rays eminate from a single point Also called a lamp since a lamp approximates a point source of light Also called a positional light polygon A multi sided shape lying in a plane and specified by a list of points called its vertices and made up of the line segments from each point in the list to the next point in the list plus a line segment from the last point in the list to the first point All the points are required to lie in the same plane Sometimes the term polygon includes the interior of the shape as well as its boundary polygonal mesh A collection of polygons where the polygons can be joined together along their edges A polygonal mesh can represent a polyhedron or can be used as an approximation for a curved surface A polygonal mesh can be represented as an indexed face set polygon offset A 3D graphics technique that slightly increases or decreases the depth of the pixels in a primitive as it is rendered Polygon offset is used to avoid having several objects at exactly the same depth a situation that is not handled well by the depth test polyhedron A closed 3D figure whose faces or sides are polygons Usually it is assumed that the faces of a polyhedron do not intersect except along their edges power of two texture A texture image whose width and height are powers of two In some graphics systems this is a requirement of any image that is to be used as a texture precision qualifier In GLSL one of the following modifiers on a numeric variable declaration lowp mediump or highp A precision modifier specifies the minimum number of bits or range of values for the variable procedural texture A texture for which the value at a given set of texture coordinates is computed as a mathematical function of the coordinates as opposed to an image texture where the value is obtained by sampling an image programmable pipeline A graphics processing pipeline in which some of the processing stages can or must be implemented by programs Data for an image passes through a sequence of processing stages with the image as the end product The sequence is called a pipeline Programmable pipelines are used in modern GPUs to provide more flexibility and control to the programmer The programs for a programmable pipeline are known as shaders and are written in a shader programming language such as GLSL projection A transformation that maps coordinates in 3D to coordinates in 2D Projection is used to convert a three dimensional scene into a two dimensional image projection transformation In 3D graphics a transformation that maps a scene in 3D space onto a 2D image In OpenGL 1 1 the projection maps the view volume that is the region in 3D space that is visible in the image to clip coordinates in which the values of x y and z range from 1 to 1 The x and y coordinates are then mapped to the image while the z coordinate provides depth information quad A quadrilateral that is a four sided figure in the plane OpenGL 1 1 has the primitives GL QUADS and GL QUAD STRIP for drawing quads but it assumes without checking that the vertices that are provided are in fact planar and define quadrilaterals that are convex quaternion A vector in the quaternion algebra which is a four dimensional vector space in which two vectors in addition to being added can be multiplied In computer graphics quaternions of length one are often used to represent rotations An advantage is that in the quaternion representation it is possible to smoothly interpolate between two rotations radial gradient A color gradient pattern in which there are concentric circles or sometimes ellipses of constant color with a color variation along the radius of the circles raster graphics Pixel based graphics in which an image is specified by assigning a color to each pixel in a grid of pixels rasterization The process of creating a raster image that is one made of pixels from other data that specifies the content of the image For example a vector graphics image must be rasterized in order to be displayed on a computer screen ray casting The process of following a ray that is half of an infinite line starting at a given point and extending in a given direction in order to find points of intersection of the ray with objects in a scene Usually only the intersection point that is closest to the starting point of the ray is of interest ray tracing A recursive rendering algorithm that uses ray casting A ray is cast from the viewpoint through a point in the image and into the scene to determine what is seen at that point To determine the color that is seen at that point further rays are cast from the point including a reflected ray if the object has specular reflections a refracted ray if the object is translucent and shadow rays towards light sources to determine whether the object is illuminated by that light Finding a color for a reflected or refracted ray can use a recursive application of the ray tracing algorithm real time graphics The type of computer graphics that is needed for computer animation or other applications where the images must be rendered quickly at the time when they are viewed For computer animation real time graphics generally requires the ability to render the scene sixty times per second reflection mapping Another name for environment mapping reflectivity The proportion or fraction of incident light that is reflected by an object An object can have different reflectivities at different wavelengths The color of an object is determined by its reflectivities at all wavelengths refraction The bending of light as it passes from one transparent or translucent medium into another regular polygon A polygon in which all the sides have the same length and all the angles between consecutive sides are equal Usually the term is restricted to simple polygons which have sides that do not intersect except at their endpoints regular polyhedron A polyhedron in which each face is a regular polygon and all the faces and angles are identical There are only five regular polyhedra the tetarhedron with 4 triangular faces the cube with 6 square faces the octahedron with 8 triangular faces the dodecahedron with 12 pentagonal faces and the icosahedron with 20 triangular faces renderbuffer In WebGL a buffer that is a region of memory that can be attached to a framebuffer for use as a color buffer depth buffer or stencil buffer rendering The process of producing a 2D image from a 3D scene description render to texture A technique in which the output of a rendering operation is written directly to a texture In WebGL render to texture can be implemented by attaching the texture as one of the buffers in a framebuffer RGBA color An RGB color specified by red green and blue component values together with an alpha component The alpha component is most often take to specify the degree of transparency of the color with a maximal alpha value giving a fully opaque color RGB color A color specified by three numbers giving the amount of red green and blue in the color right handed coordinate system A coordinate system on 3D space in which the x y and z axes satisfy this property If you point the thumb of your right hand in the direction of the positive z axis then your fingers will curl from the positive x axis towards the positive y axis right hand rule A rule that is used to determine the positive direction of rotation about an axis in 3D space If you point the thumb of your right hand in the direction of the axis then your fingers will curl in the direction of positive angles of rotation Note that this assumes that the axis has a direction in OpenGL an axis of rotation is determined by the point 0 0 0 and another point x y z and the direction of the axis is from 0 0 0 towards x y z rotation A geometric transform that rotates each point by a specified angle about some point in 2D or axis in 3D sampler variable In GLSL a variable in a shader program that can be used to do lookup in an image texture The value of a sampler variable specifies the texture unit that will be used to do the lookup In WebGL sampler variables are of type sampler2D or samplerCube sampling The operation of mapping texture coordinates to colors from a texture including using mipmaps if available and applying a minification or magnification filter if necessary scalar product The product of a number and a vector The scalar product of a number s and vector v is the vector obtained by multiplying each coordinate of v by s In 3D if s is a number and v x y z then the scalar product of s times v is the vector sx sy sz scaling A geometric transform that multiplies each coordinate of a point by a number called the scaling factor Scaling increases or decreases the size of an object but also moves its points closer to or farther from the origin Scaling can be uniform the same in every direction or non uniform with a different scaling factor in each coordinate direction A negative scaling factor can be used to apply a reflection scene description language A language that can be used to specify graphics images by stating what s in the image That is the scene is created declaratively by stating what it contains as opposed to being created procedurally by a program A document written in a scene description language can be used to generate a scene graph for the scene scene graph A data structure that represents the objects in a scene together with attributes of the objects and the modeling transformations that are applied to the objects An image of the scene is created by traversing the scene graph data structure A scene graph might exist only conceptually or it might be an actual data structure in a program shader A program to be executed at some stage of the

    Original URL path: http://math.hws.edu/graphicsbook/glossary.html (2016-02-07)
    Open archived version from archive

  • Introduction to Computer Graphics -- News
    released This version simply corrects some errors some typos and some unclear wording December 20 2015 A course was taught from this textbook in Fall 2015 The web site for that course includes a set of lab programming projects See http math hws edu eck cs424 index f15 html August 25 2015 In case someone would like a bound printed copy I have made one available at the print on

    Original URL path: http://math.hws.edu/graphicsbook/news.html (2016-02-07)
    Open archived version from archive

  • Exploring Sorting Algorithms
    Insertion Sort Merge Sort Quick Sort New Sort Fast Run Pause Step Comparisons 200 Comparisons 0 Copies 0 X X Timed Sort Number of arrays Arrays Sorted Items per array Elapsed Time Sorting Algorithm Bubble Sort Selection Sort Insertion Sort

    Original URL path: http://math.hws.edu/eck/js/sorting/xSortLab.html (2016-02-07)
    Open archived version from archive

  • Rosette Symmetry
    6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Sorry This web page requires canvas graphics which your web browser does nto support Undo Redo Clear Show Slices Tool Line Rectangle Oval Filled Rect

    Original URL path: http://math.hws.edu/eck/js/symmetry/rosette.html (2016-02-07)
    Open archived version from archive