Continuing to very powerful Rendering Model Java2D.

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

Digital Images in Java Java’s imaging classes. Java imaging library  Java has good support for image processing  Must master a handful of classes and.
1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer.
Georgia Institute of Technology Drawing in Java – part 2 Barb Ericson Georgia Institute of Technology September 2005.
CSC1401 Drawing in Java - 2. Reminder from last class How do you save your modified picture? String filename = …; Picture stevePicture = new Picture(filename);
More Java Drawing in 2D Animations with Timer. Drawing Review A simple two-dimensional coordinate system exists for each graphics context or drawing surface.
GUI and Swing, part 2 The illustrated edition. Scroll bars As we have previously seen, a JTextArea has a fixed size, but the amount of text that can be.
Graphics Programming UQC117S2 Semester /4. Session 3 1 Drawing in Java 2D Graphics API.
Lecture07 Graphics Programming in Java. Introduction Most of the graphics programming of java is done with: Most of the graphics programming of java is.
Graphics Programming. In this class, we will cover: The difference between AWT and Swing Creating a frame Frame positioning Displaying information in.
1 L38 Graphics and Java 2D™ (3). 2 OBJECTIVES In this chapter you will learn:  To understand graphics contexts and graphics objects.  To understand.
Chapter 3 - Introduction to Java Applets Outline 3.1Introduction 3.2Thinking About Objects 3.4A Simple Java Applet: Drawing a String 3.5Two More Simple.
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.
Java Review Structure of a graphics program. Computer Graphics and User Interfaces Java is Object-Oriented A program uses objects to model the solution.
Swing Graphics ● Empty Swing containers have no visual appearance except for a background color ● Every JComponent must have a paintComponent method that.
Web Design & Development Lecture 18. Java Graphics.
CS324e - Elements of Graphics and Visualization Java2D Graphics.
Vector Graphics Making custom images. Raster vs. Vector Graphics In computer graphics, a raster graphics image, or bitmap, is a dot matrix data structure.
Java ME & Blackberry APIs for Game Dev Week III. Overview Java 2D API Java 3D API SVG Blackberry APIs
1 Interface Types & Polymorphism & introduction to graphics programming in Java.
1 Graphical User Components (II) Outline JTextArea Creating a Customized Subclass of JPanel JPanel Subclass that Handles Its Own Events Windows: Additional.
Graphics and Multimedia Part #2
2D Graphics: Rendering Details
CSE 219 Computer Science III Images. HW1 Has been posted on Blackboard Making a Game of Life with limited options.
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.
Advanced Computer Graphics Depth & Stencil Buffers / Rendering to Textures CO2409 Computer Graphics Week 19.
Adobe Illustrator Basics Instructor: Cristol Gregory Assistant: Tara Caimi.
Element. The element Used to dynamically draw graphics using javascript. Capable of drawing paths, circles, rectangles, text, and images.
Advanced User Interfaces with Java SD’98 - Session 3206 Ted Faison Faison Computing Inc.
Image processing with Java - 2D cont’d. Overview  An imaging model that supports the manipulation of fixed- resolution images stored in memory.  A new.
Java Graphics Swing Graphics
Graphics and Java 2D. 2 Introduction Java’s graphics capabilities –Drawing 2D shapes –Controlling colors –Controlling fonts Java 2D API –More sophisticated.
J McQuillan SE204: 2004/2005: Lecture 4slide 1 The Graphics Class Used when we need to draw to the screen Two graphics classes –Graphics –Graphics2D.
Canvas and Graphics CS 21a. 9/26/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L17: Canvas.
Graphics Copyright © 2015 by Maria Litvin, Gary Litvin, and Skylight Publishing. All rights reserved. Java Methods Object-Oriented Programming and Data.
Java Graphics. Review 3 kinds of elements in components API? Layout managers Events Extend vs. Implement.
INT 840E Computer graphics Introduction & Graphic’s Architecture.
1 Chapter 3 2D Graphics: Rendering Details  Color spaces, paints stroke types  Affine transforms including translation, rotation, scaling, shearing,
Chapter 18 產生驗證碼. No Cache 防止在 JSP 或 SERVLET 中的輸出不被 BROWSER 保存在 CACHE 中.
CSE 219 Computer Science III Image Manipulation. HW 1 Has been posted on Blackboard Making a Game of Life with limited.
Jens Dalsgaard Nielsen Jan Dimon Bendtsen Dept. of Electronic Systems Basic Programming INS-basis GF, PDP and HST.
Computer Graphics Chapter 6 Andreas Savva. 2 Interactive Graphics Graphics provides one of the most natural means of communicating with a computer. Interactive.
(C) 2010 Pearson Education, Inc. All rights reserved.  Class Graphics (from package java.awt) provides various methods for drawing text and shapes onto.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Graphics Concepts CS 2302, Fall /17/20142 Drawing in Android.
Classes Copyright © The McGraw-Hill Companies, Inc. Permission required for reproduction or display.
Graphics and Java2D Chapter Java Coordinate System Origin is in _____________ corner –Behind title bar of window X values increase to the ________.
Classes. Preparation Scene so far has been background material and experience –Computing systems and problem solving –Variables –Types –Input and output.
Java Graphics Opening Discussion zWhat did we talk about last class? zDo you have any questions about the assignment? zOffset between class.
1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer.
Java 2D Drawing in Java 2. Agenda l Overview l Drawing Shapes l Paint Styles l Transparency l Using Local Fonts l Stroke Styles l Coordinate Transformations.
Java 2D Image Manipulation A Brief Overview Ziv Yaniv.
Advanced Java Screen Update Techniques SD’98 - Session 4406 Ted Faison Faison Computing Inc.
Basic Graphics 03/03/16 & 03/07/16 Imagine! Java: Programming Concepts in Context by Frank M. Carrano, (c) Pearson Education - Prentice Hall, 2010.
Projects: not limited to spec Error checking File filters Create multiple file formats Polygons Filled shapes Etc.
Georgia Institute of Technology Drawing in Java – part 2 Dr Usman Saeed Assistant Professor Faculty of Computing and Information Technology North Jeddah.
CPCS 391 Computer Graphics Lab One. Computer Graphics Using Java What is Computer Graphics: Computer graphics are graphics created using computers and,
Main characteristics of Vector graphics  Vector graphics provide an elegant way of constructing digital images (diagrams, technical illustration and.
Graphics JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin, Gary Litvin, and Skylight.
10/20/2005week71 Graphics, mouse and mouse motion events, KeyEvent Agenda Classes in AWT for graphics Example java programs –Graphics –Mouse events –Mouse.
Eleventh Graphics in Java.
12 Graphics and Java 2D™.
Java Graphics.
Java Graphics CS 2511.
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.
Chapter 49 Java 2D.
Presentation transcript:

Continuing to very powerful Rendering Model Java2D.

Summary about Java2D API from previous week  That API is not considered a part of Swing; but  it is closely related to Swing &  effectively used to develop sophisticated Swing applications.  Consists of a set of classes and interfaces for advanced 2D line art, text, and image rendering.

Some classes and interfaces from package jawa.awt Graphicd2D Graphics subclass for rendering 2D shapes, text and images BasicStroke Defines a basic set of rendering attributes for outlines of graphics primitives GradientPaint provides a way to fill and outline 2D shapes with a linear color gradient TexturePaint provides a way to fill and outline shapes with texture images Paint define how color patterns can be generated for rendering operations Shape provides definitions for geometrical objects Stroke provides methods for obtaining the outline of a geometrical shape

Some classes and interfaces from package java.awt.geom General Path represents a path constructed from straight lines, quadratic curves and cubic curves Line2D Represents a line in coordinate space RectangularShape Base class for geometrical shapes with rectangular frames. Subclasses include Arc2D,Ellipse2D, Rectangle2D and RoundRectangle2D BufferedImage Describes an Image with a buffer of colored pixel data composed of a ColorModel and a Raster ColorModel Defines methods for translating a numerical pixel value to color

Some classes and interfaces from package java.awt.image Raster is part of a BufferedImage that describes sample valued in a rectangular array of pixels Kernel describes 2D array used for filtering BufferedImages BufferedImageOp defines methods that perform operations on BufferedImages RasterOp describes single-input/single-output processes performed on Rasters

Defining BufferedImage object new BufferedImage (int width, int height, int type)  Gives us an image of the width/height/type we require, synchronously. That is:  After the method returns, that image does exist  We can then get at the data directly  getRGB, setRGB,  Raster object allows more ways of getting at the pixel data,  get the ColorModel,

……………………………………………… BufferedImage b= new BufferedImage (10,10,BufferedImage.TYPE_INT_RGB); //This BufferedImage is 10 pixels wide and 10 pixels height //From the third image is stored in RGB color sheme. Graphics2D graph = b.createGraphics(); //To create the pattern, first draw into BufferedImage //Created a Graphics2D object for drawing on the BufferedImage graph.setColor (Color.yellow); //draw in yellow graph.fillRect (0,0,10,10); //draw filled rectangle …………………………………………………………… /**graph2D is previously created to get Graphics2D by casting g to Graphics2D **/ // Graphics2D= graph2D = (Graphics2D) g; graph2D.setPaint (new TexturePaint (b, new Rectangle (10,10))); //set the Paint object to a new TexturePaint object graphics2D.fill (new RoundRectangle2D.Double (155,30,75,100,50,50)); //invoked the fill method of Graphics2D to draw a filled objectRoundRectangle2D.Double

TexturePaint class TexturePaint ( BufferedImage txt, Rectangle2D anchor) txt - the BufferedImage object with the texture used for painting anchor - the Rectangle2D in user space from the BufferedImage used to anchor and replicate the texture  A TexturePaint object uses the image stored in its associated BufferedImage as the fill texture for a filled-in shape.  The TexturePaint class provides a way to fill any shape with a texture that is specified as a BufferedImage.  The size of the BufferedImage object should be small because the BufferedImage data is copied by the TexturePaint object.  But, rectangle may be the same size of BufferedImage  At construction time, the texture is anchored to the upper left corner of a Rectangle2D that is specified in user space.  Texture is computed for locations in the device space by conceptually replicating the specified Rectangle2D infinitely in all directions in user space and mapping the BufferedImage to each replicated Rectangle2D.

TYPE_INT_RGB public static final int TYPE_INT_RGB  Represents an image with 8-bit RGB color components packed into integer pixels.  The image has a DirectColorModel without alpha. TYPE_BYTE_BINARY public static final int TYPE_BYTE_BINARY  Represents an opaque byte-packed 1, 2, or 4 bit image.  The image has an IndexColorModel without alpha.  When this type is used as the imageType argument to the BufferedImage constructor that takes an imageType argument but no ColorModel argument,  1-bit image is created with an IndexColorModel with two colors in the default RGB ColorSpace: {0, 0, 0} and {255, 255, 255}.  Images with 2 or 4 bits per pixel may be constructed via the BufferedImage constructor that takes a ColorModel argument by supplying a ColorModel with an appropriate map size.  Images with 8 bits per pixel should use the image types TYPE_BYTE_INDEXED or TYPE_BYTE_GRAY depending on their ColorModel.

What are Alpha Textures?  An alpha texture is a texture that contains only alpha channel, transparency, information.  Typically this is used to "stencil" a piece of geometry to only leave pieces visible without chewing very large numbers of polygons.  Effectively it is a cookie-cutter for geometry.  Where the alpha texture is completely transparent, we see nothing.  Where it is fully opaque, we see whatever underlying geometry is there - including the material color.  If we go the multi-texture route, it would also include the other textures.  A typical use for alpha textures is for creating 2D text in a 3D world.

Creating an alpha texture  Dynamically creating one in code or  Loading one from a file. (When we load from a file, we get whatever the file format has).  The main feature of an alpha texture is that it only contains one piece of information - the alpha channel.  This could be expressed in two ways  a full RGBA image with the color channels ignored, We use 4 bytes per pixel, and effectively throwing three of them away,  a simple grey-scale image with a single channel, which is interpreted to mean alpha channel information We use one byte per pixel.

Creating Source Image  Firstly we must start by a BufferedImage  we set the type to be a greyscale image (1 byte per channel) BufferedImage b = new BufferedImage(128, 128, BufferedImage.TYPE_BYTE_GRAY);  We can also use the byte-packed format (TYPE_BYTE_BINARY)  if we want to save even more memory,  these are really only useful if all we want is transparent/non- transparent, rather than shades of transparency.  We need to draw to the texture.  We start with the usual fetch of the Graphics context to draw with Graphics2D g = b.createGraphics();

Creating Source Image (cont’d)  We have to execute the drawing instructions.  How we are going to draw to the image? Clear all the alpha bits or make the image all transparent and just draw the parts we want to see OR We need to decide on the colors to use, and this is the tricky bit.  To create instances of Color that have the Alpha value set Color CLEAR_COLOR = new Color(0, 0, 0, 0); Color VISIBLE_COLOR = new Color(0, 0, 0, 1f);  This is not correct  We are drawing to an image that only has one byte of color representation.  If we did the above, all we get is a completely clear image.  The drawing routines will just ignore the alpha value completely and only work from the color value.

Creating Source Image (cont’d)  This is a greyscale image so we really need to think in terms of black and white.  What black and white mean in the context of transparency?  If something is transparent, we have a (normal) alpha value of zero. If this alpha value is sourced from a black and white image, we need to have the value that is zero in that image be the transparent bit  In the color world, what has a value of zero? Black.  what is the visible bit? White.  color definitions really need to be this: Color CLEAR_COLOR = Color.black; Color VISIBLE_COLOR = Color.white

Creating Source Image (cont’d)  We are ready to draw away.  We clear all the image and then draw a box with a hole in it: g.setColor (CLEAR_COLOR); g.fillRect (0, 0, 128, 128); g.setColor (VISIBLE_COLOR); g.fillRect (32, 32, 64, 64); g.setColor (CLEAR_COLOR); g.fillRect (48, 48, 32, 32); g.dispose();

Example: Tiled Images as Fill Patterns

import javax.swing.*; import java.awt.*; import java.awt.geom.*; import java.awt.image.*; /** An example of using TexturePaint to fill objects with tiled images. Uses the getBufferedImage method of ImageUtilities to load an Image from a file and turn that into a BufferedImage **/ public class TiledImages extends JPanel { private String dir = System.getProperty ("user.dir"); private String imageFile1 = dir + "/images/yourpicture.jpg"; private TexturePaint imagePaint1; private Rectangle imageRect; private String imageFile2 = dir + "/images/yourshape.gif"; private TexturePaint imagePaint2; private int[] xPoints = { 30, 700, 400 }; private int[] yPoints = { 30, 30, 600 }; private Polygon imageTriangle = new Polygon (xPoints, yPoints, 3);

public TiledImages() { BufferedImage image = ImageUtilities.getBufferedImage(imageFile1, this); imageRect = new Rectangle(235, 70, image.getWidth(), image.getHeight()); imagePaint1 = new TexturePaint (image, imageRect); image = ImageUtilities.getBufferedImage(imageFile2, this); imagePaint2 = new TexturePaint(image, new Rectangle(0, 0, 32, 32)); } public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2d = (Graphics2D)g; g2d.setPaint(imagePaint2); g2d.fill(imageTriangle); g2d.setPaint(Color.blue); g2d.setStroke(new BasicStroke(5)); g2d.draw(imageTriangle); g2d.setPaint(imagePaint1); g2d.fill(imageRect); g2d.setPaint(Color.black); g2d.draw(imageRect); } public static void main(String[] args) { WindowUtilities.openInJFrame(new TiledImages(), 750, 650); } }

Stroke Interface  abstract interface java.awt.Stroke. Defines only one method: createStrokedShape(Shape p), which generates a Shape that is the outline of the given Shape parameter.  This outline can be of various size, shape. The only implementing class is BasicStroke  We use Strokes to define line styles for drawing in the Java2D graphics context.  To set the stroke attribute of a given Graphics2D we use its setStroke() method. BasicStroke: class java.awt.BasicStroke  This class implements the Stroke interface and defines a set of rendering attributes specifying how to render the outline of a Shape.  These attributes consist of line width, join style, end-cap style, and dash style: The line width (often called the pen width) is the thickness measured perpendicular to its trajectory. The end-cap style specifies whether round, butt, or square ends are used to render the ends of line segments: CAP_ROUND, CAP_BUTT, and CAP_SQUARE. The join style specifies how to render the joints between segments. This can be one of bevel, miter, or round: JOIN_BEVEL, JOIN_MITER, and JOIN_ROUND. The dash style defines a pattern of opaque and transparent regions rendered along a line segment.

ImageUtilities.java  A class that simplifies a few common image operations  Creating a BufferedImage from an image file, using MediaTracker to wait until an image or several images are done loading.

import java.awt.*; import java.awt.image.*; public class ImageUtilities { // Create Image from a file, then turn that into a BufferedImage. public static BufferedImage getBufferedImage(String imageFile, Component c) { Image image = c. getToolkit().getImage (imageFile); waitForImage(image, c); BufferedImage bufferedImage = new BufferedImage(image.getWidth(c), image.getHeight(c), BufferedImage.TYPE_INT_RGB); Graphics2D g2d = bufferedImage.createGraphics(); g2d.drawImage(image, 0, 0, c); return(bufferedImage); }

/ /Take an Image associated with a file, and wait until it is done loading. //Just a simple application of MediaTracker. //If we are loading multiple images, we don't use this consecutive times; // instead we use the version that takes an array of images. public static boolean waitForImage(Image image, Component c) { MediaTracker tracker = new MediaTracker(c); tracker.addImage(image, 0); try { tracker.waitForAll(); } catch(InterruptedException ie) {} return (!tracker.isErrorAny()); }

/ /Take some Images associated with files //wait until they are done loading. //Just a simple application of MediaTracker. public static boolean waitForImages (Image[] images, Component c) { MediaTracker tracker = new MediaTracker(c); for (int i=0; i<images.length; i++) tracker.addImage(images[i], 0); try { tracker.waitForAll(); } catch(InterruptedException ie) {} return(!tracker.isErrorAny()); }

public class MediaTracker  The MediaTracker class is a utility class to track the status of a number of media objects.  Media objects could include audio clips as well as images, though currently only images are supported.  To use a media tracker, create an instance of MediaTracker and call its addImage method for each image to be tracked.  In addition, each image can be assigned a unique identifier.  This identifier controls the priority order in which the images are fetched.  It can also be used to identify unique subsets of the images that can be waited on independently.  Images with a lower ID are loaded in preference to those with a higher ID number.