Class 1: Introducing "Computer Graphics"

Course Overview and Minimum Requirements:

• See Syllabus for detailed overview

• ~5 hours per week (2.5hrs in class, at least the same out of class)

• Active in online email group discussions (requires email)

• Comfortable using a Web browser

• Comfortable creating simple Web pages (optional)

• Comfortable installing and removing software (optional)

Exercise: Subscribe to our Yahoo! email group ("email group", also known as an eGroup -- see syllabus) and post your first introduction email to the group.

NOTE: YOU CAN USE ANY TOOLS THAT YOU'D LIKE TO COMPLETE EXERCISES IN THIS COURSE (you don't have to use GIMPShop or Photoshop, for example, nor do you have to use FrontPage -- we use these in class, but you're free to use any tools you'd like to complete exercises and assignments in this course).

Introducing "Computer Graphics"

• Q - What is Computer Graphics?
  A - 1) The set of technologies used to create art with computers, 2) Art or designs created using such technologies
• Content creation tools (i.e., "graphics programs", "image editors", "world builders", etc) are used to create graphical imagery ("graphics"), which are stored in computer files. A few popular content creation tools:
  • Adobe Photoshop
  • Adobe Illustrator
  • JASC Paint Shop Pro
  • Corel PhotoPaint
  • Corel Draw
  • Microsoft Paint
  • Macromedia Director
  • Macromedia Flash 
  • Cosmo Worlds
  • VizX3D
  • blaxxun Instant Community
  • Maya
  • Blender

  Note: Content development tools come in a variety of ways -- Web services, freeware, shareware, trial versions, limited editions, and full commercial releases are the most common types of software products available today. We'll explore each in this class.

• File Formats describe the way in which a graphic is stored in a computer file, which in turn determine what you can and can't do in terms of graphics features (i.e., transparency, animation, interactivity, etc.). A few popular graphics file formats:
  • Bitmap graphics: Joint Photographic Experts Group (JPEG), Graphics Interchange Format (GIF), Portable Network Graphics (PNG), Tagged Image File Format (TIFF), Bitmap (BMP)
  • Vector graphics: Flash, Scalable Vector Graphics (SVG), PostScript (PS)
  • 3D graphics: Virtual Reality Modeling Language (VRML), eXtensible 3D (X3D), Viewpoint Experience Technology (VET, formerly known as Metastream 3, or MTS3), LightWave Object (LWO), LightWave Scene (LWS). Play Quake and chat in  Web3DChat.com.to see 3D in action...
  • Streaming Media: RealAudio and  RealVideo (REAL), Microsoft Media, Motion Picture Experts Group version 4 (MPEG-4)

  Note: Fundamentally there are 3 major types of graphics: bitmap, vector, and 3D. Streaming media, on the other hand, describes the way in which media content (graphics of any type, audio, video, etc) is delivered to the end user. Specifically, "streaming" describes a technique that delivers content incrementally (a little at a time so that it can be viewed or played while it downloads over the Internet).

• A Web browser plug-in (viewer, aka "helper application") is needed if your Web browser does not natively know how to display (render) a specific type of graphic. Although most Web browsers have built-in (native) knowledge of JPEG, GIF, and PNG bitmap graphics, for example, a plug-in is required for each vector graphics, 3D graphics, or streaming media format that you wish to view. Note that some browsers come bundled with at least one popular vector graphics and streaming media plug-in, but most do NOT know how to deal with 3D graphics. In some cases, however, Java applets can be used to display graphics file formats -- this eliminates the need for a plug-in for most people, as Java is natively supported by the vast majority of Web browsers on the market today. If a Web browser doesn't come with native Java support (as is the case with very old browsers, or version 6.0 and higher of Internet Explorer and Netscape Navigator), the end user can install Java support manually (much like a plug-in).

Exercise: Visit the following Web sites and use your browser to determine the format of the each graphic in the page:

Tip: To determine that format of a graphic that appears in your Web browser start by right-clicking on it (click on the image using the right button of your mouse). If the graphic is a bitmap format and you're using the Internet Explorer Web browser a pop-up menu will appear that lets you either look at the "Properties" of that image, which you can choose to see the name of that file. If you're using Netscape Navigator, however, and the graphic is a bitmap format you'll be able to choose "View Image" from the pop-up menu that appears when you right-click on the image. In either case you'll be able to see the file extension that appears as the last few characters of the file name (such as .gif, .jpg, .png) which indicates the format of the graphic as described in the above course notes. BUT: If the graphic IS NOT A BITMAP FORMAT then you can't be sure what options will appear when you right-click on the image. In the case of the Flash vector graphics format, for example, a pop-up menu for the Flash plug-in appears that lets you control various properties of that Flash graphic. In other cases no pop-up menu appears at all, making it impossible to dermine the format in this way (instead you'll have to View the Source Code of the Web page by choosing "Source" or "Page Source" from the "View" menu at the top of your browser, and examine the code it contains to try and figure out the format of the graphics contained in the page -- this is tricky, and takes some time to learn so we'll explore this in future classes).

Visit these pages and try to determine (using the above tips) the format of various graphics in the page:

Boston College

MediaGrid.org

ImmersiveEducation.org

Burn All Gifs

TotsTV.org

MACINTOSH USERS - GIMP vs. GIMPShop

In this course we'll use the GIMPShop bitmap graphics content authoring tool. For Macintosh users who can't install GIMPShop you might be able to run "The GIMP" instead. The GIMP is the original program on which GIMPShop is based (GIMPShop is a slightly modified version of the GIMP -- the modifications make GIMPShop look more like Photoshop). In terms of look and feel the GIMP is still quite close to GIMPShop, however, and so Macintosh users might find it helpful in cases where GIMPShop can't be used. Here's the GIMP homepage and installer for Macintosh:

http://www.gimp.org/ (HOME PAGE)
http://www.gimp.org/macintosh/ (MAC INSTALLERS)

Alternately, you can always use Photoshop or any other graphics program in this course.

For Next Class:

1) Purchase the digital textbook for this class (see Syllabus for details) and then read the chapters detailed below (see #2 below).  WARNING: ALL STUDENTS MUST SUBSCRIBE TO THE ONLINE TEXTBOOK BEFORE I CAN APPROVE SUBSCRIPTIONS (DUE TO PASSWORD BREACHES THE ENTIRE CLASS MUST SUBSCRIBE BEFORE PASSWORDS ARE CIRCULATED). SUBSCRIBE TODAY IF YOU HAVEN'T ALREADY. 

2) READ THE FOLLOWING 1.0.0 INTRODUCING BITMAP GRAPHICS CHAPTERS FROM THE "BITMAP GRAPHICS" TEXTBOOK (see #1 above for subscription details):

1.0.1 What is a "bit map"?

1.0.2 What is a "pixel"?

1.0.3 What does "bit depth" refer to? 

1.0.4 What does "resolution" mean?

3) Install Second Life on your HOME (or work) computer. Follow the user naming convensions detailed on our course notes for Class #3 (see "BLOGs and SECOND LIFE overview" section on Class #3 notes for details).

4) Explore CNET (http://www.cnet.com/) and become familiar with the site. Find current reviews on computer graphics software, especially freeware and shareware software for editing bitmap graphics.