CS2.

CS2 Module 41 Category: CS Concepts Topic: Graphics 1 Objectives Hardware Basic ideas Advanced Concepts

CS 2 Introduction to Object Oriented Programming Module 41 CS Concepts Graphics 1

Computer 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).

Computer 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

Computer 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!

Computer 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

More 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.

Hardware: 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.

Hardware: 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)

Double 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

Double 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

Double 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

The "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

Solution: Double Buffering 0 0 0 0 0 0 STARTADDR Initially we utilize the top 50% of the cradle to frame the picture

Solution: 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

Solution: 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

Java 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)

Java 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.

Java 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)

Java 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!

Java 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 }

FIRE! 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"

Advanced Graphics Topics

Translation 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

Translation Each point gets interpreted [x\' y\'] = [x y] + [Dx Dy]

Scaling : 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

Scaling [x\' y\'] = [x y] * [ Sx 0 ] [ 0 Sy ] (What about extending unequally in two measurements?)

Rotation : 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 

Rotation [x\' y\'] = [x y] * [ cos  sin  ] [-sin  cos  ]

Rotation- - Around Fixed Point Notes on Rotation : huge distinction between: "rotation around focus purpose of object" and "rotation around root