1 Chapter 3 2D Graphics: Rendering Details  Color spaces, paints stroke types  Affine transforms including translation, rotation, scaling, shearing,

Slides:



Advertisements
Similar presentations
2D Graphics Drawing Things. Graphics In your GUI, you might want to draw graphics E.g. draw lines, circles, shapes, draw strings etc The Graphics class.
Advertisements

1 More on Applets Overview l Changing Colors l Changing Fonts & Styles l Applet Life-Cycle l Input using Dialog Window l Input using HTML parameters l.
Graphics You draw on a Graphics object The Graphics object cannot directly be created by your code, instead one is generated when the method paintComponent.
Graphics Chapter 16.  If you want to draw shapes such as a bar chart, a clock, or a stop sign, how do you do it?
Graphics Programming. Introduction GOAL: Build the Indexer Client Event-driven vs. Sequential programs Terminology – Top-level windows are called “frame.
PHY-102 SAPIntroductory GraphicsSlide 1 Introductory Graphics In this section we will learn how about how to draw graphics on the screen in Java:  Drawing.
Zhang & Liang, Computer Graphics Using Java 2D and 3D (c) 2007 Pearson Education, Inc. All rights reserved. 1 Chapter 2 2D Graphics: Basics.
Java Two Dimensional Graphics with Affine Transforms
CSC1401 Drawing in Java - 2. Reminder from last class How do you save your modified picture? String filename = …; Picture stevePicture = new Picture(filename);
Draw Shapes Introduction to simple graphics. What is a graphics context? An instance of the Graphics class Graphics is ABSTRACT! You can extend Graphics.
Computer Graphics Lecture 4 Geometry & Transformations.
Continuing to very Powerful Rendering Model Java2D.
1 L36 Graphics and Java 2D™ (1). 2 OBJECTIVES  To understand graphics contexts and graphics objects.  To understand and be able to manipulate colors.
1 Chapter 15 l Basic Figures l Colors l Fonts and Other Text Details Graphics Objects.
GUI programming AWT(Abstract Windows Toolkit)-GUI components library when Java was introduced AWT was replaced by Swing components import javax.swing.*;
Lecture07 Graphics Programming in Java. Introduction Most of the graphics programming of java is done with: Most of the graphics programming of java is.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Topics  Applets  Classes used for graphics Graphics Point Dimension.
Slides prepared by Rose Williams, Binghamton University Chapter 19 Swing II.
May 11, 1998CS102-02Lecture 7-1 More Graphics in Java CS Lecture 7-1 A picture's worth a thousand words.
1 L38 Graphics and Java 2D™ (3). 2 OBJECTIVES In this chapter you will learn:  To understand graphics contexts and graphics objects.  To understand.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 5 Java Graphics Applets.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. 4 th Ed Chapter Chapter 5 Applets and Graphics.
Zhang & Liang, Computer Graphics Using Java 2D and 3D (c) 2007 Pearson Education, Inc. All rights reserved. 1 Chapter 2 2D Graphics: Basics F The architecture.
CS324e - Elements of Graphics and Visualization Java2D Graphics.
Chapter 16: Graphics. Objectives Learn about the paint() and repaint() methods Use the drawString() method to draw String s using various fonts and colors.
1 Review of COMPSCI 221  Chapters 1-11 in text  User Interfaces will be addressed as a take- home question.
Java ME & Blackberry APIs for Game Dev Week III. Overview Java 2D API Java 3D API SVG Blackberry APIs
Geometric Transformation. So far…. We have been discussing the basic elements of geometric programming. We have discussed points, vectors and their operations.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Tutorial 26 – CheckWriter Application Introducing Graphics.
Tools for Raster Displays CVGLab Goals of the Chapter To describe pixmaps and useful operations on them. To develop tools for copying, scaling, and rotating.
Java Software Solutions Lewis and Loftus Chapter 7 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphics -- Introduction The.
1 Graphical User Components (II) Outline JTextArea Creating a Customized Subclass of JPanel JPanel Subclass that Handles Its Own Events Windows: Additional.
CS324e - Elements of Graphics and Visualization Compositing.
2D Graphics: Rendering Details
Chapter 15 Graphics and Java 2D™ Java How to Program, 8/e (C) 2010 Pearson Education, Inc. All rights reserved.
© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Chapter 28 - Java Graphics and Java2D Outline 28.1Introduction.
Chapter 28 - Java Graphics and Java2D Outline 28.1Introduction 28.2Graphics Contexts and Graphics Objects 28.3Color Control 28.4Font Control 28.5Drawing.
 Pearson Education, Inc. All rights reserved. 1 Ch 12 Graphics and Java 2D In this chapter you will learn:  To understand graphics contexts.
(C) 2010 Pearson Education, Inc. All rights reserved. Omer Boyaci.
Advanced User Interfaces with Java SD’98 - Session 3206 Ted Faison Faison Computing Inc.
Graphics and Java 2D. 2 Introduction Java’s graphics capabilities –Drawing 2D shapes –Controlling colors –Controlling fonts Java 2D API –More sophisticated.
Zhang & Liang, Computer Graphics Using Java 2D and 3D (c) 2007 Pearson Education, Inc. All rights reserved. 1 Chapter 3 2D Graphics: Rendering Details.
Chapter 15Java: an Introduction to Computer Science & Programming - Walter Savitch 1 Chapter 15 l Basic Figures l Colors l Fonts and Other Text Details.
Drawing and Filling Geometric Shapes. Java comes with more than just points and lines. Within the Graphics2D class, there are also methods for drawing.
GDI+ 1. Objectives 2 GDI+ class  Create and render Graphic  Display information on the computer screen, printer 3.
Graphics & Java 2D Drawing Two Dimensional Shapes Controlling Fonts Controlling Colors.
Applets Applet is java program that can be embedded into HTML pages. Java applets runs on the java enabled web browsers such as mozilla and internet explorer.
INT 840E Computer graphics Introduction & Graphic’s Architecture.
CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak
(C) 2010 Pearson Education, Inc. All rights reserved.  Class Graphics (from package java.awt) provides various methods for drawing text and shapes onto.
Merete S COLLEGEFACULTY OF ENGINEERING & SCIENCE Graphics ikt403 – Object-Oriented Software Development.
Introduction to Java Chapter 8 - Introduction to Java Graphics1 Chapter 8 Introduction to Java Graphics.
Review on Graphics Basics. Outline Polygon rendering pipeline Affine transformations Projective transformations Lighting and shading From vertices to.
Graphics and Java2D Chapter Java Coordinate System Origin is in _____________ corner –Behind title bar of window X values increase to the ________.
1 Graphics, Fonts and Color Chapter 9. 2 What is in this chapter: l Graphics class and coordinates l graphics primitives (lines,rectangles,ovals and arcs)
1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer.
1 Teaching Innovation - Entrepreneurial - Global The Centre for Technology enabled Teaching & Learning, N Y S S, India DTEL DTEL (Department for Technology.
Advanced Java Screen Update Techniques SD’98 - Session 4406 Ted Faison Faison Computing Inc.
6.1 Coordinates The screen of a computer is a grid of little squares called pixels. The color of each pixel can be set individually, and drawing on the.
Modeling Transformation
Main characteristics of Vector graphics  Vector graphics provide an elegant way of constructing digital images (diagrams, technical illustration and.
10/20/2005week71 Graphics, mouse and mouse motion events, KeyEvent Agenda Classes in AWT for graphics Example java programs –Graphics –Mouse events –Mouse.
12 Graphics and Java 2D™.
JAVA 2 Design and programming of GUI
Line and Character Attributes 2-D Transformation
Java Graphics The basic rendering mechanism is the drawing system that controls when and how programs can draw on a graphics component. When a component.
Graphics -- Introduction
12 Graphics and Java 2D™.
(c) 2002 University of Wisconsin, CS 559
Chapter 49 Java 2D.
Presentation transcript:

1 Chapter 3 2D Graphics: Rendering Details  Color spaces, paints stroke types  Affine transforms including translation, rotation, scaling, shearing, and reflection  Object and viewing transformations  To identify the compositing rules  To use clipping path  To apply fonts and font metrics  To understand glyph, ligature, and derived font

2 Color Spaces  There are several models used for color –CIEXYZ - a color standard –RGB - used for monitors –CYMK - used for printers –sRGB - device-independent color space

3 RGB Colors  Color created by mixing light of different colors  This is what a CRT monitor uses  The Color class uses this model

4 CMY Colors  Color created by mixing ink/paint of different colors  This is how color on a a printer works

5 Creating Colors  To create a Color, give the amount of red, green and blue Color blue = new Color( 0, 0, 255); Color cyan = new Color( 0, 255, 255); Color black = new Color( 0, 0, 0); Color gray = new Color( 128, 128, 128); Color white = new Color( 255, 255, 255); Color hotPink = new Color( 255, 105, 180);

6 Setting Colors  The original AWT classes have two methods for controlling the color –Every component (including JPanel) has a background color public void setBackground( Color c)‏ –The graphics context has a color property  The current color is used for drawing and filling public void setColor( Color c)‏

7 Paint Interface Generalizing the concept of color, Java 2D drawing applies an attribute called paint

8 GradientPaint  Defines a Paint with varying colors  Specified by two points and two colors –at the first point, the color is the first color –at the second point, the color is the second color –in between, the color changes gradually –can be cyclic or acyclic (default)‏  an extra boolean parameter set to true creates a cyclic paint

9 TexturePaint  TexturePaint uses an image to tile the area being filled  Create with an image and an anchor rectangle –The anchor controls the positioning of the image TexturePaint( BufferImage image, Rectangle2D anchor)‏

10 Strokes  The Stroke interface defines a method for creating an outline from a shape  BasicStroke class has the following properties –Width –End style (butt, round, square)‏ –Join style (bevel, miter, round)‏ –Miter limit (limits miters on small angle joins)‏ –Dash pattern and phase

11 Dash Patterns  specified by an array of alternating on and off lengths –{10, 10} makes uniformly spaced dashes where the spaces are the same length as the dashes –{20, 5} makes equal-length dashes with a smaller space between them –{10, 5, 5, 5} makes a dot-dash pattern  The dash phase controls where in the pattern a line starts

12 Affine Transformation  Maps parallel lines to parallel lines  Common affine transforms –Translation –Rotation –Reflection –Scale –Shear

13 Isometry  An isometric transform preserves distances as well as parallel lines. –Also called Euclidean or rigid motions  Translation and rotation are isometries  Reflection is also an isometry  Shearing and scaling are not isometries

14 AffineTransform  All but translation can be represented by a 2x2 matrix  Using a 3x3 matrix allows translations to be represented by a matrix too  AffineTransform class has methods to set all but a refletion transform  Constructors and methods allow you to set the matrix directly

15 Translation  A translation moves an object (or a viewport)  Specified by how far to move in the x direction and the y direction void setToTranslate( double tx, double ty)‏

16 Translation Matrix 100 ty10 tx01

17 Rotation  Objects are rotated about the origin  Specified by an angle to rotate through  Rotations about other points are also possible void setToRotate( double theta )‏ void setToRotate( double theta, double x, double y)‏

18 Rotation Matrix cos  -sin  0 sin  cos 

19 Reflection  Map an object to its mirror image  To create a reflection, you need to specify the transformation matrix void setTransform( float m00, float m01, float m02, float m10, float m11, float m12)‏ AffineTransform(float m00, float m01, float m02, float m10, float m11, float m12)‏

20 General Reflection Matrix Reflection about line y = k x

21 Reflection Matrix Reflection about y-axis

22 Scaling  Scaling changes the size of an object  Shape is preserved if the scale factor is the same in both directions void setToScale( double sx, double sy)‏

23 Scaling Matrix 100 0sy0 00sx Scale by sx in x direction and sy in y direction

24 Shearing  Shifts points in an object by an amount that is proportional to ist distance from a specified line  Shape is not preserved void setToShear( double shx, double shy)‏

25 Scaling Matrix s1 Shear along x-axis by factor s

26 Composition of Transforms  Combine simple transforms to get more complicated ones  Matrix product is non-commutative

27 Clipping Path The rendered image may be clipped by a clipping path

28 Text in Java2D  Text is treated as a special kind of geometric object  A Font defines the rendering shapes of all the characters  One of the properties of a Graphics is a Font –Use the drawString method to display text –the current Font is used –use setFont (newFont) to change the font

29 Glyphs  The geometry describing the shape of an object is a Glyph  A glyph containing multiple letters is a ligature – A common ligature:

30 Font Class  Available fonts are platform (and machine) dependent  Logical fonts –Serif –SansSerif –Monospaced –Dialog –DialogInput  Font styles –PLAIN –ITALIC –BOLD  Derived font  Font metrics

The Font Class  A Font has three components –Font name –Font Style (add BOLD and ITALIC to get both)‏ –Font Size - integer number of points  Constructor takes three parameters Font( String fontFace, int fontStyle, int size)‏

Creating Fonts Font f1 = new Font( “SansSerif”, Font.BOLD, 24); Font f1 = new Font( “SansSerif”, Font.BOLD + Font.ITALIC, 16);

33 Deriving Fonts  If you have a Font, you can modify it to get new fonts –Use the getFont method to get the current font for a Graphics  Use one of the deriveFont factory methods to create a new font Font deriveFont( float size); Font deriveFont( int style); Font deriveFont( AffineTransform tr); … and several combinations

34 Font Measurements  Sometimes, you want to know how big a String will be when you draw it  Get a FontRenderContext for your Graphics2D object FontRenderContext getRenderContext ()‏  Use the getStringBounds method of the Font class to get the bounds of a string –The width and height of the bounds can be used to compute positions Rectangle2D = getStringBounds( String s, FontRenderContext frc);

35 Font Measurements  A LineMetrics object can be used to get more detailed information  Use the getLineMetrics method of the Font class to get the bounds of a string LineMetrics = getLineMetrics( String s, FontRenderContext frc);  The LineMetrics class has methods for getting measurements float getAscent()‏ float getLeading()‏ float getDescending()‏

36 Glyph  Sometimes you want to use some text as a clipping bounds  Geometry of a text string in a particular font is represented by a GlyphVector –Create a Shape from the GlyphVector  Example Font font = new Font("Serif", Font.BOLD, 144); FontRenderContext frc = g2.getFontRenderContext(); GlyphVector gv = font.createGlyphVector(frc, "Java"); Shape glyph = gv.getOutline(100,200);

37 Alpha Compositing  α-channel is used to simulate transparency in images –not all drawing contexts have an alpha channel  Color at a given point is a combination of the source and destination colors

38 A Probabilistic Model  α value as the probability of the color to be shown  Four different events: –source color occurs only -  s (1 -  d )‏ –destination color occurs only -  d (1 -  s )‏ –both colors occur -  s  d –neither color occurs. - (1 -  s ) (1 -  d )‏

39 Alpha Compositing  Porter-Duff came up with a set of 12 different rules that can be used. –based on probabilistic model  The AlphaComposite class incorporates these rues –one constant for each rule –Graphics2D has an AlphaComposite property  The rules don't all work in a Graphics object  They do work in BufferedImages

40 Porter-Duff Rules  Xor  DstOver  DstIn  DstOut  Dst  DstAtop  Clear  SrcOver  SrcIn  SrcOut  Src  SrcAtop