Embed Size (px)
Citation preview
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.
