INTRODUCTION Computer Graphics 1 INTRODUCTION: THE OUTLINE I. Image Processing / Computer Graphics II. Advantages III. Representative Uses IV. Classification of Applications V. History VI. Conceptual Framework VII. Our First Assignment 2 I. IMAGE PROCESSING / COMPUTER GRAPHICS • Image Processing: • Analysis and reconstruction of existing images • Sub-Areas: • Image Enhancement • Pattern Detection and Recognition • Scene Analysis • Computer Vision 3 I. IMAGE PROCESSING 4 IMAGE ENHANCEMENT Apex Sharpening of Andromeda Galaxy Image http://math.nist.gov/mcsd/highlights/carasso-spie06.html 5 PATTERN DETECTION AND RECOGNITION Body parts detection for people tracking using trees of Histogram of Oriented Gradient descriptors, http://hal.inria.fr/INRIA/inria-00496980/en/ 6 SCENE ANALYSIS The Vision and Mobile Robotics Laboratory, http://www.cs.cmu.edu/~vmr/jobs/jobs.html 7 COMPUTER VISION Software That Evaluates Facial Expressions , http://www.sciencedaily.com/videos/computers_math/internet/5/ 8 I. IMAGE PROCESSING / COMPUTER GRAPHICS • Computer Graphics: • Synthesis of new images • Overlap between the two is growing • William Latham, Evolutionary Art 9 II. ADVANTAGES • Communication between user and computer • Interactive graphics • Creation of abstract, synthetic objects • Not confined to static images: animation • User controlled dynamics 10 III. REPRESENTATIVE USES • User Interfaces • Interactive Data Plotting • Office Automation / Electronic Publishing • Computer-Aided Drafting and Design http://www.warmelin.com/cad-cam.html 11 III. REPRESENTATIVE USES • Simulation and Animation • Scientific • Entertainment • Art and Commerce • Process Control • Cartography 12 IV. CLASSIFICATION OF APPLICATIONS • Dimensionality • Kind of Picture • Type of Interaction • Role of the Image / Graphic • Relationship between Objects and Pictures • Logical • Temporal 13 DIMENSIONALITY: 2D AND 3D http://www.media-freaks.com/articles/3d-animation-studios-what-goes-on-behind-those-closed-doors 14 KIND OF PICTURE: LINE DRAWING / WIREFRAME Grand Designs 3D Software 15 KIND OF IMAGE: COLOR / GRAYSCALE 16 TYPE OF INTERACTION • Offline Plotting • Interactive Plotting • User Moves Around (or within) Object • Interactive Object Design 17 ROLE OF THE IMAGE / GRAPHIC • Picture as End Product • Cartography • Drafting • Artwork • Animation • Picture as Means to an End • CAD/CAM 18 V. HISTORY • Beginnings • Crude Plotting • Sutherland 1963 • Sketchpad 19 V. HISTORY • Output Technology • Vector Display • Oscilloscopes were some of the 1st computer displays • Computation results used to drive the vertical and horizontal axis (X-Y) • Intensity could also be controlled (Z-axis) • Used mostly for line drawings • Display list had to be constantly updated (except for storage tubes) • Raster Display 20 V. HISTORY • Output Technology • Vector Display • Raster Display Raster 21 V. HISTORY • Input Technology • Light Pens • Mouse, Tablet, Touch Screen, Audio • Kinect 22 V. HISTORY • Software • Device Dependent – Device Independent • Program Portability • Programmer Portability • Standards • Core • GKS and GKS-3D • PHIGS and PHIGS+ • Industry Standards (as opposed to official standards) • OpenGL (SGI) • Java-2D and Java-3D (Sun) • DirectX (Microsoft) • X-Windows (MIT/Unix/Linux) • … 23 VI. CONCEPTUAL FRAMEWORK Software Hardware Graphics System/ GPU Application Application Graphics Model/data program Library base 24 VI. CONCEPTUAL FRAMEWORK • Application Model • Application Database • Property Information • Created by: • Application Program • User Interaction 25 VI. CONCEPTUAL FRAMEWORK • Application Program • Translation of the Model to Graphics Commands • Database Traversal • Translation to Geometric Primitives • User Interaction Handling • Sampling vs. Event Driven • Event Loop Model • State and Screen Update vs. State, Screen and Database Update 26 VI. CONCEPTUAL FRAMEWORK • Application Program • Two Basic Paradigms: Sample-Based and Geometry-Based • Sample-based graphics: discrete samples are used to describe visual information • pixels can be created by digitizing images, using a sample-based “painting” program, etc. • often some aspect of the physical world is sampled for visualization, e.g., temperature across the US • example programs: Adobe Photoshop™, GIMP™ , Adobe AfterEffects™ 27 SAMPLE-BASED GRAPHICS • Images are made up of grid of discrete pixels, for 2D “picture elements” • Pixels are point locations with associated sample values, usually of light intensities/colors, transparency, and other control information • Samples created directly in paint-type program, or as sampling of continuous (analog) visual materials • Sample values can also be input numerically • Once an image is defined as pixel- array, it can be manipulated via: • Image editing • Image processing 28 SAMPLE-BASED GRAPHICS • Advantages: • Once image is defined in terms of colors at (x, y) locations on grid, can change image easily by altering location or color values • Pixel information from one image can be copied and pasted into another, replacing or combining with previously stored pixels • Disadvantages: • WYSIAYG (What You See Is All You Get): • no depth information • can’t examine scene from different point of view • at most can play with the individual pixels or groups of pixels to change colors, enhance contrast, find edges, etc. 29 GEOMETRY-BASED GRAPHICS • Geometry-based graphics (also called scalable vector graphics or object-oriented graphics) • Store mathematical descriptions, or “models,” of geometric elements (lines, polygons, polyhedrons…) and associated attributes (e.g., color, material properties). • Images created as pixel arrays (via sampling of geometry) for viewing, but not stored as part of model. Images of many different views are generated from same model • Users cannot usually work directly with individual pixels in geometry-based programs; as user manipulates geometric elements, program resamples and redisplays elements 30 GEOMETRY-BASED GRAPHICS MODELING VS. RENDERING • Modeling • Rendering • Create models • Take “picture” with camera • Apply materials to models • Both can be done with commercial software: • Place models around scene • Autodesk MayaTM ,3D Studio MaxTM, • Place lights in scene BlenderTM, etc. • Place the camera Point Light Spot Light Directional Light Ambient Light 31 VI. CONCEPTUAL FRAMEWORK • Graphics Library • Graphics Subroutine Library or Package • Intermediary between Application and Display Hardware • Examples: OpenGL™, DirectX™, Windows Presentation Foundation™ (WPF), RenderMan™ • Primitives (characters, lines, polygons, meshes,…) • Attributes • Color, line style, material properties for 3D • Lights • Transformations • Immediate mode vs. retained mode 32 VI. CONCEPTUAL FRAMEWORK • Graphics System / GPU • Logical Display Device • User Interaction • Modification of Model and/or Image 33 OUR FIRST ASSIGNMENT 34 THE CODE import static com.jogamp.opengl.GL4.*; import java.nio.FloatBuffer; import javax.swing.JFrame; import com.jogamp.common.nio.Buffers; import com.jogamp.opengl.*; import com.jogamp.opengl.awt.*; @SuppressWarnings("serial") public class Code extends JFrame implements GLEventListener { private GLCanvas myCanvas; public Code() { setTitle("Chapter2 - program1"); setSize(600,400); setLocation(200,200); myCanvas = new GLCanvas(); myCanvas.addGLEventListener(this); getContentPane().add(myCanvas); setVisible(true); } public void display(GLAutoDrawable drawable) { GL4 gl = (GL4) GLContext.getCurrentGL(); float bkg[] = { 1.0f, 1.0f, 0.0f, 1.0f }; FloatBuffer bkgBuffer = Buffers.newDirectFloatBuffer(bkg); gl.glClearBufferfv(GL_COLOR, 0, bkgBuffer); } public static void main(String[] args) { new Code(); } public void init(GLAutoDrawable drawable) {} public void reshape(GLAutoDrawable drawable, int x, int y, int width, int height) {} public void dispose(GLAutoDrawable drawable) {} } 35 SUMMARY I. Image Processing / Computer Graphics II. Advantages III. Representative Uses IV. Classification of Applications V. History VI. Conceptual Framework VII. Our First Assignment 36.