The Graphics Teaching Tool Dana Tenneson Anne Spalter Brown University

Digital 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 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 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 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 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 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 Graphics Pixel-Setting Tool – Brushes, Pens, Erasers, Spray Cans, etc – User-defined alpha mask Filtering Tool – Blur, Sharpen, “shift” – Define your own kernel

Raster Graphics Data Inspection – Numeric ARGB merged with “Fat Bits” pixels. – Set data by hand

Raster Graphics Area Selection, Cloning, and Multi-colored Pixel- Setting Brushes also available Left image courtesy of Jessica Xian at SIGGRAPH 2005

3D Graphics Use primitives (cube, sphere, cylinder) or load.obj files Adjust parameters of lights and the camera

3D Graphics Data Inspection to create basic scene graphs of objects – Experiment with order of operations – Group objects together

Vector Graphics Primitive shapes – Square – Circle – Triangle – Text Data Inspection – Adjust scale, location, rotation

Other Plug-ins Renderers – Data and its representation are kept separate Tool Sets – Additional specialized tools for existing data types

Use 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 Classroom Artemis Project – Summer program at Brown for 9 th 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 Soon Embedded lesson modules Web deployment kit – Customizable lessons Open Source – Roll your own tools, renderers, and data types

Thanks Andy van Dam Emil Sarpa & Sun Microsystems Ken Perlin & Konrad Rieck Undergrad Development Team – Janete Perez – Julie Kumar – Ilya Medvedev – Nong Li – Jeffrey Cohen

Download …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.