The Graphics Teaching Tool Dana Tenneson Anne Spalter Brown University.

The Graphics Teaching ToolThe Graphics Teaching Tool

Dana Tenneson

Anne SpalterBrown University

Digital Visual LiteracyDigital Visual Literacy

• The world is becoming increasingly filled with visual digital media.

– Impacts workplace and daily life

• A “literacy” of digital media is required.

– Essential for “critical readings” of media

Digital Visual Literacy in the Job MarketDigital Visual Literacy in the Job Market

• Skills listed in resumes– Photoshop

– PowerPoint

– Illustrator

• But is there an understanding of the concepts beyond the specific applications?

• Can people move to new applications when needed?

Education ShortcomingsEducation Shortcomings

• Self Taught: Number of options in commercial software is overwhelming

• Tutorials: Focus on the “How” but not the “Why”

• Conceptual courses: Aimed at tech-savvy students

Pedagogical IdealsPedagogical Ideals

• Visual learning for visual material

– Lectures are not enough

– Constructivist

– Make underlying models explicit for more accurate schema development

• Simple Interface

• Integrated Environment

– Expose the differences between data types

The Graphics Teaching ToolThe Graphics Teaching Tool

The Graphics Teaching ToolThe Graphics Teaching Tool

• A learning-oriented 2D and 3D environment

– Tools chosen to reduce clutter and reinforce conceptual understanding

• Inspection tools “Look under the hood” at your data

• Math and algorithms present, but simplified

– color = (α * new color) + ((1-α) * old color)

– “Higher alpha means more solid color.”

The Graphics Teaching ToolThe Graphics Teaching Tool

• Multiple data types side by side

– Raster, 3D, Vector each is a plug-in

• Java-based application

– Optimized for use over web and desktop installation

• Powerful, if not commercial-grade

– Students have enough power to be expressive.

– Stepping-stone, not replacement

• It’s free.

Raster GraphicsRaster Graphics

• Pixel-Setting Tool

– Brushes, Pens, Erasers, Spray Cans, etc

– User-defined alpha mask

• Filtering Tool

– Blur, Sharpen, “shift”

– Define your own kernel

Raster GraphicsRaster Graphics

• Data Inspection

– Numeric ARGB merged with “Fat Bits” pixels.

– Set data by hand

Raster GraphicsRaster Graphics

• Area Selection, Cloning, and Multi-colored Pixel-Setting Brushes also available

Left image courtesy of Jessica Xian at SIGGRAPH 2005

3D Graphics3D Graphics

• Use primitives (cube, sphere, cylinder) or load .obj files

• Adjust parameters of lights and the camera

3D Graphics3D Graphics

• Data Inspection to create basic scene graphs of objects

– Experiment with order of operations

– Group objects together

Vector GraphicsVector Graphics

• Primitive shapes

– Square

– Circle

– Triangle

– Text

• Data Inspection

– Adjust scale, location, rotation

Other Plug-insOther Plug-ins

• Renderers

– Data and its representation are kept separate

• Tool Sets

– Additional specialized tools for existing data types

Use in the ClassroomUse in the Classroom

• Brown University’s Visual Thinking/Visual Computing course

– Started with “Make your own brush” task

– Students became enthralled with GTT

– Test results showed a high level of understanding of raster graphics

Use in the ClassroomUse in the Classroom

• Artemis Project

– Summer program at Brown for 9th grade girls

• GTT to be included in lesson modules created for Maricopa Community Colleges

– Modules part of an NSF ATE grant project targeting Digital Visual Literacy

– Hundreds of students near-term

– Potentially many thousands long-term

Coming SoonComing Soon

• Embedded lesson modules

• Web deployment kit

– Customizable lessons

• Open Source

– Roll your own tools, renderers, and data types

ThanksThanks

• Andy van Dam

• Emil Sarpa & Sun Microsystems

• Ken Perlin & Konrad Rieck

• Undergrad Development Team

– Janete Perez

– Julie Kumar

– Ilya Medvedev

– Nong Li

– Jeffrey Cohen

DownloadDownload

• http://graphics.cs.brown.edu/research/gtt

• …or just Google “Graphics Teaching Tool”

• Feedback appreciated.

– How you’ve used it.

– The impact it has had.

– Bugs you’ve discovered.

– Features you wish it had.