CS2 Module 41 Category: CS Concepts Topic: Graphics 1 Objectives Hardware Basic ideas Advanced Concepts
Slide 2CS 2 Introduction to Object Oriented Programming Module 41 CS Concepts Graphics 1
Slide 3Computer Graphics Defined Computer representation includes the creation, stockpiling, control and presentation of models and pictures of articles . Hotspots for models incorporate reflections of physical, scientific, designing, compositional and reasonable structures. Sources Early: little particular CRT showcases and printed copy plotting. 1980s: desktop raster representation with Apple Macintosh (and later, IBM PCs and clones). Today: regular intuitive representation (e.g., desktop and window supervisors).
Slide 4Computer Graphics:Terminology Desktop PCs use bitmap design : rectangular exhibit of ones and zeros speaking to of cluster of focuses. These focuses constitute picture components, or pixels or pels for short. A raster is a rectangular cluster of pixels. A scanline is an individual line of pixels Video raster gadgets showcase pictures by attracting pixels arrangement
Slide 5Computer Graphics: Some Hardware Cathode Ray Tube (CRT) Monitors contain a fiber that, when warmed, radiates electrons. The subsequent light emission is controlled with electromagnets to focus on a particular point on a phosphor-covered screen. The screenâs phosphor spots gleam quickly when struck. Note: These slides in light of materials from Larry F. Hodges, who educates a phenomenal course in Computer Graphics!
Slide 6Computer Graphics: More Hardware Color CRTs have electron weapons for Red, Blue and Green. The phosphor screen has triads of spots that discharge R, B or G when struck: Triads may cover; there are for the most part around 2.3 to 2.5 triads for each pixel
Slide 7More Hardware: Shadow Masks Convergence point A shadow veil is screen with an opening for every phosphor triad. The veil is absolutely adjusted so the 3 electron bars hit stand out phosphor spot in the triad.
Slide 8Hardware: Scanning Screen pictures are diminished to a raster, and drawn ("scanned") one scanline at once. The drawing must be revived quickly (typically 60x every second). Joined: Alternating even and odd columns are checked at a lower rate (typically 30x every second). The exchanging output columns diminishes glint.
Slide 9Hardware: Frame Buffers A casing cushion sorts out PC memory into a 2D exhibit. Every component compares to a pixel. Bit planes or bit profundity portray the quantity of bits used to speak to every pixel Example: 640 x 480 x 8 == 640 pixels wide, 480 pixels high, with one byte (8 bits) used to depict the shade of every pixel. Real nature: 24 bitplanes with 8 bits for each shading. (2^24 = 16,777,216 interesting hues)
Slide 10Double Buffering 0 0 0 Normally the screen and PC are not synchronized The PC places things in the design support when it needs to and the illustrations card sends the feature picture out as required by the screen Portion of memory Image delivered
Slide 11Double Buffering 0 1 0 1 0 1 0 1 0 1 0 1 0 If we change the memory\'s substance the picture on the screen changes Portion of memory Image created
Slide 12Double Buffering 0 1 0 1 0 1 0 1 0 1 0 0 If the screen were to require a picture part of the way through changing memory we get a picture taking into account what is in memory Portion of memory Image created
Slide 13The "bad" impact Initially the screen resembles This appears for a small amount of a second and reasons an irritating glint impact We need to change it to this
Slide 14Solution: Double Buffering 0 0 0 0 0 0 STARTADDR Initially we utilize the top 50% of the cradle to frame the picture
Slide 15Solution: Double Buffering 0 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 0 STARTADDR We roll out every one of the improvements we need to the base bit and the client sees no "bad" impacts
Slide 16Solution: Double Buffering 0 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 STARTADDR When prepared we simply change the area that the representation equipment uses to make the picture
Slide 17Java Color Java incorporates a few shading encoding models: RGB (red, blue, green), HSV (tone, immersion, power), and so forth to represent shading. Commonly the RGB model is taken after and utilizes a solitary int to portray the shade of a pixel. This single int has inside of the qualities for red, blue, and green bits of the shading. Alpha (8 bits) Red (8 bits) Green (8 bits) Blue (8 bits) 32 Bits (int)
Slide 18Java Color Java has techniques to recover the individual red, blue, and green segments ought to one need them. open int getRed() open int getBlue() open int getGreen() Naturally there are numerous constructors; here are a couple of: open Color(int r, int g, int b) /makes a misty shading open Color(int r, int g, int b, int a)/given r, g, b, a 0..255 open Color(int rgb) Red segment in bits 16-23, green bits 8-15, and blue in bits 0-7.
Slide 19Java Color Methods are given to change over forward and backward between the R, G, B shading model (Hardware arranged) and the H, S, V shading model (User situated) open static float[ ] RGBtoHSB(int r, int g, int b, float[ ] hsbvals) open static int HSBtoRGB(float tint, coast immersion, skim shine)
Slide 20Java Graphics Java bolsters raster shows in protests Each Component has a related Graphics object. We can draw on the Graphics item, changing the objectâs appearance. There are various java.awt.Graphics routines, e.g.,: drawLine(int xStart, int yStart, int xEnd, int yEnd); drawRect(int xLoc, int yLoc, int width, int tallness); fillRect(int x, int y, int width, int stature); //note "fill*" systems utilize the "current color" How would I be able to set the present shading? setColor(Color shading);/stays as a result until you transform it once more!
Slide 21Java Graphics Obtaining the Graphics object in any case: 1. Call getGraphics() on the Component, e.g.: Graphics g = myButton.getGraphics( ); g.setColor(Color.blue); g.fillOval(100, 100, 200, 50); g.setColor(Color.black); g.fillRect(100, 100, 200, 50); OR 2. Override componentâs paint strategy open void paint( Graphics g ) {/* simpler! */ g.drawLine(10, 20, 30, 40); //draws line from pixel 10, 20 to pixel 30, 40 }
Slide 22FIRE! import java.awt.*;/incorporates the Color/and Graphics classes open class DotButton expands Button { private int sweep, width;/* not appeared here, but rather require accessors/modifiers for these! */ public DotButton() { super ("FIRE!"); sweep = 10; measurement = 2* range; }/constructor public void paint (Graphics g) { int w = getSize().width; int h = getSize().height; g.setColor(255, 0, 0, 120);/r,g,b,alpha g.fillOval (w/2 - span, h/2 - sweep, breadth, width); }/paint }/DotButton Adds a red speck to a content catch Note: raster drawings start at upper left of item; thus " - radius"
Slide 23Advanced Graphics Topics
Slide 24Translation Basic changes : (for effortlessness, 2D) Translation : x\' = x + Dx y\' = y + Dy where Dx is relative separation in x measurement, Dy is relative separation in y measurement, prime shows new point in space. Calculation: [x\' y\'] = [x y] + [Dx Dy] P\' = P + T
Slide 25Translation Each point gets interpreted [x\' y\'] = [x y] + [Dx Dy]
Slide 26Scaling : x\' = x * Sx y\' = y * Sy where Sx is scale variable for x measurement, Sy is scale component for y measurement, prime shows new point in space. Calculation: characterizing S as [ Sx 0 ] [ 0 Sy ] [x\' y\'] = [x y] * [ Sx 0 ] [ 0 Sy ] P\' = P * S
Slide 27Scaling [x\' y\'] = [x y] * [ Sx 0 ] [ 0 Sy ] (What about extending unequally in two measurements?)
Slide 28Rotation : x\' = xcos ï± - ysin ï± y\' = xsin ï± + ycos ï± where ï± is edge of revolution and prime shows new point in space. Calculation: [x\' y\'] = [x y] * [ cos ï± sin ï± ] [-sin ï± cos ï± ] P\' = P * R Note: positive edges are counter-clockwise from x toward y; for negative edges (clockwise) utilize characters: cos(- ï± ) = cos ï± , and sin(- ï± ) = - sin ï±
Slide 29Rotation [x\' y\'] = [x y] * [ cos ï± sin ï± ] [-sin ï± cos ï± ]
Slide 30Rotation- - Around Fixed Point Notes on Rotation : huge distinction between: "rotation around focus purpose of object" and "rotation around root